/* ============================================================================
eVamb Cinematic — DESIGN TOKENS (LOCKED palette · the design spec §Palette/§Tokens)
Source of truth for every color, space, radius, breakpoint, motion + the
signature 135° gold gradient. Self-hosts the 7 woff2 in ../fonts.
PRELOAD HINTS (document in each page , two hero weights only):
(Path is /assets/fonts/ because each site copies shared/ into public/assets/.)
========================================================================== */
:root {
/* ---- Palette (LOCKED · guideline §04) -------------------------------- */
--ink: #0A0D14; /* primary dark ground */
--cream: #F0E8D8; /* light ground (warmer) */
--paper: #F8F4EB; /* light ground (brighter editorial) */
--copper: #C9783C; /* the V-node + primary CTAs (brand warm accent) */
--amber: #E8A23C; /* gold-gradient partner */
--gold: #F2C879; /* gold-gradient partner (highlight) */
--azure: #4FA3D9; /* cool co-accent — use sparingly */
--navy: #103A5C; /* depth */
--blue: #1E6FA8; /* depth */
--saffron:#E89A3C; /* RESERVED — flagship-only, do not use in shells */
/* ---- AA-safe text colors --------------------------------------------- */
/* On INK ground (verified AA, see contrast table in base.css comment): */
--text-on-ink: #F0E8D8; /* 15.95:1 */
--text-on-ink-muted: #B9AE99; /* dimmed body on ink, still AA */
--text-on-ink-faint: #6E6657; /* labels/HUD on ink (AA-large) */
/* On CREAM/PAPER ground: */
--text-on-cream: #0A0D14; /* 15.95:1 */
--text-on-cream-muted: #4A4536; /* dimmed body on cream, AA */
/* IMPORTANT: --copper (#C9783C) on cream is only 2.76:1 → FAILS AA text. */
/* Use --copper for the brand node, large display words, CTA fills, and */
/* decorative marks ONLY. For copper-colored TEXT on a light ground use: */
--copper-on-cream: #9E5224; /* 4.68:1 on cream → AA text-safe */
/* ---- Signature gold gradient (135° copper→amber→gold) ----------------- */
/* Signature light: V-node, 1–2 display words/page, the diamond bullet. */
/* NEVER use as a large fill behind text. */
--grad-gold: linear-gradient(135deg, var(--copper) 0%, var(--amber) 52%, var(--gold) 100%);
--grad-gold-soft: linear-gradient(135deg, #C9783C33 0%, #E8A23C26 52%, #F2C87920 100%);
/* Edge-lit ink card left edge (faint azure→copper) */
--grad-edge: linear-gradient(180deg, var(--azure) 0%, var(--copper) 100%);
/* ---- Surface helpers -------------------------------------------------- */
--surface-ink-raise: #11151F; /* slightly raised ink card */
--surface-cream-raise: #F8F4EB; /* raised cream card */
--hairline-on-ink: rgba(240,232,216,0.12);
--hairline-on-cream: rgba(10,13,20,0.12);
/* ---- Spacing — 8pt scale --------------------------------------------- */
--sp-0: 0;
--sp-1: 4px; /* half-step */
--sp-2: 8px;
--sp-3: 16px;
--sp-4: 24px;
--sp-5: 32px;
--sp-6: 48px;
--sp-7: 64px;
--sp-8: 96px;
--sp-9: 128px;
--sp-10: 160px;
--sp-section: clamp(64px, 9vw, 128px); /* vertical rhythm between sections */
/* ---- Radii (LOCKED 12 / 16 / 22) ------------------------------------- */
--r-sm: 12px;
--r-md: 16px;
--r-lg: 22px;
--r-pill: 999px;
/* ---- Layout ----------------------------------------------------------- */
--container-max: 1280px; /* 1200–1280 band */
--container-pad: clamp(20px, 5vw, 48px);
--grid-cols: 12;
--grid-gap: clamp(16px, 2vw, 32px);
/* ---- Breakpoints (documented; media queries use these literal values) - */
/* mobile < 680px · tablet 680–1023px · desktop ≥ 1024px */
--bp-tablet: 680px;
--bp-desktop: 1024px;
/* ---- Typography families --------------------------------------------- */
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
/* Fluid type scale (Fraunces display + Inter body) */
--fs-eyebrow: 0.75rem; /* 12px mono label */
--fs-body-sm: 0.875rem; /* 14px */
--fs-body: 1rem; /* 16px base */
--fs-body-lg: clamp(1.0625rem, 0.5vw + 1rem, 1.1875rem);
--fs-h6: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);
--fs-h5: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
--fs-h4: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
--fs-h3: clamp(1.75rem, 1.6vw + 1.3rem, 2.5rem);
--fs-h2: clamp(2.25rem, 3vw + 1.4rem, 3.75rem);
--fs-h1: clamp(2.75rem, 5vw + 1.5rem, 5.5rem);
--fs-display: clamp(3.25rem, 7vw + 1.5rem, 7rem); /* hero film headline */
--lh-tight: 1.04;
--lh-snug: 1.18;
--lh-body: 1.6;
--tracking-display: -0.02em;
--tracking-label: 0.16em; /* mono uppercase eyebrows */
/* ---- Motion (LOCKED durations + easing) ------------------------------ */
--dur-1: 120ms;
--dur-2: 240ms;
--dur-3: 420ms;
--dur-4: 700ms;
--ease-brand: cubic-bezier(.22,.61,.36,1); /* scroll-scrub eased */
--ease-out: cubic-bezier(.22,.61,.36,1);
--ease-in-out: cubic-bezier(.65,.05,.36,1);
/* ---- Elevation / focus ----------------------------------------------- */
--shadow-card: 0 1px 2px rgba(10,13,20,.06), 0 8px 28px rgba(10,13,20,.08);
--shadow-card-ink: 0 1px 2px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.45);
--shadow-cta: 0 6px 20px rgba(201,120,60,.35);
--focus-ring: 0 0 0 3px rgba(79,163,217,.55);
--z-nav: 100;
--z-overlay: 200;
--z-modal: 300;
}
/* ============================================================================
@font-face — self-hosted woff2 (../fonts), font-display:swap.
7 faces: Fraunces 400 / 600 / 400 italic · Inter 400 / 500 / 600 ·
JetBrains Mono 500. No Google Fonts CDN (the design spec §Typography).
========================================================================== */
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2");
}
@font-face {
font-family: "Fraunces";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/fraunces-latin-400-italic.woff2") format("woff2");
}
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}