/* ============================================================
   Wanted Design System — Semantic Color Tokens
   These are the ONLY colors product UI should reference.
   Each maps to a palette value and flips automatically in dark mode.
   Dark mode: add [data-theme="dark"] (or class .dark) to a root element.
   ============================================================ */

:root {
  /* ---- Label (text / foreground) ---- */
  --label-strong: var(--common-0);              /* highest emphasis  */
  --label-normal: rgb(23, 23, 23);              /* default body text */
  --label-neutral: rgba(46, 47, 51, 0.88);      /* secondary text    */
  --label-alternative: rgba(55, 56, 60, 0.61);  /* tertiary / captions */
  --label-assistive: rgba(55, 56, 60, 0.28);    /* placeholder       */
  --label-disable: rgba(55, 56, 60, 0.16);      /* disabled text     */

  /* ---- Primary (brand blue) ---- */
  --primary-normal: var(--blue-50);   /* #0066FF — the Wanted blue */
  --primary-strong: var(--blue-45);   /* hover / pressed           */
  --primary-heavy: var(--blue-40);    /* deepest                   */
  --primary-alt: rgb(51, 102, 255);   /* #3366FF alternate primary */

  /* ---- Background (page & surface fills) ---- */
  --background-normal: var(--common-100);          /* page base       */
  --background-alternative: var(--cool-neutral-99); /* subtle section  */
  --background-elevated: var(--common-100);        /* cards / sheets  */
  --background-transparent: rgba(255, 255, 255, 0.08);

  /* ---- Line (borders & dividers) ---- */
  --line-normal-alternative: rgba(112, 115, 124, 0.08);
  --line-normal-neutral: rgba(112, 115, 124, 0.16);
  --line-normal-normal: rgba(112, 115, 124, 0.22);
  --line-normal-strong: rgba(112, 115, 124, 0.52);
  --line-solid-alternative: var(--cool-neutral-98);
  --line-solid-neutral: var(--cool-neutral-97);
  --line-solid-normal: var(--cool-neutral-96);
  --line-solid-strong: var(--cool-neutral-80);

  /* ---- Fill (translucent gray surfaces: chips, fields, hovers) ---- */
  --fill-alternative: rgba(112, 115, 124, 0.05);
  --fill-normal: rgba(112, 115, 124, 0.08);
  --fill-strong: rgba(112, 115, 124, 0.16);

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

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

  /* ---- Inverse (for overlays on dark / inverse surfaces) ---- */
  --inverse-background: var(--cool-neutral-15);
  --inverse-label: var(--cool-neutral-99);
  --inverse-primary: var(--blue-60);

  /* ---- Static (never flips with theme) ---- */
  --static-black: var(--common-0);
  --static-white: var(--common-100);

  /* ---- Accent foreground (text/icon) ---- */
  --accent-foreground-blue: var(--blue-45);
  --accent-foreground-cyan: var(--cyan-40);
  --accent-foreground-green: var(--green-40);
  --accent-foreground-light-blue: var(--light-blue-40);
  --accent-foreground-lime: var(--lime-37);
  --accent-foreground-orange: var(--orange-39);
  --accent-foreground-pink: var(--pink-46);
  --accent-foreground-purple: var(--purple-40);
  --accent-foreground-red: var(--red-40);
  --accent-foreground-red-orange: var(--red-orange-48);
  --accent-foreground-violet: var(--violet-45);

  /* ---- Accent background (tinted surfaces) ---- */
  --accent-background-cyan: var(--cyan-50);
  --accent-background-light-blue: var(--light-blue-50);
  --accent-background-lime: var(--lime-50);
  --accent-background-pink: var(--pink-50);
  --accent-background-purple: var(--purple-50);
  --accent-background-red-orange: var(--red-orange-50);
  --accent-background-violet: var(--violet-50);

  /* ---- Material (scrims / dimmers behind modals) ---- */
  --material-dimmer: rgba(23, 23, 25, 0.52);
}

:root[data-theme="dark"],
.dark {
  --label-strong: var(--common-100);
  --label-normal: rgb(247, 247, 247);
  --label-neutral: rgba(194, 196, 200, 0.88);
  --label-alternative: rgba(174, 176, 182, 0.61);
  --label-assistive: rgba(174, 176, 182, 0.28);
  --label-disable: rgba(152, 155, 162, 0.16);

  --primary-normal: var(--blue-60);
  --primary-strong: var(--blue-55);
  --primary-heavy: var(--blue-50);
  --primary-alt: rgb(91, 132, 255);

  --background-normal: rgb(27, 28, 30);
  --background-alternative: var(--cool-neutral-5);
  --background-elevated: var(--cool-neutral-17);
  --background-transparent: rgba(33, 34, 37, 0.61);

  --line-normal-alternative: rgba(112, 115, 124, 0.22);
  --line-normal-neutral: rgba(112, 115, 124, 0.28);
  --line-normal-normal: rgba(112, 115, 124, 0.32);
  --line-normal-strong: rgba(194, 196, 200, 0.52);
  --line-solid-alternative: var(--cool-neutral-22);
  --line-solid-neutral: var(--cool-neutral-23);
  --line-solid-normal: var(--cool-neutral-25);
  --line-solid-strong: var(--cool-neutral-50);

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

  --status-positive: var(--green-60);
  --status-negative: var(--red-60);
  --status-cautionary: var(--orange-60);

  --interaction-disable: var(--cool-neutral-22);
  --interaction-inactive: var(--cool-neutral-40);

  --inverse-background: var(--common-100);
  --inverse-label: var(--cool-neutral-10);
  --inverse-primary: var(--blue-50);

  --accent-foreground-blue: var(--blue-65);
  --accent-foreground-cyan: var(--cyan-50);
  --accent-foreground-green: var(--green-60);
  --accent-foreground-light-blue: var(--light-blue-50);
  --accent-foreground-lime: var(--lime-50);
  --accent-foreground-orange: var(--orange-50);
  --accent-foreground-pink: var(--pink-60);
  --accent-foreground-purple: var(--purple-60);
  --accent-foreground-red: var(--red-60);
  --accent-foreground-red-orange: var(--red-orange-60);
  --accent-foreground-violet: var(--violet-70);

  --accent-background-cyan: var(--cyan-60);
  --accent-background-light-blue: var(--light-blue-60);
  --accent-background-lime: var(--lime-60);
  --accent-background-pink: var(--pink-60);
  --accent-background-purple: var(--purple-60);
  --accent-background-red-orange: var(--red-orange-60);
  --accent-background-violet: var(--violet-60);

  --material-dimmer: rgba(23, 23, 25, 0.74);
}