/* ============================================================
   GUIDE DESIGN SYSTEM — COLOR TOKENS
   Primitive scales + semantic aliases.
   Primitives are raw hues; semantic aliases (text/background/
   border/icon) are what product code should consume.
   Dark theme remaps the SEMANTIC layer via [data-theme="dark"].
   ============================================================ */

:root {
  /* ---------- PRIMITIVE: Purple (brand) ---------- */
  --purple-10: rgb(241, 237, 255);
  --purple-20: rgb(209, 198, 255);
  --purple-30: rgb(178, 159, 255);
  --purple-40: rgb(147, 120, 255);
  --purple-50: rgb(113, 79, 249);
  --purple-60: rgb(88, 57, 215);   /* primary */
  --purple-70: rgb(66, 38, 181);
  --purple-80: rgb(48, 23, 147);
  --purple-90: rgb(32, 12, 113);
  --purple-100: rgb(19, 4, 79);

  /* ---------- PRIMITIVE: Grey (neutral) ---------- */
  --grey-0:   rgb(255, 255, 255);
  --grey-10:  rgb(253, 252, 254);
  --grey-20:  rgb(239, 236, 251);
  --grey-30:  rgb(214, 210, 228);
  --grey-40:  rgb(190, 186, 206);
  --grey-50:  rgb(166, 162, 183);
  --grey-60:  rgb(143, 139, 160);
  --grey-70:  rgb(121, 117, 138);
  --grey-80:  rgb(100, 96, 115);
  --grey-90:  rgb(79, 75, 92);
  --grey-100: rgb(58, 56, 70);     /* near-black ink */
  --grey-black: rgb(0, 0, 0);
  --grey-white: rgb(255, 255, 255);

  /* ---------- PRIMITIVE: Blue (info) ---------- */
  --blue-10:  rgb(231, 239, 255);
  --blue-20:  rgb(188, 211, 255);
  --blue-30:  rgb(144, 183, 255);
  --blue-40:  rgb(101, 155, 255);
  --blue-50:  rgb(58, 126, 255);
  --blue-60:  rgb(15, 98, 254);
  --blue-70:  rgb(0, 74, 213);
  --blue-80:  rgb(0, 60, 172);
  --blue-90:  rgb(0, 46, 132);
  --blue-100: rgb(0, 32, 91);

  /* ---------- PRIMITIVE: Green (success) ---------- */
  --green-10:  rgb(243, 255, 247);
  --green-20:  rgb(209, 255, 222);
  --green-30:  rgb(175, 255, 198);
  --green-40:  rgb(140, 253, 172);
  --green-50:  rgb(115, 224, 146);
  --green-60:  rgb(92, 195, 122);
  --green-70:  rgb(72, 166, 99);
  --green-80:  rgb(54, 137, 78);
  --green-90:  rgb(38, 108, 58);
  --green-100: rgb(25, 79, 40);

  /* ---------- PRIMITIVE: Orange (warning) ---------- */
  --orange-10:  rgb(255, 242, 231);
  --orange-20:  rgb(255, 219, 188);
  --orange-30:  rgb(255, 196, 144);
  --orange-40:  rgb(255, 173, 101);
  --orange-50:  rgb(255, 150, 58);
  --orange-60:  rgb(255, 127, 15);
  --orange-70:  rgb(214, 100, 0);
  --orange-80:  rgb(173, 81, 0);
  --orange-90:  rgb(133, 62, 0);
  --orange-100: rgb(92, 43, 0);

  /* ---------- PRIMITIVE: Red (error) ---------- */
  --red-10:  rgb(255, 234, 235);
  --red-20:  rgb(255, 188, 192);
  --red-30:  rgb(255, 143, 149);
  --red-40:  rgb(255, 97, 105);
  --red-50:  rgb(252, 50, 61);
  --red-60:  rgb(218, 30, 40);
  --red-70:  rgb(184, 14, 23);
  --red-80:  rgb(150, 2, 10);
  --red-90:  rgb(116, 0, 6);
  --red-100: rgb(82, 0, 4);

  /* ============================================================
     SEMANTIC — BACKGROUND
     ============================================================ */
  --background-brand-primary: var(--purple-60);
  --background-brand-secondary: var(--purple-40);
  --background-brand-tertiary: var(--purple-10);
  --background-neutral-primary: var(--grey-0);
  --background-neutral-secondary: var(--grey-10);
  --background-neutral-tertiary: var(--grey-20);
  --background-neutral-disabled: var(--grey-30);
  --background-neutral-inverse-primary: var(--grey-100);
  --background-neutral-inverse-secondary: var(--grey-90);
  --background-neutral-inverse-tertiary: var(--grey-80);
  --background-semantic-info-subtle: var(--blue-10);
  --background-semantic-info-bold: var(--blue-60);
  --background-semantic-success-subtle: var(--green-10);
  --background-semantic-success-bold: var(--green-60);
  --background-semantic-warning-subtle: var(--orange-10);
  --background-semantic-warning-bold: var(--orange-60);
  --background-semantic-error-subtle: var(--red-10);
  --background-semantic-error-bold: var(--red-60);

  /* ============================================================
     SEMANTIC — TEXT
     ============================================================ */
  --text-brand-primary: var(--purple-60);
  --text-brand-inverse: var(--purple-10);
  --text-neutral-primary: var(--grey-100);
  --text-neutral-secondary: var(--grey-80);
  --text-neutral-tertiary: var(--grey-70);
  --text-neutral-disabled: var(--grey-50);
  --text-neutral-inverse-primary: var(--grey-10);
  --text-neutral-inverse-secondary: var(--grey-20);
  --text-neutral-inverse-tertiary: var(--grey-30);
  --text-semantic-info-primary: var(--blue-70);
  --text-semantic-info-inverse: var(--blue-10);
  --text-semantic-success-primary: var(--green-70);
  --text-semantic-success-inverse: var(--green-10);
  --text-semantic-warning-primary: var(--orange-70);
  --text-semantic-warning-inverse: var(--orange-10);
  --text-semantic-error-primary: var(--red-70);
  --text-semantic-error-inverse: var(--red-10);

  /* ============================================================
     SEMANTIC — BORDER
     ============================================================ */
  --border-brand-primary: var(--purple-60);
  --border-brand-inverse: var(--purple-20);
  --border-neutral-primary: var(--grey-30);
  --border-neutral-secondary: var(--grey-50);
  --border-neutral-inverse-primary: var(--grey-90);
  --border-neutral-inverse-secondary: var(--grey-70);
  --border-semantic-info-primary: var(--blue-70);
  --border-semantic-info-inverse: var(--blue-20);
  --border-semantic-success-primary: var(--green-70);
  --border-semantic-success-inverse: var(--green-20);
  --border-semantic-warning-primary: var(--orange-70);
  --border-semantic-warning-inverse: var(--orange-20);
  --border-semantic-error-primary: var(--red-70);
  --border-semantic-error-inverse: var(--red-20);

  /* ============================================================
     SEMANTIC — ICON
     ============================================================ */
  --icon-brand-primary: var(--purple-60);
  --icon-brand-inverse: var(--purple-10);
  --icon-neutral-primary: var(--grey-100);
  --icon-neutral-secondary: var(--grey-80);
  --icon-neutral-tertiary: var(--grey-70);
  --icon-neutral-disabled: var(--grey-50);
  --icon-neutral-inverse-primary: var(--grey-10);
  --icon-neutral-inverse-secondary: var(--grey-20);
  --icon-neutral-inverse-tertiary: var(--grey-30);
  --icon-semantic-info-primary: var(--blue-70);
  --icon-semantic-info-inverse: var(--blue-10);
  --icon-semantic-success-primary: var(--green-70);
  --icon-semantic-success-inverse: var(--green-10);
  --icon-semantic-warning-primary: var(--orange-70);
  --icon-semantic-warning-inverse: var(--orange-10);
  --icon-semantic-error-primary: var(--red-70);
  --icon-semantic-error-inverse: var(--red-10);
}

/* ============================================================
   DARK THEME — remaps the neutral scale + brand step so every
   semantic alias resolves to its dark equivalent.
   Apply with <html data-theme="dark"> or class .dark.
   ============================================================ */
:root[data-theme="dark"],
.dark {
  --grey-0:   rgb(0, 0, 0);
  --grey-10:  rgb(58, 56, 70);
  --grey-20:  rgb(79, 75, 92);
  --grey-30:  rgb(100, 96, 115);
  --grey-40:  rgb(121, 117, 138);
  --grey-50:  rgb(143, 139, 160);
  --grey-60:  rgb(166, 162, 183);
  --grey-70:  rgb(190, 186, 206);
  --grey-80:  rgb(214, 210, 228);
  --grey-90:  rgb(239, 236, 251);
  --grey-100: rgb(253, 252, 254);

  --purple-10:  rgb(19, 4, 79);
  --purple-20:  rgb(32, 12, 113);
  --purple-30:  rgb(48, 23, 147);
  --purple-40:  rgb(66, 38, 181);
  --purple-50:  rgb(88, 57, 215);
  --purple-60:  rgb(113, 79, 249);
  --purple-70:  rgb(147, 120, 255);
  --purple-80:  rgb(178, 159, 255);
  --purple-90:  rgb(209, 198, 255);
  --purple-100: rgb(241, 237, 255);

  --blue-10: rgb(0,32,91);   --blue-60: rgb(58,126,255);  --blue-70: rgb(101,155,255);
  --green-10: rgb(25,79,40); --green-60: rgb(115,224,146); --green-70: rgb(140,253,172);
  --orange-10: rgb(92,43,0); --orange-60: rgb(255,150,58); --orange-70: rgb(255,173,101);
  --red-10: rgb(82,0,4);     --red-60: rgb(252,50,61);     --red-70: rgb(255,97,105);
}