/* ============================================================================
   theme-tokens.css — CrossAIHub design tokens (the single source of color/type)
   Mechanical translation of DESIGN.md front-matter into CSS custom properties.

   Two layers live here:
     1. CANONICAL — the DESIGN.md JOY palette + type + spacing + radius.
     2. LEGACY BRIDGE — every token name the existing 72 page templates already
        reference (--jp-*, --s-*, --ff-*, --gold, --navy→ink, etc.) aliased onto
        the canonical layer, so old markup renders in the new brand colors with
        no template surgery.

   Brand law: pull every shade from these tokens. Never hand-pick a hex in a
   page or component. Never introduce navy / black / deep purple as a fill.
   ========================================================================== */

:root {
  /* ── Cream / Ivory family — warm neutrals, the canvas under everything ── */
  --cream-100: #FFFEFB;
  --cream-200: #FDFBF5;
  --cream-300: #FBF6E9;
  --cream-400: #F7EFD6;

  /* ── Gold family — brand identity, cross, accents
        2026-06-18 saturation bump per Yousef ── */
  --gold-100: #FFF1B8;
  --gold-200: #FFD24A;
  --gold-300: #F4B528;
  --gold-400: #D89412;

  /* ── Peach / Sunrise family — joy + warmth
        2026-06-18 saturation bump per Yousef ── */
  --peach-100: #FFE0C7;
  --peach-200: #FFB689;
  --peach-300: #FF8E54;
  --coral:     #FF6A3D;

  /* ── Rose / Love family — 2026-06-18 vivid ── */
  --rose-100: #FFD7DC;
  --rose-200: #FF9BA6;
  --rose-300: #F26773;
  --rose-400: #E63D52;

  /* ── Sky / Hope family — 2026-06-18 vivid ── */
  --sky-100: #DDEEFB;
  --sky-200: #B5D9F4;
  --sky-300: #6FB5E8;
  --sky-400: #2E94D9;

  /* ── Sage / Life family — 2026-06-18 vivid ── */
  --sage-100: #DFEEC2;
  --sage-200: #B5D984;
  --sage-300: #82BC4D;
  --sage-400: #58961F;

  /* ── Lavender / Grace family — 2026-06-18 vivid ── */
  --lav-100: #E5DCF6;
  --lav-200: #B69BE3;
  --lav-300: #8E63D1;

  /* ── Butter / Mint accents — 2026-06-18 vivid ── */
  --butter:   #FFE45C;
  --mint-100: #C8F0D7;
  --mint-200: #7BD9A0;

  /* ── Ink family — text only, never background ── */
  --ink:       #2A2D38;
  --ink-soft:  #5A6173;
  --ink-muted: #8B91A1;

  /* ── Neon accents — AI / Tech sections, now allowed as bold accents
        not just thin dots. Still never wall-to-wall fill ── */
  --cyan-electric: #00E5FF;
  --lime-glow:     #8BFF3D;
  --magenta-spark: #FF4FD8;
  --neon-violet:   #9D4DFF;
  --neon-orange:   #FF7A29;

  /* ── Semantic roles ── */
  --primary:          var(--gold-400);
  --secondary:        var(--peach-300);
  --surface:          var(--cream-200);
  --surface-raised:   var(--cream-100);
  --on-surface:       var(--ink);
  --on-surface-muted: var(--ink-soft);

  /* ── Per-theme signature hooks (each theme-*.css overrides these) ── */
  --page-bg:        var(--cream-200);
  --page-accent:    var(--gold-400);
  --page-accent-2:  var(--peach-300);
  --hero-from:      var(--gold-100);
  --hero-to:        var(--peach-100);

  /* ── Typography ── */
  --ff-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-mono:  "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale (px values from DESIGN.md typography block) */
  --fs-display:    clamp(2.6rem, 5vw, 3.5rem);  /* 56px display */
  --fs-h1:         clamp(2.2rem, 4vw, 2.9rem);
  --fs-headline:   2.5rem;   /* 40px headline-lg */
  --fs-headline-md:1.75rem;  /* 28px */
  --fs-scripture:  1.5rem;   /* 24px scripture */
  --fs-lede:       1.125rem; /* 18px body-lg */
  --fs-body:       1rem;     /* 16px body-md */
  --fs-sm:         0.875rem; /* 14px */
  --fs-label:      0.75rem;  /* 12px label-caps */
  --fs-kicker:     0.8125rem;/* 13px mono kicker */

  --lh-tight: 1.1;
  --lh-snug:  1.2;
  --lh-body:  1.6;
  --lh-relaxed: 1.7;
  --ls-tight: -0.02em;
  --ls-caps:  0.12em;
  --ls-kicker:0.08em;

  /* ── Spacing — strict 8pt scale (4px micro) ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --gutter: 24px;
  --margin: 32px;
  --maxw: 1240px;
  --maxw-prose: 720px;

  /* ── Radius — softly rounded, never sharp ── */
  --r-none: 0px;
  --r-sm: 4px;
  --r-md: 12px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 9999px;
  --r-full: 9999px;

  /* ── Elevation — tonal layers, hairline gold borders, no harsh shadow ── */
  --hair: 1px solid var(--cream-400);
  --line: 1px solid var(--cream-400);
  --border-gold: 1px solid var(--gold-300);
  --sh-soft: 0 1px 2px rgba(42, 45, 56, 0.04), 0 8px 24px rgba(42, 45, 56, 0.05);
  --sh-md:   0 2px 6px rgba(42, 45, 56, 0.06), 0 14px 40px rgba(42, 45, 56, 0.07);
  --glow-soft: 0 0 0 4px rgba(212, 168, 67, 0.18);

  /* ── Motion ── */
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
  --dur-deliberate: 900ms;
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-breath: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
  --rainbow-stripe-h: 4px;

  /* ==========================================================================
     LEGACY BRIDGE — names the existing templates/inline styles already use.
     Each points back at a canonical token above. Keeps old markup on-brand.
     ====================================================================== */

  /* JOY palette under the --jp- prefix used across pages */
  --jp-cream-100: var(--cream-100);
  --jp-cream-200: var(--cream-200);
  --jp-cream-300: var(--cream-300);
  --jp-cream-400: var(--cream-400);
  --jp-gold-100: var(--gold-100);
  --jp-gold-200: var(--gold-200);
  --jp-gold-300: var(--gold-300);
  --jp-gold-400: var(--gold-400);
  --jp-peach-100: var(--peach-100);
  --jp-peach-200: var(--peach-200);
  --jp-peach-300: var(--peach-300);
  --jp-coral: var(--coral);
  --jp-rose-100: var(--rose-100);
  --jp-rose-200: var(--rose-200);
  --jp-rose-300: var(--rose-300);
  --jp-rose-400: var(--rose-400);
  --jp-sky-100: var(--sky-100);
  --jp-sky-200: var(--sky-200);
  --jp-sky-300: var(--sky-300);
  --jp-sky-400: var(--sky-400);
  --jp-sage-100: var(--sage-100);
  --jp-sage-200: var(--sage-200);
  --jp-sage-300: var(--sage-300);
  --jp-sage-400: var(--sage-400);
  --jp-lav-100: var(--lav-100);
  --jp-lav-200: var(--lav-200);
  --jp-lav-300: var(--lav-300);
  --jp-butter: var(--butter);
  --jp-mint-100: var(--mint-100);
  --jp-mint-200: var(--mint-200);
  --jp-ink: var(--ink);
  --jp-ink-soft: var(--ink-soft);
  --jp-ink-muted: var(--ink-muted);

  /* "joy-" prefixed names */
  --joy-gold: var(--gold-400);
  --joy-gold-bright: var(--gold-200);
  --joy-coral: var(--coral);
  --joy-cream-warm: var(--cream-300);
  --joy-olive-deep: var(--sage-400);
  --church-stained: var(--lav-300);

  /* gold family shorthands */
  --gold: var(--gold-400);
  --gold-bright: var(--gold-200);
  --gold-deep: var(--gold-300);
  --c-gold: var(--gold-400);
  --c-gold-lite: var(--gold-200);

  /* NEUTRALS — the old design leaned navy/black; remap onto ink + cream so
     nothing renders as a dark dominant fill. --navy becomes warm ink. */
  --navy: var(--ink);
  --navy-deep: var(--ink);
  --c-navy: var(--ink);
  --ink-strong: var(--ink);
  --muted: var(--ink-muted);
  --cream: var(--cream-200);
  --cream-warm: var(--cream-300);
  --paper: var(--cream-100);
  --surface-2: var(--cream-300);
  --accent: var(--gold-400);
  --accent-strong: var(--gold-400);

  /* font-family aliases */
  --serif: var(--ff-serif);
  --sans: var(--ff-sans);
  --mono: var(--ff-mono);
  --font-serif: var(--ff-serif);
  --font-sans: var(--ff-sans);
  --font-mono: var(--ff-mono);

  /* radius aliases */
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);

  /* type-size aliases used in a few inline styles */
  --fs-h2: var(--fs-headline);

  /* gradient aliases used by some page inline styles — all warm/light */
  --grad-dawn:  linear-gradient(165deg, var(--gold-100) 0%, var(--peach-100) 100%);
  --grad-noon:  linear-gradient(165deg, var(--cream-200) 0%, var(--sky-100) 100%);
  --grad-grace: linear-gradient(165deg, var(--lav-100) 0%, var(--cream-200) 100%);
  --grad-sky:   linear-gradient(180deg, var(--sky-100) 0%, var(--cream-100) 100%);
  --grad-meadow:  linear-gradient(165deg, var(--sage-200) 0%, var(--cream-200) 100%);
  --grad-sunset:  linear-gradient(165deg, var(--peach-200) 0%, var(--rose-100) 100%);
  --grad-spectrum: linear-gradient(90deg, var(--rose-200), var(--peach-200), var(--gold-200), var(--butter), var(--mint-200), var(--sky-200), var(--lav-200));

  /* easing / duration aliases */
  --cb-ease: var(--ease-calm);
  --ease: var(--ease-calm);
  --transition: var(--dur-med) var(--ease-calm);
  --t-fast: var(--dur-fast);
  --t-xs: 90ms;
  --d-med: var(--dur-med);
}