/* ============================================================================ * tokens.css -- Unified UI design tokens (single source of truth) * * Project: EFI / Experiencer Team -- unified UI shell * Owner: /srv/efi-unified-ui/static/css/tokens.css * Served: https://forum.experiencerteam.com/shared/css/tokens.css * (and any other vhost that mounts Alias /shared/ -> this tree) * Loaded: FIRST among shared stylesheets, BEFORE base.css / layout.css / * components.css / utilities.css, BEFORE deployment brand-*.css. * * -------------------------------------------------------------------------- * Data dictionary -- category index for the tokens declared below * -------------------------------------------------------------------------- * 1. Brand colors -- primary navy (4 shades), secondary teal (4), * 4 accents (coral, green, purple, gold) each with -soft companions * 2. Surfaces -- bg, bg-card, bg-strip * 3. Ink -- text, text-soft, text-faint, text-on-navy(-soft) * 4. Lines -- rule, rule-soft * 5. Shadows -- shadow-sm, shadow-md, shadow-lg, shadow-card * 6. Typography -- font-display, font-body, font-chrome, * text-xs..text-4xl (type scale), * line-tight/normal/loose, * weight-light/normal/bold/black, * --fs-scale (A-/A/A+ multiplier) * 7. Spacing -- space-0..space-12 on a 4px grid * 8. Radius -- radius-xs/sm/md/lg/xl/pill/circle * 9. Motion -- motion-fast/base/slow, easing-standard/emphasized/exit * 10. Z-index -- z-base/elevated/sticky/nav/progress/modal/toast * 11. Layout -- max-width, max-width-narrow/wide, nav-height * * -------------------------------------------------------------------------- * Theming algorithm (D-1.10-B: system default) * -------------------------------------------------------------------------- * The element carries data-theme="light" | "dark" | "system", * set server-side from the `theme` cookie on every render to avoid * flash-of-wrong-theme. When data-theme is absent (e.g. on a brand-new * visitor with no cookie yet), system behavior is also the fall-through. * * Layer 1 (light is the unconditional default) * :root { ...light token values... } * * Layer 2 (explicit dark request always wins) * [data-theme="dark"] { ...dark overrides... } * * Layer 3 (auto: OS preference applies when user picked system OR no cookie) * @media (prefers-color-scheme: dark) { * [data-theme="system"], :root:not([data-theme]) { * ...dark overrides... * } * } * * Resulting truth table (light = default, dark = overridden): * data-theme OS pref resolves to * --------------- ------------ ----------- * light (either) LIGHT * dark (either) DARK * system light LIGHT * system dark DARK * (none) light LIGHT * (none) dark DARK (fall-through to system behavior) * * -------------------------------------------------------------------------- * Brand layering (Q8 cross-deployment pattern) * -------------------------------------------------------------------------- * tokens.css declares CANONICAL values shared across every deployment. * Deployment-specific brand files (/srv/forum-experiencerteam/static-forum/ * css/brand-experiencer.css today) load AFTER this file, so any token a * deployment wants to retint can be redeclared in a cascade-winning block. * Adding a new token: declare in :root + every theme override below; never * declare a new token only inside a brand file (it won't exist on other * deployments). * ============================================================================ */ /* ============================================================================ * LIGHT THEME -- the unconditional default * ============================================================================ */ :root { /* ------------------------------------------------------------------ * 1. Brand colors -- primary navy * ------------------------------------------------------------------ */ --navy: #1d2d40; --navy-deep: #14202f; --navy-soft: #d4dae2; --navy-pale: #eef1f5; /* 1. Brand colors -- secondary teal */ --teal: #2a8a8a; --teal-deep: #1f6e6e; --teal-soft: #d8ebec; --teal-pale: #f0f7f7; /* 1. Brand colors -- four accents (Aspen stat-bubble palette) */ --coral: #d96a4a; --coral-soft: #fbe2d8; --green: #6ba068; --green-deep: #4f8a4d; --green-soft: #e0eedd; --purple: #8a7cb6; --purple-soft: #ebe7f3; --gold: #d99838; --gold-soft: #f6e6cd; /* ------------------------------------------------------------------ * 2. Surfaces * ------------------------------------------------------------------ */ --bg: #faf8f3; /* warm off-white body */ --bg-card: #ffffff; --bg-strip: #fdfbf5; /* subtle warm-tinted bands */ /* ------------------------------------------------------------------ * 3. Ink * ------------------------------------------------------------------ */ --text: #1d2b35; --text-soft: #4a5664; --text-faint: #8c97a3; --text-on-navy: #ffffff; --text-on-navy-soft: rgba(255, 255, 255, 0.85); /* ------------------------------------------------------------------ * 4. Lines * ------------------------------------------------------------------ */ --rule: #e6e8ea; --rule-soft: #f1f3f4; /* ------------------------------------------------------------------ * 5. Shadows * ------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(20, 30, 40, 0.04); --shadow-md: 0 2px 10px rgba(20, 30, 40, 0.06); --shadow-lg: 0 12px 32px rgba(20, 30, 40, 0.08); --shadow-card: 0 1px 3px rgba(20, 30, 40, 0.05), 0 4px 12px rgba(20, 30, 40, 0.04); /* ------------------------------------------------------------------ * 6. Typography -- families * ------------------------------------------------------------------ */ --font-display: 'Merriweather', Georgia, 'Times New Roman', serif; --font-body: 'Merriweather', Georgia, 'Times New Roman', serif; --font-chrome: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* 6. Typography -- type scale (pixel-anchored; respects --fs-scale via rem) */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px; --text-4xl: 64px; /* 6. Typography -- line heights */ --line-tight: 1.25; --line-normal: 1.55; --line-loose: 1.75; /* 6. Typography -- weights */ --weight-light: 300; --weight-normal: 400; --weight-bold: 700; --weight-black: 900; /* 6. Typography -- A-/A/A+ user scale (controlled by nav.js, persisted in localStorage) */ --fs-scale: 1; /* ------------------------------------------------------------------ * 7. Spacing -- 4px grid; numbers approximate multiples of 4 * (space-3 = 12px not 3px; the digit is a step, not a pixel count) * ------------------------------------------------------------------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; --space-10: 96px; --space-11: 128px; --space-12: 160px; /* ------------------------------------------------------------------ * 8. Border radius * ------------------------------------------------------------------ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; /* default for cards / inputs / buttons */ --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; --radius-circle: 50%; /* ------------------------------------------------------------------ * 9. Motion -- durations + easings * ------------------------------------------------------------------ */ --motion-instant: 50ms; /* reading-progress bar tick */ --motion-fast: 150ms; /* hover state, focus ring */ --motion-base: 250ms; /* default UI transition */ --motion-slow: 400ms; /* nav scroll-state, theme swap */ --motion-deliberate: 600ms; /* carousel slide */ --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard */ --easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* enter / appear */ --easing-exit: cubic-bezier(0.4, 0, 1, 1); /* leave / collapse */ /* ------------------------------------------------------------------ * 10. Z-index -- discrete steps, no in-between values * ------------------------------------------------------------------ */ --z-base: 1; --z-elevated: 10; --z-sticky: 100; --z-nav: 1000; --z-progress: 1500; --z-modal: 2000; --z-toast: 3000; /* ------------------------------------------------------------------ * 11. Layout -- container widths + fixed-region sizes * ------------------------------------------------------------------ */ --max-width-narrow: 720px; /* prose-width reading column */ --max-width: 1200px; /* default page container */ --max-width-wide: 1400px; /* hero / full-bleed sections */ --nav-height: 64px; /* main-nav fixed height; body padding-top key in forum + apex */ } /* ============================================================================ * DARK THEME -- explicit override (data-theme="dark" always wins) * ============================================================================ */ [data-theme="dark"] { /* 1. Brand colors -- navy lifted off the background for legibility */ --navy: #5a7da0; --navy-deep: #3e5a78; --navy-soft: #2a3a4d; --navy-pale: #1d2a3a; /* 1. Brand colors -- teal */ --teal: #5cb8b8; --teal-deep: #4ba0a0; --teal-soft: #1a3a3a; --teal-pale: #112424; /* 1. Brand colors -- four accents (desaturated for dark) */ --coral: #e89878; --coral-soft: #3a2a22; --green: #8fb98c; --green-deep: #6fa46c; --green-soft: #1f2e1c; --purple: #a899d4; --purple-soft: #2a253a; --gold: #e8b15a; --gold-soft: #2e2418; /* 2. Surfaces */ --bg: #0e1318; --bg-card: #161d24; --bg-strip: #131a20; /* 3. Ink */ --text: #e8edf0; --text-soft: #b8c2cc; --text-faint: #7a8590; --text-on-navy: #ffffff; --text-on-navy-soft: rgba(255, 255, 255, 0.78); /* 4. Lines */ --rule: #232b33; --rule-soft: #1c232b; /* 5. Shadows -- deeper opacity since the bg is dark */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.40); /* No overrides for typography, spacing, radius, motion, z-index, layout: * those are theme-invariant. */ } /* ============================================================================ * SYSTEM / AUTO -- OS preference drives the theme * Applies when the user explicitly chose "system" (data-theme="system") * OR when no cookie has been set yet (root with no data-theme attribute). * Light is the fall-through for OS-prefers-light; we only need to add * the dark branch here because :root above is already light. * ============================================================================ */ @media (prefers-color-scheme: dark) { [data-theme="system"], :root:not([data-theme]) { /* Mirror the [data-theme="dark"] overrides above. */ --navy: #5a7da0; --navy-deep: #3e5a78; --navy-soft: #2a3a4d; --navy-pale: #1d2a3a; --teal: #5cb8b8; --teal-deep: #4ba0a0; --teal-soft: #1a3a3a; --teal-pale: #112424; --coral: #e89878; --coral-soft: #3a2a22; --green: #8fb98c; --green-deep: #6fa46c; --green-soft: #1f2e1c; --purple: #a899d4; --purple-soft: #2a253a; --gold: #e8b15a; --gold-soft: #2e2418; --bg: #0e1318; --bg-card: #161d24; --bg-strip: #131a20; --text: #e8edf0; --text-soft: #b8c2cc; --text-faint: #7a8590; --text-on-navy: #ffffff; --text-on-navy-soft: rgba(255, 255, 255, 0.78); --rule: #232b33; --rule-soft: #1c232b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.40); } } /* ============================================================================ * REDUCED MOTION -- collapse all motion tokens to a single near-zero step * Per Q4 / Q8 cross-cutting respect for prefers-reduced-motion. Components * that read these tokens then auto-degrade without any per-component code. * ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --motion-instant: 1ms; --motion-fast: 1ms; --motion-base: 1ms; --motion-slow: 1ms; --motion-deliberate: 1ms; } } /* End of tokens.css */