/* ============================================================
   Stacks / Ryone — Color tokens
   A high-contrast neutral scale (N1 ink → N8 paper) with a
   vivid 4-up primary set and a soft 4-up secondary set.
   ============================================================ */
:root {
  /* ---- Neutrals (N1 darkest ink → N8 lightest paper) ---- */
  --n-1: #141416; /* near-black ink, hero text, dark surfaces */
  --n-2: #23262F; /* primary text, dark cards */
  --n-3: #353945; /* strong secondary text, dark borders */
  --n-4: #777E90; /* muted text, captions, placeholders */
  --n-5: #B1B5C3; /* disabled text, faint icons */
  --n-6: #E6E8EC; /* hairline borders, dividers */
  --n-7: #F4F5F6; /* subtle fills, hovered rows */
  --n-8: #FCFCFD; /* app background / paper */
  --white: #FFFFFF;
  --black: #000000;

  /* ---- Primary (vivid accents) ---- */
  --blue:   #3772FF; /* brand primary — CTAs, links, focus */
  --purple: #9757D7;
  --pink:   #EF466F;
  --green:  #45B26B;

  /* ---- Secondary (soft accents / tints) ---- */
  --cyan:     #4BC9F0;
  --tan:      #E4D7CF;
  --yellow:   #FFD166;
  --lavender: #CDB4DB;

  /* ---- Primary tints (12% surfaces) ---- */
  --blue-tint:   rgba(55, 114, 255, 0.12);
  --purple-tint: rgba(151, 87, 215, 0.12);
  --pink-tint:   rgba(239, 70, 111, 0.12);
  --green-tint:  rgba(69, 178, 107, 0.12);
  --yellow-tint: rgba(255, 209, 102, 0.16);

  /* ============================================================
     Semantic aliases — reference these in components, not raw hex
     ============================================================ */
  --primary:        var(--blue);
  --primary-hover:  #2c63e8;      /* blue + 25% black overlay equiv. */
  --primary-press:  #2454cc;

  --text-primary:   var(--n-2);   /* default body / heading ink */
  --text-secondary: var(--n-4);   /* muted, captions, meta */
  --text-tertiary:  var(--n-5);   /* disabled, faint */
  --text-onfill:    var(--n-8);   /* text on a colored/dark fill */
  --text-link:      var(--blue);

  --surface-page:   var(--n-8);   /* app background */
  --surface-card:   var(--white); /* raised card */
  --surface-sunken: var(--n-7);   /* inset fills, hovered rows */
  --surface-dark:   var(--n-1);   /* dark sections / footer */
  --surface-dark-2: var(--n-2);   /* dark cards */

  --border-subtle:  var(--n-6);   /* hairlines, dividers */
  --border-strong:  var(--n-5);   /* input borders, outlines */
  --border-dark:    var(--n-3);   /* borders on dark surfaces */

  --success: var(--green);
  --error:   var(--pink);
  --warning: var(--yellow);
  --info:    var(--blue);

  --focus-ring: rgba(55, 114, 255, 0.32);
}

/* Dark theme scope — apply class="theme-dark" (or data-theme) on any
   container to flip the semantic surface/text aliases. */
.theme-dark {
  --text-primary:   var(--n-8);
  --text-secondary: var(--n-5);
  --text-tertiary:  var(--n-4);
  --text-onfill:    var(--n-8);

  --surface-page:   var(--n-1);
  --surface-card:   var(--n-2);
  --surface-sunken: var(--n-3);
  --surface-dark:   var(--black);
  --surface-dark-2: var(--n-2);

  --border-subtle:  var(--n-3);
  --border-strong:  var(--n-3);
  --border-dark:    var(--n-3);
}