/* ============================================================
   Wanted Design System — Color
   ------------------------------------------------------------
   Two layers:
   1. PALETTE  — raw, atomic color steps (0=darkest … 99=near-white)
                 modelled on the Wanted / OneUI-style tonal scales.
   2. SEMANTIC — role-based aliases that components reference.
                 Light theme is the :root default; .dark / [data-theme="dark"]
                 remaps the semantic layer for dark surfaces.
   Components should use the SEMANTIC tokens, never raw palette steps.
   ============================================================ */

:root {
  /* ---- Common ------------------------------------------------ */
  --common-100: rgb(255, 255, 255);
  --common-0: rgb(0, 0, 0);
  --static-white: rgb(255, 255, 255);
  --static-black: rgb(0, 0, 0);

  /* ---- Blue (primary brand hue) ----------------------------- */
  --blue-99: rgb(247, 251, 255);
  --blue-95: rgb(234, 242, 254);
  --blue-90: rgb(201, 222, 254);
  --blue-80: rgb(158, 197, 255);
  --blue-70: rgb(105, 165, 255);
  --blue-60: rgb(51, 133, 255);
  --blue-50: rgb(0, 102, 255);   /* Wanted signature blue */
  --blue-45: rgb(0, 94, 235);
  --blue-40: rgb(0, 84, 209);
  --blue-30: rgb(0, 62, 156);
  --blue-20: rgb(0, 41, 102);
  --blue-10: rgb(0, 21, 54);

  /* ---- Violet (secondary brand / premium accent) ------------ */
  --violet-99: rgb(251, 250, 255);
  --violet-95: rgb(240, 236, 254);
  --violet-90: rgb(219, 211, 254);
  --violet-80: rgb(192, 176, 255);
  --violet-70: rgb(158, 134, 252);
  --violet-60: rgb(125, 94, 247);
  --violet-50: rgb(101, 65, 242);
  --violet-45: rgb(91, 55, 237);
  --violet-40: rgb(79, 41, 229);
  --violet-30: rgb(58, 22, 201);
  --violet-20: rgb(35, 9, 143);
  --violet-10: rgb(17, 2, 77);

  /* ---- Cool Neutral (UI greys, slightly blue-cool) ---------- */
  --cool-neutral-99: rgb(247, 247, 248);
  --cool-neutral-98: rgb(244, 244, 245);
  --cool-neutral-97: rgb(234, 235, 236);
  --cool-neutral-96: rgb(225, 226, 228);
  --cool-neutral-95: rgb(219, 220, 223);
  --cool-neutral-90: rgb(194, 196, 200);
  --cool-neutral-80: rgb(174, 176, 182);
  --cool-neutral-70: rgb(152, 155, 162);
  --cool-neutral-60: rgb(135, 138, 147);
  --cool-neutral-50: rgb(112, 115, 124);  /* the workhorse grey */
  --cool-neutral-40: rgb(90, 92, 99);
  --cool-neutral-30: rgb(70, 71, 76);
  --cool-neutral-25: rgb(55, 56, 60);
  --cool-neutral-22: rgb(46, 47, 51);
  --cool-neutral-17: rgb(33, 34, 37);
  --cool-neutral-15: rgb(27, 28, 30);
  --cool-neutral-10: rgb(23, 23, 25);
  --cool-neutral-7: rgb(20, 20, 21);
  --cool-neutral-5: rgb(15, 15, 16);

  /* ---- Status hues ------------------------------------------ */
  --green-50: rgb(0, 191, 64);    --green-40: rgb(0, 150, 50);   --green-95: rgb(217, 255, 230);
  --red-50: rgb(255, 66, 66);     --red-40: rgb(229, 34, 34);    --red-95: rgb(254, 236, 236);
  --orange-50: rgb(255, 146, 0);  --orange-40: rgb(212, 120, 0); --orange-95: rgb(254, 244, 230);
  --cyan-50: rgb(0, 189, 222);    --cyan-40: rgb(0, 152, 178);   --cyan-95: rgb(222, 250, 255);

  /* ---- Accent surface hues (light tints for chips/badges) --- */
  --pink-50: rgb(245, 83, 218);   --pink-95: rgb(254, 236, 251);
  --lime-50: rgb(88, 207, 4);     --lime-95: rgb(230, 255, 212);
  --light-blue-50: rgb(0, 174, 255);
  --red-orange-50: rgb(255, 94, 0);
  --purple-50: rgb(203, 89, 255);

  /* =============== SEMANTIC — light (default) =============== */

  /* Primary action */
  --primary-normal: rgb(51, 102, 255);   /* default button / brand action */
  --primary-strong: var(--blue-45);
  --primary-heavy: var(--blue-40);
  --primary-assistive: var(--blue-95);   /* tinted primary surface */

  /* Label (text) — opacity-stepped on a cool ink */
  --label-strong: var(--common-0);             /* highest-contrast headings */
  --label-normal: rgb(23, 23, 25);             /* default body text */
  --label-neutral: rgba(46, 47, 51, 0.88);     /* slightly softened body */
  --label-alternative: rgba(55, 56, 60, 0.61); /* secondary / captions */
  --label-assistive: rgba(55, 56, 60, 0.28);   /* placeholder / hints */
  --label-disable: rgba(55, 56, 60, 0.16);     /* disabled text */

  /* Background (surfaces) */
  --background-normal: rgb(255, 255, 255);          /* page */
  --background-normal-alternative: var(--cool-neutral-99); /* subtle page band */
  --background-elevated: rgb(255, 255, 255);        /* card / sheet */
  --background-elevated-alternative: var(--cool-neutral-99);

  /* Fill (subtle solid-ish surfaces, translucent grey) */
  --fill-alternative: rgba(112, 115, 124, 0.05);
  --fill-normal: rgba(112, 115, 124, 0.08);
  --fill-strong: rgba(112, 115, 124, 0.16);

  /* Line (borders / dividers, translucent grey) */
  --line-alternative: rgba(112, 115, 124, 0.08);
  --line-neutral: rgba(112, 115, 124, 0.16);
  --line-normal: rgba(112, 115, 124, 0.22);
  --line-strong: rgba(112, 115, 124, 0.52);

  /* Interaction states */
  --interaction-inactive: var(--cool-neutral-70);
  --interaction-disable: var(--cool-neutral-98);

  /* Inverse (dark chips / tooltips on light UI) */
  --inverse-background: var(--cool-neutral-15);
  --inverse-label: var(--cool-neutral-99);
  --inverse-primary: var(--blue-60);

  /* Status */
  --status-positive: var(--green-50);
  --status-cautionary: var(--orange-50);
  --status-negative: var(--red-50);

  /* Accent foreground/background pairs (badges, tags) */
  --accent-foreground-blue: var(--blue-45);
  --accent-foreground-violet: var(--violet-45);
  --accent-foreground-green: var(--green-40);
  --accent-foreground-red: var(--red-40);
  --accent-foreground-pink: rgb(232, 70, 205);
  --accent-foreground-cyan: var(--cyan-40);
  --accent-background-violet: var(--violet-95);
  --accent-background-blue: var(--blue-95);
  --accent-background-pink: var(--pink-95);
  --accent-background-cyan: var(--cyan-95);

  /* Brand gradient (the Wanted symbol's blue→pink→orange sweep) */
  --gradient-wanted: linear-gradient(120deg, rgb(0, 102, 255) 0%, rgb(151, 71, 255) 48%, rgb(255, 94, 0) 100%); /* @kind other */
}

/* =================== SEMANTIC — dark ======================== */
:root[data-theme="dark"], .dark {
  --primary-normal: var(--blue-60);
  --primary-strong: var(--blue-65, rgb(79, 149, 255));
  --primary-heavy: var(--blue-50);
  --primary-assistive: rgba(0, 102, 255, 0.16);

  --label-strong: rgb(255, 255, 255);
  --label-normal: rgb(246, 246, 247);
  --label-neutral: rgba(246, 246, 247, 0.88);
  --label-alternative: rgba(237, 238, 241, 0.61);
  --label-assistive: rgba(237, 238, 241, 0.28);
  --label-disable: rgba(237, 238, 241, 0.16);

  --background-normal: rgb(27, 28, 30);
  --background-normal-alternative: rgb(15, 15, 16);
  --background-elevated: rgb(33, 34, 37);
  --background-elevated-alternative: rgb(20, 20, 21);

  --fill-alternative: rgba(112, 115, 124, 0.12);
  --fill-normal: rgba(112, 115, 124, 0.22);
  --fill-strong: rgba(112, 115, 124, 0.36);

  --line-alternative: rgba(112, 115, 124, 0.16);
  --line-neutral: rgba(112, 115, 124, 0.28);
  --line-normal: rgba(112, 115, 124, 0.36);
  --line-strong: rgba(112, 115, 124, 0.62);

  --inverse-background: var(--cool-neutral-99);
  --inverse-label: var(--cool-neutral-15);

  --accent-background-violet: rgba(101, 65, 242, 0.24);
  --accent-background-blue: rgba(0, 102, 255, 0.24);
  --accent-background-pink: rgba(245, 83, 218, 0.24);
  --accent-background-cyan: rgba(0, 189, 222, 0.24);
}