/* ============================================================================ Verity Gulf - design tokens Single source of truth. Nothing in this codebase hard-codes a colour, a spacing value, a duration or a breakpoint-derived size: it comes from here. The file is in three layers, and that order matters: 1. PALETTE Literal colours. Fixed in both themes. A "--c-" name is a swatch, not a role - never paint a component with one directly unless the colour genuinely must not change. 2. THEME The light and the dark value of every role, each written once as --lt-* / --dk-*. 3. SEMANTIC The roles themselves - --bg-surface, --fg-body, --brand. These are what components use, and they are the only things that flip between themes. Light is the default. The dark theme applies when the reader's system asks for it, and a data-theme attribute on overrides that in either direction - which is what the header toggle sets and localStorage restores. ========================================================================= */ :root { /* ======================================================= 1. PALETTE */ /* Brand - Gulf teal */ --c-brand-900: #062F35; --c-brand-800: #0A4750; --c-brand-700: #0C5C63; /* brand base: nav, ticker, primary buttons, footer */ --c-brand-600: #0F757E; --c-brand-500: #149AA3; --c-brand-400: #38B0B8; /* the interactive teal on dark surfaces */ --c-brand-300: #7FC5CA; --c-brand-100: #D6EBEC; --c-brand-50: #EEF7F7; /* Accent - desert gold */ --c-gold-700: #8A6116; --c-gold-600: #A8802F; --c-gold-500: #C8A24A; /* accent: active underline, "Breaking" label, rules */ --c-gold-200: #EFDCB2; --c-gold-100: #F8EED6; /* Neutrals - warm sand ramp */ --c-ink-900: #0E1A1C; /* headlines */ --c-ink-800: #16262A; --c-ink-700: #223438; --c-ink-600: #3E5054; /* body */ --c-ink-500: #5A6C70; /* secondary */ /* Meta text. The reference palette put this at #849699, which measures 3.09:1 on white - short of the 4.5:1 that 12.5px meta rows need. Darkened along the same hue until it clears the bar on the canvas too: 5.00:1 on white, 4.62:1 on --c-canvas. */ --c-ink-400: #647274; --c-line-300: #D8DEDD; --c-line-200: #E7EBEA; --c-line-100: #F0F3F2; --c-surface: #FFFFFF; --c-canvas: #F7F6F2; /* warm off-white page background */ --c-canvas-2: #FBFAF7; --c-white: #FFFFFF; /* Dark-theme neutrals. Teal-tinted rather than grey, so the dark theme reads as the same brand with the lights off. */ --c-night-900: #060E10; --c-night-800: #0A1315; /* dark canvas */ --c-night-700: #101C1F; /* dark surface (cards) */ --c-night-600: #16252A; /* dark raised surface */ --c-night-500: #233437; /* dark rule */ --c-night-400: #2E4247; /* dark rule, strong */ --c-mist-100: #F0F4F3; /* headlines on dark */ --c-mist-300: #C8D4D5; /* body on dark */ --c-mist-500: #A3B2B4; /* secondary on dark */ --c-mist-600: #8B9B9D; /* meta on dark */ /* Status */ --c-live: #C0392B; /* live/breaking dot - never a large fill */ --c-live-dark: #E5695A; /* the same role on a dark surface */ --c-success: #1F7A5A; --c-success-dark: #4FBF92; --c-warning: #B47D18; --c-warning-dark: #E0AE4C; /* ======================================================= 2. THEME VALUES */ /* ---- light ---- */ --lt-bg-canvas: var(--c-canvas); --lt-bg-canvas-2: var(--c-canvas-2); --lt-bg-surface: var(--c-surface); --lt-bg-surface-2: var(--c-line-100); --lt-bg-sunken: var(--c-brand-900); --lt-fg-heading: var(--c-ink-900); --lt-fg-body: var(--c-ink-600); --lt-fg-muted: var(--c-ink-500); --lt-fg-meta: var(--c-ink-400); --lt-fg-inverse: var(--c-white); --lt-line-soft: var(--c-line-100); --lt-line: var(--c-line-200); --lt-line-strong: var(--c-line-300); --lt-brand: var(--c-brand-700); --lt-brand-hover: var(--c-brand-800); --lt-brand-soft: var(--c-brand-50); --lt-brand-soft-2: var(--c-brand-100); --lt-on-brand: var(--c-white); --lt-accent: var(--c-gold-500); --lt-accent-soft: var(--c-gold-100); --lt-on-accent: var(--c-ink-900); --lt-live: var(--c-live); --lt-success: var(--c-success); --lt-warning: var(--c-warning); --lt-sh-xs: 0 1px 2px rgba(14, 26, 28, .05); --lt-sh-sm: 0 2px 8px rgba(14, 26, 28, .06); --lt-sh-md: 0 8px 24px rgba(14, 26, 28, .08); --lt-sh-lg: 0 18px 48px rgba(14, 26, 28, .12); --lt-sh-modal: 0 32px 80px rgba(6, 47, 53, .28); --lt-sh-brand: 0 8px 24px rgba(12, 92, 99, .22); --lt-brand-glow: rgba(12, 92, 99, .22); /* How a section's stored tint/ink pair is turned into card colours. Light: the tint is already a card fill, and the ink is already legible. */ --lt-cat-plinth: var(--cat-tint, var(--c-brand-100)); --lt-cat-label: var(--cat-ink, var(--c-brand-700)); /* ---- dark ---- */ --dk-bg-canvas: var(--c-night-800); --dk-bg-canvas-2: var(--c-night-700); --dk-bg-surface: var(--c-night-700); --dk-bg-surface-2: var(--c-night-600); --dk-bg-sunken: var(--c-night-900); --dk-fg-heading: var(--c-mist-100); --dk-fg-body: var(--c-mist-300); --dk-fg-muted: var(--c-mist-500); --dk-fg-meta: var(--c-mist-600); --dk-fg-inverse: var(--c-ink-900); --dk-line-soft: var(--c-night-600); --dk-line: var(--c-night-500); --dk-line-strong: var(--c-night-400); /* The 700 teal is too dark to read on a dark canvas, so the interactive brand colour steps up the ramp. Buttons keep a dark label on it. */ --dk-brand: var(--c-brand-400); --dk-brand-hover: var(--c-brand-300); --dk-brand-soft: rgba(20, 154, 163, .14); --dk-brand-soft-2: rgba(20, 154, 163, .24); --dk-on-brand: var(--c-brand-900); --dk-accent: var(--c-gold-500); --dk-accent-soft: rgba(200, 162, 74, .16); --dk-on-accent: var(--c-ink-900); --dk-live: var(--c-live-dark); --dk-success: var(--c-success-dark); --dk-warning: var(--c-warning-dark); /* Shadows do little work on a dark ground; they deepen instead of soften. */ --dk-sh-xs: 0 1px 2px rgba(0, 0, 0, .40); --dk-sh-sm: 0 2px 8px rgba(0, 0, 0, .45); --dk-sh-md: 0 8px 24px rgba(0, 0, 0, .55); --dk-sh-lg: 0 18px 48px rgba(0, 0, 0, .62); --dk-sh-modal: 0 32px 80px rgba(0, 0, 0, .72); --dk-sh-brand: 0 8px 24px rgba(20, 154, 163, .30); --dk-brand-glow: rgba(20, 154, 163, .32); /* Dark: the stored pastel tint would glare, so the plinth is mixed down into the surface and the label is lifted towards white. One tint/ink pair in the database still drives both themes. */ --dk-cat-plinth: color-mix(in srgb, var(--cat-ink, var(--c-brand-700)) 20%, var(--c-night-700)); --dk-cat-label: color-mix(in srgb, var(--cat-ink, var(--c-brand-700)) 45%, #FFFFFF); /* ======================================================= 3. SEMANTIC (light) */ --bg-canvas: var(--lt-bg-canvas); --bg-canvas-2: var(--lt-bg-canvas-2); --bg-surface: var(--lt-bg-surface); --bg-surface-2: var(--lt-bg-surface-2); --bg-sunken: var(--lt-bg-sunken); --fg-heading: var(--lt-fg-heading); --fg-body: var(--lt-fg-body); --fg-muted: var(--lt-fg-muted); --fg-meta: var(--lt-fg-meta); --fg-inverse: var(--lt-fg-inverse); --line-soft: var(--lt-line-soft); --line: var(--lt-line); --line-strong: var(--lt-line-strong); --brand: var(--lt-brand); --brand-hover: var(--lt-brand-hover); --brand-soft: var(--lt-brand-soft); --brand-soft-2: var(--lt-brand-soft-2); --on-brand: var(--lt-on-brand); --brand-glow: var(--lt-brand-glow); --accent: var(--lt-accent); --accent-soft: var(--lt-accent-soft); --on-accent: var(--lt-on-accent); --live: var(--lt-live); --success: var(--lt-success); --warning: var(--lt-warning); --sh-xs: var(--lt-sh-xs); --sh-sm: var(--lt-sh-sm); --sh-md: var(--lt-sh-md); --sh-lg: var(--lt-sh-lg); --sh-modal: var(--lt-sh-modal); --sh-brand: var(--lt-sh-brand); --cat-plinth: var(--lt-cat-plinth); --cat-label: var(--lt-cat-label); /* ---------------------------------------------------------------- radii */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 999px; --r-circle: 50%; /* ---------------------------------------------------------------- motion */ --ease: cubic-bezier(.22, .61, .36, 1); --e-out: var(--ease); --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --t-fast: 150ms; --t-base: 220ms; --t-slow: 380ms; --t-media: 500ms; --t-reveal: 900ms; /* ---------------------------------------------------------------- layout */ --container: 1280px; --container-wide: 1440px; --container-narrow: 960px; --container-reading: 740px; --gutter: 24px; --header-h: 60px; /* * A scrim dims what is behind the thing it belongs to, so it sits below that * thing - which is why the overlay is now under the drawer rather than over * it. Read as a ladder these numbers looked right ascending, and were wrong: * the drawer's own scrim was painted on top of the drawer, which greyed the * panel over and, far worse, put a click-to-close layer over every link in * it. The mobile menu opened and could not be navigated. */ --z-base: 0; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-overlay: 390; --z-drawer: 400; --z-modal: 600; --z-toast: 700; /* ---------------------------------------------------------------- fonts Google Sans throughout, front end and admin. Declared in fonts.css; the system stack after it is a first-paint fallback, not a design choice. The two tokens are kept even though they now resolve to the same family: every rule in the CSS says which role it is setting, so putting a second face back for headings later is one line here rather than a search across the whole sheet. */ --font-display: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---------------------------------------------------------------- type scale Fluid endpoints per the design spec: the max is the >=1440px rendering, the min is the <=480px one. */ --fs-display: clamp(28px, 1.75rem + 1.25vw, 44px); --fs-h1: clamp(24px, 1.5rem + 0.78vw, 34px); --fs-h2: clamp(20px, 1.25rem + 0.47vw, 26px); --fs-h3: clamp(18px, 1.125rem + 0.23vw, 21px); --fs-h4: clamp(16px, 1rem + 0.16vw, 18px); --fs-h5: 16px; --fs-rail: 17px; --fs-lead: 17px; --fs-body: 15px; --fs-sm: 14px; --fs-xs: 12.5px; --fs-2xs: 11px; --fs-article: clamp(16px, 0.98rem + 0.08vw, 17px); /* tracking */ --tr-display: -0.02em; --tr-h1: -0.02em; --tr-h2: -0.015em; --tr-h3: -0.01em; --tr-2xs: 0.07em; --tr-label: 0.14em; /* leading */ --lh-display: 1.1; --lh-h1: 1.18; --lh-h2: 1.24; --lh-h3: 1.3; --lh-h4: 1.35; --lh-h5: 1.4; --lh-lead: 1.7; --lh-body: 1.75; --lh-sm: 1.6; --lh-article: 1.9; /* ---------------------------------------------------------------- spacing 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 80, 96 */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-9: 40px; --s-10: 48px; --s-11: 56px; --s-12: 64px; --s-13: 80px; --s-14: 96px; /* section vertical rhythm - this portal is denser than a magazine */ --sec-y: var(--s-11); --grid-gap: var(--s-6); /* component sizing */ --btn-h: 44px; --btn-h-sm: 36px; --btn-h-lg: 52px; --field-h: 46px; --tap: 44px; } /* ============================================================ DARK THEME Written once, applied from two places: the reader's system preference, and an explicit choice stamped on . The explicit choice wins in both directions - :root[data-theme="light"] opts out of a dark system setting, and :root[data-theme="dark"] opts in regardless of it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-canvas: var(--dk-bg-canvas); --bg-canvas-2: var(--dk-bg-canvas-2); --bg-surface: var(--dk-bg-surface); --bg-surface-2: var(--dk-bg-surface-2); --bg-sunken: var(--dk-bg-sunken); --fg-heading: var(--dk-fg-heading); --fg-body: var(--dk-fg-body); --fg-muted: var(--dk-fg-muted); --fg-meta: var(--dk-fg-meta); --fg-inverse: var(--dk-fg-inverse); --line-soft: var(--dk-line-soft); --line: var(--dk-line); --line-strong: var(--dk-line-strong); --brand: var(--dk-brand); --brand-hover: var(--dk-brand-hover); --brand-soft: var(--dk-brand-soft); --brand-soft-2: var(--dk-brand-soft-2); --on-brand: var(--dk-on-brand); --brand-glow: var(--dk-brand-glow); --accent: var(--dk-accent); --accent-soft: var(--dk-accent-soft); --on-accent: var(--dk-on-accent); --live: var(--dk-live); --success: var(--dk-success); --warning: var(--dk-warning); --sh-xs: var(--dk-sh-xs); --sh-sm: var(--dk-sh-sm); --sh-md: var(--dk-sh-md); --sh-lg: var(--dk-sh-lg); --sh-modal: var(--dk-sh-modal); --sh-brand: var(--dk-sh-brand); --cat-plinth: var(--dk-cat-plinth); --cat-label: var(--dk-cat-label); color-scheme: dark; } } :root[data-theme="dark"] { --bg-canvas: var(--dk-bg-canvas); --bg-canvas-2: var(--dk-bg-canvas-2); --bg-surface: var(--dk-bg-surface); --bg-surface-2: var(--dk-bg-surface-2); --bg-sunken: var(--dk-bg-sunken); --fg-heading: var(--dk-fg-heading); --fg-body: var(--dk-fg-body); --fg-muted: var(--dk-fg-muted); --fg-meta: var(--dk-fg-meta); --fg-inverse: var(--dk-fg-inverse); --line-soft: var(--dk-line-soft); --line: var(--dk-line); --line-strong: var(--dk-line-strong); --brand: var(--dk-brand); --brand-hover: var(--dk-brand-hover); --brand-soft: var(--dk-brand-soft); --brand-soft-2: var(--dk-brand-soft-2); --on-brand: var(--dk-on-brand); --brand-glow: var(--dk-brand-glow); --accent: var(--dk-accent); --accent-soft: var(--dk-accent-soft); --on-accent: var(--dk-on-accent); --live: var(--dk-live); --success: var(--dk-success); --warning: var(--dk-warning); --sh-xs: var(--dk-sh-xs); --sh-sm: var(--dk-sh-sm); --sh-md: var(--dk-sh-md); --sh-lg: var(--dk-sh-lg); --sh-modal: var(--dk-sh-modal); --sh-brand: var(--dk-sh-brand); --cat-plinth: var(--dk-cat-plinth); --cat-label: var(--dk-cat-label); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* Readers who ask for more contrast get thicker rules and darker body copy, per the design spec. */ @media (prefers-contrast: more) { :root { --fg-body: var(--c-ink-800); --line: var(--c-line-300); --line-soft: var(--c-line-200); --hairline: 1.5px; } :root[data-theme="dark"], :root:not([data-theme="light"]) { --hairline: 1.5px; } } :root { --hairline: 1px; } /* ============================================================ BREAKPOINTS Section rhythm and gutters only. Type is fluid via clamp() and needs no breakpoint of its own. */ @media (max-width: 1199.98px) { :root { --container: 1120px; --sec-y: 52px; --grid-gap: var(--s-5); } } @media (max-width: 991.98px) { :root { --container: 940px; --sec-y: var(--s-10); } } @media (max-width: 767.98px) { :root { --container: 720px; --gutter: 20px; --sec-y: var(--s-9); --grid-gap: var(--s-4); } } @media (max-width: 575.98px) { :root { --gutter: 16px; --sec-y: var(--s-8); --grid-gap: 14px; } } @media (min-width: 1600px) { :root { --container: 1280px; } }