/* ===================================================================== FINN-CLASSIC · LUMINOUS MIDGARD · DESIGN TOKENS --------------------------------------------------------------------- TWO LAWS. Breaking either one is a build failure. LAW 1 — THE GOLD SPLIT --color-gold (#E8B54B) may ONLY sit on a DARK surface, or be used as a button FILL. On cream it measures 1.75:1 — invisible. It is never text, never a rule, never an icon on a light surface. On light surfaces gold is ALWAYS --color-gold-ink (#8A5A12) = 5.49:1. LAW 2 — THE ICE-BLUE LOGO ONLY EVER TOUCHES NAVY images/logo.png is ice-blue crystal + white wings. It disappears on cream and it disappears against the sun in the hero art. It appears exactly twice — hero crest and footer crest — both on navy. This is WHY the navy zones exist. Contrast ratios in the comments are load-bearing: they were computed with the WCAG 2.x relative-luminance formula. Do not change a hex without recomputing the pairs it participates in. ===================================================================== */ :root{ /* ---- LIGHT SURFACES --------------------------------------------- */ --color-bg-primary: #FAF6EE; /* warm cream — News band ground */ --color-bg-secondary: #F2EADB; /* parchment — Highlights band ground */ --color-surface: #FFFDF7; /* tiles, panels, featured card */ --color-surface-hover: #F7F0E2; /* row + tile hover */ /* ---- DARK SURFACES ---------------------------------------------- */ --color-navy-900: #0B1B38; /* nav, hero banner, quick access, status, footer */ --color-navy-800: #12244A; /* inverted tile, footer base, image fallback */ --color-navy-ink: #14213D; /* text ON the gold button ONLY */ /* ---- TEXT ON LIGHT ---------------------------------------------- */ --color-text-primary: #0E1B33; /* 15.93:1 on cream · 16.88:1 on surface AAA */ --color-text-secondary: #4A5875; /* 6.62:1 on cream · 7.01:1 on surface AA */ /* ---- TEXT ON DARK ----------------------------------------------- */ --color-text-on-dark: #F2EADB; /* 14.30:1 on navy-900 · 12.76:1 on navy-800 AAA */ --color-text-on-dark-dim: #A9B8D6; /* 8.56:1 on navy-900 · 7.64:1 on navy-800 AAA */ --color-text-on-dark-max: #FFFFFF; /* 17.10:1 on navy-900 AAA */ /* ---- GOLD (SEE LAW 1) ------------------------------------------- */ --color-gold: #E8B54B; /* DARK ONLY. 9.07:1 on navy-900 · 8.09:1 on navy-800 */ /* ON CREAM THIS IS 1.75:1 — BANNED as text/rule/icon. */ --color-gold-ink: #8A5A12; /* LIGHT ONLY. 5.49:1 on cream · 4.95:1 on parchment AA */ --color-gold-deep: #A8781F; /* letterpress edge under the gold button (non-text) */ /* ---- BLUE -------------------------------------------------------- */ --color-blue: #1B4FBF; /* links, secondary CTA fill, focus ring on light. 6.68:1 on cream · white on this fill = 7.20:1 AAA */ --color-blue-deep: #12388C; /* letterpress edge + border under the blue button */ /* ---- STATE (dual-valued — one per surface class) ------------------ */ --color-success: #1E7A48; /* on LIGHT. 4.95:1 on cream */ --color-success-on-dark: #6EE7A8; /* on DARK. 11.12:1 on navy → server ONLINE */ --color-alert-on-dark: #FF8A73; /* on DARK. 7.44:1 on navy → server OFFLINE */ --color-muted-on-dark: var(--color-text-on-dark-dim); /* 8.56:1 → UNKNOWN */ --color-ember: #C4341F; /* on LIGHT. 5.05:1 on cream. THE ENTIRE RED BUDGET OF THE PAGE. */ /* ---- BORDERS ----------------------------------------------------- */ --color-border: #8F7534; /* PERCEIVABLE structural rule. 4.34:1 on surface · 4.09:1 on cream */ --color-hairline: rgba(232,181,75,.22); /* DECORATIVE, DARK SURFACES ONLY. Never a required boundary. */ --color-divider-on-navy: #2C3C60; /* Opaque divider shown through 1px grid gaps on navy. Decorative, not a required boundary. */ --color-focus-light: var(--color-blue); --color-focus-dark: var(--color-text-on-dark-max); /* ---- SHADOWS (one tier + one hover tier — no others) --------------- */ --shadow-soft: 0 1px 2px rgba(14,27,51,.06), 0 2px 6px -2px rgba(14,27,51,.10); --shadow-card: 0 1px 2px rgba(14,27,51,.06), 0 14px 30px -16px rgba(14,27,51,.28); --shadow-lift: 0 2px 4px rgba(14,27,51,.08), 0 22px 42px -18px rgba(14,27,51,.34); --shadow-press-gold: 0 3px 0 var(--color-gold-deep); --shadow-press-blue: 0 3px 0 var(--color-blue-deep); /* ---- RADII -------------------------------------------------------- */ --radius-small: 6px; --radius-medium: 10px; /* buttons. Deliberately not a pill — pills read as SaaS. */ --radius-large: 16px; /* tiles, panels, featured card */ /* ---- LAYOUT ------------------------------------------------------- */ --container-width: 1320px; --gutter: clamp(20px, 4vw, 48px); --nav-h: 72px; --nav-h-mobile: 60px; /* ---- SPACING (4px base) -------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 56px; --space-9: 72px; --space-10: 96px; --space-section: clamp(64px, 5vw + 32px, 112px); /* ---- TYPE ---------------------------------------------------------- */ /* Cinzel carries no Thai glyphs, so IBM Plex Sans Thai is listed second: any Thai character in a display heading falls through to it per-glyph. */ --font-display: 'Cinzel','IBM Plex Sans Thai',Georgia,serif; --font-body: 'IBM Plex Sans Thai','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif; --t-hero: clamp(2.125rem, 1.25rem + 2.90vw, 3.75rem); /* 34 → 60px */ --t-section: clamp(1.625rem, 1.10rem + 1.60vw, 2.50rem); /* 26 → 40px */ --t-tile: clamp(1.25rem, 1.05rem + 0.60vw, 1.75rem); /* 20 → 28px */ --t-stat: clamp(1.5rem, 1.15rem + 1.10vw, 2.125rem); /* 24 → 34px */ --t-lead: clamp(1.0625rem,1.00rem + 0.35vw, 1.25rem); /* 17 → 20px */ --t-body: clamp(1.0625rem,1.02rem + 0.20vw, 1.125rem); /* 17 → 18px */ --t-small: 0.9375rem; /* 15px — ABSOLUTE FLOOR. Nothing is smaller. */ --t-label: 0.875rem; /* 14px — UPPERCASE LATIN ONLY. Never Thai. */ --lh-display: 1.14; /* never lower — Thai tone marks stack above the baseline */ --lh-body: 1.75; --lh-thai: 1.80; --lh-button: 1.35; /* never 1 — that is the #1 Thai tone-mark clipping bug */ /* ---- MOTION --------------------------------------------------------- */ --dur-fast: 160ms; --dur-mid: 240ms; --dur-slow: 700ms; --dur-settle: 1200ms; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-press: cubic-bezier(.2, 0, 0, 1); /* ---- HERO GEOMETRY (single source of truth) --------------------------- */ --hero-banner-w: min(880px, 66vw); --hero-crown-min: 200px; /* THE INVARIANT — must equal --hero-fade-3. See fc-landing.css */ --hero-fade-1: 44px; --hero-fade-2: 120px; --hero-fade-3: 200px; /* Horizontal geometry of the gate banner. Both in px on purpose — see the note on .hero__banner. The invariant is: --hero-pad > --hero-feather. */ --hero-feather: 72px; --hero-pad: 100px; }