/* ============================================================= APOLLO Q&A — DESIGN TOKENS (drop-in for static/tokens.css) ------------------------------------------------------------- 1. Copy this file to src/static/tokens.css 2. Copy the 5 Greycliff OTFs to src/static/fonts/ (regular 400, medium 500, demibold 600, bold 700, heavy 900) 3. In every template , BEFORE style.css: 4. Delete the old per-page :root blocks and the #427929/#84A845 literals; use the var(--*) tokens below instead. This is the single source of truth for color, type, spacing, radii and shadows. All component specs in HANDOFF.md reference these names. Never reintroduce raw hex in templates. ============================================================= */ /* ---------- Fonts (Greycliff CF) ---------- */ @font-face{font-family:"Greycliff CF";src:url("fonts/greycliffcf-regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Greycliff CF";src:url("fonts/greycliffcf-medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Greycliff CF";src:url("fonts/greycliffcf-demibold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:"Greycliff CF";src:url("fonts/greycliffcf-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:"Greycliff CF";src:url("fonts/greycliffcf-heavy.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap;} :root{ /* ---------- Raw palette ---------- */ --apollo-purple:#9E1A76; /* Passionfruit — eyebrows, accents */ --apollo-purple-deep:#661148; /* Plum */ --apollo-purple-bright:#DB37B1; /* Dragonfruit — danger */ --apollo-green-dark:#134D4D; /* primary text / ink — use where you'd use black */ --apollo-green-deep:#1B3838; /* deepest — shadows, modal scrim */ --apollo-green-fresh:#84A845; /* Avocado — success */ --apollo-green-lime:#B6CD01; /* Lime — THE accent: CTA, upvote-active, highlights */ --apollo-green-deep-leaf:#427929;/* deep leaf — CTA press-shadow */ --apollo-yellow-soft:#FAD264; /* Banana — warm CTA */ --apollo-yellow-bright:#FAB700; /* Mango — warning */ --apollo-cream-light:#F9F4EF; /* DEFAULT page background — never white */ --apollo-cream-mid:#F3EADF; /* section banding / inset rows */ --apollo-cream-warm:#DCD2BF; --apollo-white:#FFFFFF; /* cards & inputs ON cream only */ --apollo-black:#0E1F1F; /* ---------- Semantic roles ---------- */ --bg:var(--apollo-cream-light); /* page */ --bg-alt:var(--apollo-cream-mid); /* inset / banded rows */ --bg-dark:var(--apollo-green-dark); /* projector stage */ --bg-deep:var(--apollo-green-deep); --surface:var(--apollo-white); /* card on cream */ --surface-dark:var(--apollo-green-deep); --fg:var(--apollo-green-dark); /* body + titles */ --fg-muted:color-mix(in oklab, var(--apollo-green-dark) 72%, transparent); /* meta */ --fg-subtle:color-mix(in oklab, var(--apollo-green-dark) 52%, transparent);/* placeholder, hint */ --fg-on-dark:var(--apollo-cream-light); --fg-on-dark-muted:color-mix(in oklab, var(--apollo-cream-light) 70%, transparent); --fg-link:var(--apollo-green-deep-leaf); --accent:var(--apollo-green-lime); --accent-ink:var(--apollo-green-dark); --accent-warm:var(--apollo-yellow-soft);--accent-warm-ink:var(--apollo-green-dark); --accent-purple:var(--apollo-purple); --border:color-mix(in oklab, var(--apollo-green-dark) 14%, transparent); --border-strong:color-mix(in oklab, var(--apollo-green-dark) 28%, transparent); --border-on-dark:color-mix(in oklab, var(--apollo-cream-light) 18%, transparent); --success:var(--apollo-green-fresh); /* approved / answered */ --warning:var(--apollo-yellow-bright); --danger:var(--apollo-purple-bright);/* reject (used sparingly, outline-first) */ --info:var(--apollo-green-dark); /* ---------- Type ---------- */ --font-sans:"Greycliff CF","Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --w-regular:400; --w-medium:500; --w-demi:600; --w-bold:700; --w-heavy:900; /* CALM SCALE — deliberately modest. No hero/oversized type anywhere. */ --fs-display:clamp(1.75rem,1.6vw + 1.1rem,2.25rem); /* 28→36 — live "now answering" only */ --fs-h1:clamp(1.25rem,.5vw + 1.05rem,1.375rem); /* 20→22 — page / event titles */ --fs-h2:1.0625rem; /* 17 — section titles */ --fs-h3:1rem; /* 16 */ --fs-body:1rem; /* 16 — body, question text, inputs */ --fs-small:0.875rem;/* 14 — labels, meta */ --fs-micro:0.75rem; /* 12 — eyebrow, badges */ --lh-display:1.15; --lh-tight:1.18; --lh-heading:1.25; --lh-body:1.5; --tr-display:-0.015em; --tr-heading:-0.01em; --tr-eyebrow:0.12em; /* ---------- Spacing (4-based) ---------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; /* ---------- Radii ---------- CALM BUILD: cards use --r-md (14px). --r-lg / --r-xl / --r-2xl stay defined but are NOT used here — no big rounded cards. Pills only on small controls (buttons, chips, the upvote count). */ --r-xs:4px; --r-sm:8px; --r-md:14px; /* inputs AND cards */ --r-lg:20px; --r-xl:28px; --r-2xl:40px; /* defined; unused in calm build */ --r-pill:999px; /* small buttons, badges, chips */ /* ---------- Shadows (warm, never pure black) ---------- CALM BUILD: lean on borders + --sh-sm for cards. --sh-card/-md/-lg stay defined but heavy elevation is avoided; --sh-lg is used only on the audience Ask modal. */ --sh-sm:0 1px 2px color-mix(in oklab, var(--apollo-green-deep) 10%, transparent); --sh-md:0 6px 18px -6px color-mix(in oklab, var(--apollo-green-deep) 22%, transparent); --sh-lg:0 20px 50px -16px color-mix(in oklab, var(--apollo-green-deep) 30%, transparent); --sh-card:0 2px 0 color-mix(in oklab, var(--apollo-green-dark) 8%, transparent), 0 8px 24px -10px color-mix(in oklab, var(--apollo-green-deep) 22%, transparent); --sh-cta:0 6px 0 var(--apollo-green-deep-leaf); /* lime CTA press-down */ --sh-cta-warm:0 6px 0 color-mix(in oklab, var(--apollo-yellow-bright) 75%, black 12%); } /* ---------- Base ---------- */ html,body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-sans); font-size:var(--fs-body); font-weight:var(--w-regular); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{font-family:var(--font-sans);color:var(--fg);margin:0;text-wrap:balance;} /* CALM BUILD: titles use Bold (700), not Heavy — quieter on the page. Heavy (900) is reserved for the single live "now answering" question. */ h1{font-size:var(--fs-h1);font-weight:var(--w-bold);letter-spacing:var(--tr-heading);line-height:var(--lh-tight);} h2{font-size:var(--fs-h2);font-weight:var(--w-bold);letter-spacing:var(--tr-heading);line-height:var(--lh-heading);} h3{font-size:var(--fs-h3);font-weight:var(--w-demi);line-height:var(--lh-heading);} a{color:var(--fg-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;} a:hover{color:var(--apollo-green-dark);} /* Brand focus ring — apply to every interactive element */ :focus-visible{outline:3px solid var(--apollo-green-lime);outline-offset:2px;} /* CALM BUILD: eyebrows are quiet muted-green spaced caps, NOT purple. Purple is reserved out of the UI entirely to keep the palette calm. */ .eyebrow{font-size:var(--fs-micro);font-weight:var(--w-bold);letter-spacing:var(--tr-eyebrow); text-transform:uppercase;color:var(--fg-subtle);}