/* ============================================================ Synelecs Design System — Color + Type Tokens ============================================================ */ @font-face { font-family: "PF Beau Sans Pro"; src: url("../fonts/PFBeauSansPro-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* DM Sans / DM Mono are the digital fonts per the brand manual. Calibri is used in MS Office docs. PF Beau Sans Pro is provided as an alternate display face (used in some print materials). Google Fonts are loaded via tags in each page — not @import — for faster delivery. */ :root { /* ── Primary teal scale ── */ --syn-teal: #1FCFE1; /* Synelecs Teal — primary brand */ --syn-teal-deep: #148FA0; /* hover, active */ --syn-teal-dark: #0D6370; /* text on light, borders */ --syn-teal-light: #7DE8F2; /* highlights, tags */ --syn-teal-pale: #E6F9FC; /* backgrounds, cards */ /* ── Neutrals (cool, navy-leaning) ── */ --syn-navy: #0D2B36; /* primary dark surface */ --syn-slate: #2A4A57; /* secondary dark surface */ --syn-ink: #1A2B35; /* body text, headings */ --syn-mid: #6B8A99; /* secondary text, captions */ --syn-line: #B8CDD5; /* dividers, subtle borders */ --syn-mist: #EFF5F7; /* dividers, light bg */ --syn-bg: #F2F8FA; /* page background */ --syn-white: #FFFFFF; /* ── Semantic accents ── */ --syn-success: #2ECC9A; --syn-success-bg: #E8F8F2; --syn-success-fg: #1A8A6A; --syn-warning: #F5A623; --syn-warning-bg: #FEF5E7; --syn-warning-fg: #C47D0A; --syn-danger: #E74C3C; --syn-danger-bg: #FDEDEB; --syn-danger-fg: #C0392B; /* ── Foreground / background semantic aliases ── */ --fg-1: var(--syn-ink); /* primary text */ --fg-2: var(--syn-mid); /* secondary text */ --fg-3: var(--syn-line); /* tertiary / placeholder */ --fg-accent: var(--syn-teal-deep); --fg-on-dark: var(--syn-white); --fg-on-teal: var(--syn-white); --bg-1: var(--syn-white); --bg-2: var(--syn-mist); --bg-3: var(--syn-bg); --bg-dark: var(--syn-navy); --bg-dark-2: var(--syn-slate); --bg-accent: var(--syn-teal); --bg-accent-soft: var(--syn-teal-pale); --border-1: var(--syn-mist); --border-2: var(--syn-line); --border-accent: var(--syn-teal); /* ── Type families ── */ --font-sans: "DM Sans", "Calibri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "DM Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; --font-display: "PF Beau Sans Pro", "DM Sans", sans-serif; /* ── Type scale (px) ── */ --t-display: clamp(36px, 5vw, 64px); --t-h1: 42px; --t-h2: 28px; --t-h3: 20px; --t-h4: 16px; --t-body: 16px; --t-body-sm: 14px; --t-caption: 12px; --t-label: 11px; --t-mono: 13px; /* ── Weights ── */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ── Line heights ── */ --lh-tight: 1.1; --lh-snug: 1.2; --lh-normal: 1.65; --lh-relaxed: 1.8; /* ── Spacing — base-8 grid ── */ --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 24px; --s-2xl: 32px; --s-3xl: 48px; --s-4xl: 64px; --s-5xl: 80px; /* ── Radii ── */ --r-sm: 4px; /* buttons, chips */ --r-md: 6px; /* inputs */ --r-lg: 8px; /* cards */ --r-xl: 12px; /* panels */ --r-pill: 100px; --r-circle: 50%; /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(13, 43, 54, 0.05); --shadow-sm: 0 2px 8px rgba(13, 43, 54, 0.06); --shadow-md: 0 8px 24px rgba(13, 43, 54, 0.08); --shadow-lg: 0 12px 40px rgba(13, 43, 54, 0.10); --shadow-glow: 0 0 0 4px rgba(31, 207, 225, 0.18); /* ── Motion ── */ --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); } /* ============================================================ Semantic element styles — use these directly on h1/h2/p/etc ============================================================ */ html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-3); font-size: var(--t-body); line-height: var(--lh-normal); font-weight: var(--w-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .h1 { font-family: var(--font-sans); font-size: var(--t-h1); font-weight: var(--w-bold); line-height: var(--lh-tight); color: var(--fg-1); letter-spacing: -0.01em; } h2, .h2 { font-size: var(--t-h2); font-weight: var(--w-semibold); line-height: var(--lh-snug); color: var(--fg-1); letter-spacing: -0.005em; } h3, .h3 { font-size: var(--t-h3); font-weight: var(--w-semibold); line-height: 1.3; color: var(--fg-1); } h4, .h4 { font-size: var(--t-h4); font-weight: var(--w-semibold); line-height: 1.4; color: var(--fg-1); } p, .body { font-size: var(--t-body); line-height: var(--lh-normal); font-weight: var(--w-regular); color: var(--fg-1); text-wrap: pretty; } .caption, small { font-size: var(--t-caption); line-height: 1.5; color: var(--fg-2); } .label, .eyebrow { font-size: var(--t-label); font-weight: var(--w-semibold); letter-spacing: 2px; text-transform: uppercase; color: var(--syn-teal); } code, .mono { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: var(--w-regular); } code { background: var(--bg-2); padding: 1px 6px; border-radius: var(--r-sm); } a { color: var(--fg-accent); text-decoration: none; transition: color var(--t-fast) var(--ease-standard); } a:hover { color: var(--syn-teal); } hr { border: 0; height: 1px; background: var(--border-1); margin: var(--s-xl) 0; } ::selection { background: var(--syn-teal-pale); color: var(--syn-teal-dark); }