/*
 * tokens.css — Canonical design token system
 * DO NOT override these values in component files — use the tokens.
 */

:root {
  /* ── Typeface ── */
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --sans:        var(--font-sans);          /* repairs legacy var(--sans) refs */
  --serif:       'Fraunces', Georgia, 'Times New Roman', serif;
  --font-serif:  var(--serif);
  --font:        var(--font-sans);
  --display:     var(--serif);

  /* ── Fraunces variation tokens ── */
  --fr-display:  'opsz' 90, 'wght' 620, 'SOFT' 0,  'WONK' 0;
  --fr-heading:  'opsz' 80, 'wght' 580, 'SOFT' 0,  'WONK' 0;
  --fr-body:     'opsz' 18, 'wght' 440, 'SOFT' 55, 'WONK' 0;
  --fr-body-sm:  'opsz' 12, 'wght' 460, 'SOFT' 55, 'WONK' 0;

  /* ── Inter weight tokens ── */
  --w-body:      450;
  --w-medium:    550;
  --w-strong:    620;

  /* ── Navy ladder ── */
  --navy-ink:    #081634;   /* primary text, deepest grounds, hero, footer */
  --navy:        #1A3C6D;   /* brand fills, buttons, headings, links */
  --navy-mid:    #3C5E8A;   /* secondary, hovers, on-dark accents; sparing */
  --navy-soft:   var(--navy-ink);   /* legacy alias */
  --navy-deep:   var(--navy-ink);   /* legacy alias */
  --navy-wash:   #EAEEF4;

  /* ── Champagne-gold: single metallic ── */
  --gold:        #D8BD80;   /* pale champagne, accents + hairlines on navy */
  --gold-deep:   #B2965A;   /* deeper cut, hairlines on light */
  --gold-text:   #7A5E20;   /* gold at small size on light, WCAG AA 4.60:1 */
  --gold-foil:   #FFC857;   /* marigold: rare glint on dark + print foil only */
  --gold-soft:   var(--gold-foil);  /* legacy alias */

  /* ── Text hierarchy: stays in the navy family ── */
  --ink:         #0E2540;
  --body:        #243240;
  --mid:         #5A6470;
  --dim:         #8A929C;

  /* ── Surfaces: near-neutral, warmth from the metal not the paper ── */
  --surface:     #F4F3EE;
  --surface-2:   #ECEBE4;
  --surface-3:   #E3E2D9;
  --white:       #FFFFFF;

  /* ── Borders ── */
  --rule:        #CFD6E0;
  --rule-soft:   #E4E1D8;

  /* ── Semantic: success ── */
  --green:       #2E7D32;
  --green-soft:  #E8F4E9;

  /* ── Semantic: error ── */
  --red:         #B22222;
  --red-soft:    #FAE8E8;

  /* ── Semantic: warning ── */
  --amber:       #B45309;
  --amber-soft:  #FEF3C7;

  /* ── Interaction ── */
  --focus:       var(--navy);

  /* ── Glow raw RGB for rgba() ── */
  --accent-glow: 216, 189, 128;

  /* ── Border radius ── */
  --r-xs:   2px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   8px;
  --r-pill: 999px;
  --r:      var(--r-md);
  --r2:     14px;
  --r3:     20px;

  /* ── Elevation shadows ── */
  --shadow-sm: 0 2px 8px rgba(8,22,52,.05),  0 14px 30px -22px rgba(8,22,52,.10);
  --shadow-md: 0 2px 8px rgba(8,22,52,.06),  0 12px 32px rgba(8,22,52,.08);
  --shadow-lg: 0 4px 14px rgba(8,22,52,.10), 0 22px 56px rgba(8,22,52,.14);

  /* ── Easing ── */
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ── Gradient tokens ── */
  --gold-gradient:       linear-gradient(180deg, #A06A1F 0%, #925E18 48%, #855414 100%);
  --gold-gradient-hover: linear-gradient(180deg, #9A6A22 0%, #8C5E18 48%, #7F5414 100%);
  --hero-gradient:       linear-gradient(135deg, #0C1E38 0%, #122D4A 100%);
  --navy-gradient:       linear-gradient(180deg, #1C3F66 0%, #163558 58%, #102A47 100%);
  --navy-gradient-hover: linear-gradient(180deg, #224878 0%, #1A3C63 58%, #142F50 100%);

  /* ── Raw RGB for rgba() composition ── */
  --accent-glow-deep: 178, 150, 90;   /* --gold-deep #B2965A */

  /* ── Surface tints ── */
  --navy-tint:    #EEF3FA;
  --warm-tint:    #FFF8EE;
  --mist-on-navy: #C2CCDA;

  /* ── Input placeholder ── */
  --placeholder: #7A746B;

  /* ── Footer aliases ── */
  --mist:         #C4CCDD;
  --paper-cool:   #EDF1F8;

  /* ── Legacy backward-compat aliases ── */
  --page:         var(--surface);
  --cobalt:       var(--gold);
  --cobalt-light: var(--gold);
  --cobalt-soft:  rgba(178, 150, 90, 0.08);
  --line:         rgba(8, 22, 52, 0.09);
  --line-light:   rgba(8, 22, 52, 0.05);
  --ink-80:       rgba(14, 37, 64, 0.90);
  --ink-60:       rgba(14, 37, 64, 0.72);
  --ink-40:       rgba(14, 37, 64, 0.52);
  --ink-20:       rgba(14, 37, 64, 0.20);
  --ink-12:       rgba(14, 37, 64, 0.12);
  --ink-06:       rgba(14, 37, 64, 0.06);

  /* ── Champ aliases (previous iteration, kept for any lingering refs) ── */
  --champ:        var(--gold);
  --champ-deep:   var(--gold-deep);
  --champ-text:   var(--gold-text);
  --marigold:     var(--gold-foil);
  --paper:        var(--surface);
  --paper-2:      var(--surface-2);
  --paper-3:      var(--surface-3);
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  :root {
    --navy:        #7BA8FF;
    --navy-soft:   #5C8DEB;
    --gold:        #F0CB7E;
    --gold-deep:   #E8B85A;
    --gold-text:   #F0D08A;
    --gold-soft:   var(--gold-foil);
    --ink:         #F2F2F4;
    --body:        #D4D4D8;
    --mid:         #9899A0;
    --dim:         #6B6C72;
    --rule:        #3A3A40;
    --rule-soft:   #2A2A30;
    --surface:     #0F1014;
    --surface-2:   #16171C;
    --surface-3:   #1D1E24;
    --white:       #16171C;
    --green:       #9CD9A4;
    --green-soft:  #1F2D24;
    --red:         #F2B5B5;
    --red-soft:    #2A1818;
  }

  body { background: var(--surface); }

  .ambient-ground::before { opacity: .28; }
  .ambient-ground::after {
    background: radial-gradient(circle, rgba(123,168,255,.16) 0%, rgba(123,168,255,0) 70%);
  }

  .save-pill {
    background: var(--surface-2);
    color: var(--body);
    border-color: var(--rule-soft);
  }

  .cov-constellation .icon { opacity: .025 !important; }
}