/* ============================================================
   Junturi — Colour tokens
   Two brand variants share one dark editorial canvas:
     • default  → teal / indigo (the flagship combo)
     • brass    → warm brass / gold  ([data-theme="brass"])
   Raw palette tokens are theme-agnostic; semantic tokens remap
   per theme. Components should consume the SEMANTIC tokens only.
   ============================================================ */

:root {
  /* ---- Raw palette : Indigo ---- */
  --indigo-900: #1B1646;
  --indigo-800: #221C52;
  --indigo-700: #2C2568;   /* primary canvas */
  --indigo-600: #3C3489;   /* brand mark indigo */
  --indigo-500: #4E45A6;
  --indigo-300: #8F87C9;

  /* ---- Raw palette : Teal / Mint ---- */
  --teal-700:   #12684C;
  --teal-600:   #157A5A;
  --teal-500:   #1D9E75;   /* brand teal */
  --teal-400:   #3CB98F;
  --mint-300:   #9FE1CB;   /* brand mint */
  --mint-200:   #C7EEDF;

  /* ---- Raw palette : Brass / Tan (from the brass mark) ---- */
  --brass-900:  #3A2A19;
  --brass-800:  #5A4226;
  --brass-700:  #7A5637;   /* brass mark — dark half */
  --brass-600:  #94693F;
  --brass-500:  #A9824E;   /* brass mark — light half (primary accent) */
  --brass-400:  #C2A277;
  --brass-300:  #E4D3B4;
  --espresso-900: #201B18;
  --espresso-800: #2A2420;  /* brass canvas */

  /* ---- Raw palette : Cream / Ink neutrals ---- */
  --cream-50:  #FBFAF6;
  --cream-100: #FBF9F3;
  --paper-100: #F3EFE6;    /* warm paper (sting) */
  --cream-200: #E9E4D6;
  --cream-300: #D8D0BE;
  --ink-900:   #23221F;
  --ink-800:   #2C2C2A;
  --ink-600:   #55524B;

  /* ============ SEMANTIC — default (teal / indigo) ============ */
  --surface-base:        var(--indigo-700);
  --surface-deep:        var(--indigo-800);
  --surface-card:        rgba(255,255,255,0.055);
  --surface-card-hover:  rgba(255,255,255,0.09);
  --surface-inset:       rgba(0,0,0,0.14);

  --border-hairline:     rgba(251,249,243,0.16);
  --border-strong:       rgba(251,249,243,0.32);

  --text-strong:         var(--cream-100);
  --text-body:           var(--cream-200);
  --text-muted:          rgba(233,228,214,0.66);
  --text-inverse:        var(--indigo-800);

  --accent:              var(--teal-500);
  --accent-strong:       var(--teal-600);
  --accent-soft:         var(--mint-300);
  --accent-on:           #FBFCFA;   /* text/icon on --accent fill */
  --accent-2:            var(--indigo-500);

  --focus-ring:          var(--mint-300);
  --link:                var(--mint-300);
  --link-hover:          var(--cream-100);

  --glow:                rgba(255,255,255,0.07);
  --scrim:               rgba(20,16,48,0.55);

  color-scheme: dark;
}

/* ================ SEMANTIC — brass variant ================ */
[data-theme="brass"] {
  --surface-base:        var(--espresso-800);
  --surface-deep:        var(--espresso-900);
  --surface-card:        rgba(244,228,190,0.06);
  --surface-card-hover:  rgba(244,228,190,0.10);
  --surface-inset:       rgba(0,0,0,0.18);

  --border-hairline:     rgba(244,228,190,0.16);
  --border-strong:       rgba(244,228,190,0.34);

  --text-strong:         #FBF7EE;
  --text-body:           #E7DDC9;
  --text-muted:          rgba(231,221,201,0.64);
  --text-inverse:        var(--espresso-900);

  --accent:              var(--brass-500);
  --accent-strong:       var(--brass-600);
  --accent-soft:         var(--brass-300);
  --accent-on:           #241C0B;   /* dark ink on bright brass */
  --accent-2:            var(--brass-700);

  --focus-ring:          var(--brass-400);
  --link:                var(--brass-400);
  --link-hover:          #FBF7EE;

  --glow:                rgba(244,228,190,0.06);
  --scrim:               rgba(24,19,15,0.58);

  color-scheme: dark;
}

/* ============ SURFACE MODIFIER — light / warm-paper ============
   The brand's PRIMARY canvas is warm cream; dark indigo/espresso is the
   alternate (deck sections, hero). Apply data-surface="light" on any
   ancestor to flip surfaces + text to the paper look while KEEPING the
   active theme's accents — so it composes with both the default and
   brass themes. Eyebrows on light typically use brass; primary CTAs on
   the default theme typically use indigo (var(--accent-2)). */
[data-surface="light"] {
  --surface-base:        #F1ECE1;   /* warm paper */
  --surface-deep:        #E7E0D2;
  --surface-card:        rgba(255,255,255,0.72);
  --surface-card-hover:  #FFFFFF;
  --surface-inset:       rgba(36,34,30,0.05);

  --border-hairline:     rgba(36,34,30,0.12);
  --border-strong:       rgba(36,34,30,0.24);

  --text-strong:         #24221E;
  --text-body:           #45423B;
  --text-muted:          rgba(36,34,30,0.60);
  --text-inverse:        #FBF9F3;

  --focus-ring:          var(--accent-2);
  --link:                var(--accent-2);
  --link-hover:          #24221E;

  --glow:                rgba(60,52,137,0.05);
  --scrim:               rgba(36,34,30,0.32);

  color-scheme: light;
}