/* ============================================================ TAIC — The AI Companion · Design tokens Direction A: "Royal & Gold" (locked 2026-07-08). Serif-on-serif, single gold accent, low-poly navy elephant. Everything here is a variable — change once, cascades everywhere. Fonts (Fraunces / Spectral / JetBrains Mono) are self-hosted — see css/fonts.css, loaded before this file in every page's . ============================================================ */ :root { /* ── Base palette ─────────────────────────────────────── */ --cream: #F2EDE5; /* warm page background (light surface) */ --surface: #FDFAF6; /* cards & raised surfaces */ --white: #FFFFFF; --ink: #1C1917; /* primary text */ --ink-deep: #111009; /* deepest ink — dark sections & footer */ --gray-700: #44403C; /* secondary text */ --gray-500: #78716C; /* muted / captions */ --gray-400: #A8A29E; /* placeholder / disabled */ --gray-300: #C9C4BB; /* stronger borders */ --gray-200: #E5E0D8; /* borders & hairlines */ --gray-100: #EDE9E2; /* subtle fills */ /* Gold accent — the single brand accent. To restyle the whole site's gold, edit --gold and the three derived tints below (they used to be computed in theme.js). */ --gold: #C6A44F; /* primary accent */ --gold-mid: #CFB36B; /* hover / secondary (= lighten(--gold, .16)) */ --gold-soft: rgba(198,164,79,.16); /* tinted fills (= --gold @ 16%) */ --gold-line: rgba(198,164,79,.42); /* gold hairlines (= --gold @ 42%) */ --gold-light: #F4EFE2; /* tinted surfaces */ --gold-pale: #FDF8EC; /* palest wash */ --blue: #1E3A66; /* royal blue — fills & banners only, never text */ --blue-mid: #6E85C4; /* lighter / hover blue background */ --focus-ring: rgba(144,120,64,.14); --danger: #C0392B; /* ── Semantic aliases ─────────────────────────────────── */ --surface-page: var(--cream); --surface-card: var(--surface); --surface-raised: var(--white); --surface-deep: var(--ink-deep); --surface-royal: var(--blue); --surface-tint: var(--gold-light); --surface-wash: var(--gold-pale); --text-primary: var(--ink); --text-secondary: var(--gray-700); --text-muted: var(--gray-500); --text-disabled: var(--gray-400); --text-accent: var(--gold); --text-on-dark: #FFFFFF; --text-on-dark-soft: rgba(255,255,255,.62); --accent: var(--gold); --accent-hover: var(--gold-mid); --accent-contrast: var(--white); --border: var(--gray-200); --border-strong: var(--gray-300); --border-on-dark: rgba(255,255,255,.12); /* ── Typography ───────────────────────────────────────── */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* headlines */ --font-text: 'Spectral', Georgia, 'Times New Roman', serif; /* body + UI */ --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* labels */ /* Heading weights — "classic" pairing (display 400 / heading 500). These used to be injected by theme.js as --hd-w / --hd-w2. */ --hd-w: 400; --hd-w2: 500; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --text-display: 52px; --text-display-fluid: clamp(40px, 5.8vw, 78px); --text-h1: 52px; --text-h2: 38px; --text-h2-fluid: clamp(33px, 4.7vw, 54px); --text-h3: 26px; --text-h4: 20px; --text-lead: 20px; --text-body: 17px; --text-ui: 15px; --text-small: 14px; --text-label: 12px; --text-mono: 12px; --lh-display: 1.05; --lh-heading: 1.1; --lh-snug: 1.25; --lh-body: 1.72; --lh-relaxed: 1.65; --ls-display: -1.5px; --ls-h2: -1px; --ls-h3: -0.5px; --ls-label: 3px; --ls-mono: 0.5px; /* ── Spacing & layout ─────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 26px; --space-7: 32px; --space-8: 40px; --space-10: 60px; --space-12: 80px; --space-16: 100px; --space-20: 132px; --space-24: 164px; --wrap-max: 1120px; --wrap-narrow: 680px; --gutter: 40px; --gutter-sm: 24px; --grid-gap: 28px; --stack-gap: 22px; /* ── Effects: radii, borders, shadows, motion ─────────── */ --radius-sm: 9px; --radius-md: 11px; --radius-lg: 13px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 100px; --border-hairline: 1px solid var(--gray-200); --border-medium: 1px solid var(--gray-300); --border-accent: 1px solid var(--gold); --shadow-xs: 0 1px 2px rgba(28,25,23,.02); --shadow-sm: 0 2px 6px rgba(28,25,23,.05); --shadow-md: 0 16px 30px rgba(28,25,23,.10); --shadow-lg: 0 24px 50px rgba(28,25,23,.08); --shadow-focus:0 0 0 3px var(--focus-ring); --blur-nav: blur(14px); --ease-out: cubic-bezier(.2,.65,.2,1); --ease-std: cubic-bezier(.4,0,.2,1); --dur-fast: .15s; --dur-med: .18s; --dur-slow: .25s; --dur-reveal: .75s; }