/* GENERATED FILE — DO NOT EDIT. Source: shared/design-system/tokens.css Regenerate: node shared/design-system/sync.mjs Edits here are overwritten and will silently desync the other targets. */ /* ============================================================ Focus Media Services — DESIGN TOKENS ------------------------------------------------------------ THE source of truth for every color, font, radius and shadow used by all three deploy targets (site, book-site, cms). Change a value here, run: node shared/design-system/sync.mjs ...and the marketing site, the book site and /thoughts all move together. Never edit the generated copies in each target's ds folder — sync.mjs overwrites them. ============================================================ */ :root { /* ---- Type ---- One family today; swapping it here re-fonts everything. (The Google Fonts in each page still names the family it downloads — see shared/design-system/README.md.) */ --font-sans: 'Poppins', sans-serif; --font-heading: var(--font-sans); /* ---- Brand core ---- */ --primary: #174b73; /* dark navy — hero / offer / CTA bands */ --secondary: #0070a9; /* mid blue — links / accents */ --emphasis: #3fafec; /* light blue — heading accent on dark */ --green: #78c61f; /* brand accent — primary buttons */ /* ---- Accent palette ---- */ --accent-orange: #ff561d; --accent-pink: #ff2f6c; --accent-amber: #f8a000; --accent-gray: #4e4e4e; --accent-teal: #12897c; --accent-violet: #6d4fc4; --accent-red: #b23b34; /* ---- Product colors: change once, updates every layout ---- */ --c-course: var(--secondary); --c-book: var(--accent-orange); --c-library: var(--accent-pink); --c-video: var(--accent-gray); /* gov video production */ --c-virtual: var(--accent-teal); /* live virtual learning */ --c-oncam: var(--primary); /* on-camera training */ --c-speaking: var(--accent-violet); /* speaking engagements */ --c-consult: var(--accent-red); /* real-time crisis consultation */ /* ---- Theme surfaces (dark mode remaps these) ---- */ --surface-page: #fff; /* body */ --surface-card: #fff; /* cards, footer, strips */ --heading: #000; /* base heading ink */ /* ---- Surfaces & text ---- Light surfaces live in the warm cream family (unified 2026-08-12); pure white is reserved for cards floating on them. */ --light: #faf8f3; /* warm cream — content section base */ --cream: #faf8f3; /* hero band (same family) */ --muted: #f2eee3; /* deeper warm band (membership / zoning) */ --ink-on-green: #10314d; /* text on green for contrast */ --body-text: #33424f; /* paragraph slate on light backgrounds */ --text-soft: #97a4b1; /* small labels / captions */ --text-slate: #55636e; /* ticker names, secondary UI text */ --hairline: #e6dfd0; /* rules on warm light backgrounds */ --hairline-warm: #eee7d9;/* rules on the cream hero */ /* ---- Elevation ---- */ --shadow-sm: 0 6px 18px rgba(18, 41, 61, .07); --shadow-md: 0 16px 36px rgba(18, 41, 61, .14); --shadow-lg: 0 30px 60px rgba(18, 41, 61, .2); /* ---- Shape ---- Every corner on the site flows through these tokens. html.mode-sharp zeroes them all — one switch, whole site. */ --radius-lg: 24px; --radius: 16px; --radius-sm: 12px; --pill: 999px; /* ---- icons (Lucide, ISC) ---- Held as data URIs so they can be used as CSS masks and painted with currentColor. A mask keeps one copy of each shape instead of an inline SVG at every use, and inherits colour the way the text glyphs they replaced did. */ --icon-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E"); --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); --radius-round: 50%; /* avatars, check circles, step numbers */ /* ---- Zoning ---- */ --cool-grey: #e9eef4; /* deliberate cool zone (Ways to Learn) */ } /* SHARP MODE: flips every corner on the site (demo Edges toggle / ?edges=sharp) */ html.mode-sharp { --radius-lg: 0px; --radius: 0px; --radius-sm: 0px; --pill: 0px; --radius-round: 0%; } /* DARK MODE (demo Theme toggle / ?theme=dark) — remaps the surface tokens. The context-specific rules that go with it live in each target's own stylesheet; only the token remap is shared. */ html.mode-dark { --surface-page: #0d1a26; --surface-card: #16293a; --heading: #eaf2f9; --light: #10202e; --cream: #10202e; --muted: #142433; --cool-grey: #142433; --body-text: #b9c7d4; --text-soft: #7f92a3; --text-slate: #9fb0be; --hairline: rgba(255, 255, 255, .14); --hairline-warm: rgba(255, 255, 255, .12); --shadow-sm: 0 6px 18px rgba(0, 0, 0, .4); --shadow-md: 0 16px 36px rgba(0, 0, 0, .5); --shadow-lg: 0 30px 60px rgba(0, 0, 0, .6); }