/* =========================================
   Design System Color Tokens
   =========================================

   IMPORTANT: Never use primitives (Layer 1) directly in component code.
   Always reference semantic tokens (Layer 2). If a semantic token doesn't
   exist for your use case, add one here that maps to a primitive.
*/

:root {
  /* ============================================================
     LAYER 1: PRIMITIVES — Color Scales (0–900)
     ============================================================ */

  /* Grey — true neutral UI scale, very slight cool lean */
  --grey-0: #FEFEFE;
  --grey-50: #FAFAFA;
  --grey-100: #F2F2F3;
  --grey-200: #E6E6E7;
  --grey-300: #D4D4D6;
  --grey-400: #929295;
  --grey-500: #6F6F72;
  --grey-600: #565659;
  --grey-700: #404042;
  --grey-800: #2D2D2F;
  --grey-900: #1C1C1E;

  /* Blue */
  --blue-0: #FCFFFF;
  --blue-50: #F1FEFF;
  --blue-100: #E0F1F4;
  --blue-200: #BFDFE6;
  --blue-300: #9FCEDB;
  --blue-400: #6BAFC4;
  --blue-500: #047897;
  --blue-600: #025F78;
  --blue-700: #054F6A;
  --blue-800: #044055;
  --blue-900: #03303F;

  /* Pink */
  --pink-0: #FFFCFE;
  --pink-50: #FFF9FF;
  --pink-100: #F5E8F3;
  --pink-200: #EAC3E4;
  --pink-300: #DC9ED3;
  --pink-400: #CB62BB;
  --pink-500: #A81696;
  --pink-600: #8A1079;
  --pink-700: #6C0B5E;
  --pink-800: #55094B;
  --pink-900: #3E0638;

  /* Orange */
  --orange-0: #FFFCFB;
  --orange-50: #FFF9F5;
  --orange-100: #FAEADE;
  --orange-200: #EED4BF;
  --orange-300: #DBB397;
  --orange-400: #CC8F66;
  --orange-500: #9A5E2A;
  --orange-600: #74431A;
  --orange-700: #563010;
  --orange-800: #3D2009;
  --orange-900: #281204;

  /* Green */
  --green-0: #F5FEF9;
  --green-50: #F2FEF8;
  --green-100: #E0F4EA;
  --green-200: #C0E5D2;
  --green-300: #98D4B6;
  --green-400: #3EA676;
  --green-500: #0A7B54;
  --green-600: #066141;
  --green-700: #044F34;
  --green-800: #033F29;
  --green-900: #022F1E;

  /* Red */
  --red-0: #FFFBFB;
  --red-50: #FFF5F5;
  --red-100: #FBE0E0;
  --red-200: #F0C4C4;
  --red-300: #E09C9C;
  --red-400: #CC6464;
  --red-500: #A11B1B;
  --red-600: #811212;
  --red-700: #660D0D;
  --red-800: #500A0A;
  --red-900: #3B0707;

  /* Yellow (400 is bg-only per warm-hue exception) */
  --yellow-0: #FFFEFB;
  --yellow-50: #FFFDF5;
  --yellow-100: #FBF2DA;
  --yellow-200: #F0E2B8;
  --yellow-300: #DBCA8A;
  --yellow-400: #C0A64E;
  --yellow-500: #866B0E;
  --yellow-600: #6A5308;
  --yellow-700: #534005;
  --yellow-800: #403103;
  --yellow-900: #2E2302;

  /* Purple */
  --purple-0: #FDFCFF;
  --purple-50: #FAF7FF;
  --purple-100: #F0E8FE;
  --purple-200: #DFD0FC;
  --purple-300: #C9B0F8;
  --purple-400: #A882F2;
  --purple-500: #8B5CF6;
  --purple-600: #7240D9;
  --purple-700: #5B2FB5;
  --purple-800: #462493;
  --purple-900: #331A6E;

  /* ============================================================
     LAYER 2: SEMANTIC TOKENS — Purpose-driven
     ============================================================ */

  /* ---- Core ---- */
  --bg-canvas: var(--grey-0);
  --bg-surface-1: var(--grey-50);
  --bg-surface-2: var(--grey-200);
  --bg-surface-3: var(--grey-400);
  --bg-inverse: var(--grey-800);
  --bg-inverse-subtle: var(--grey-700);
  --bg-inverse-surface: var(--grey-600);
  --overlay: rgba(28, 28, 24, 0.5);
  --transparent: rgba(255, 255, 255, 0);

  /* Hover */
  --hover-surface: var(--grey-100);
  --hover-on-surface: var(--grey-50);

  /* Navigation */
  --nav-surface: var(--grey-100);
  --nav-border: var(--grey-200);
  --nav-hover: var(--grey-200);
  --nav-selected: var(--grey-300);

  /* ---- Foreground (text, icons, UI marks) ---- */
  --fg-primary: var(--grey-900);
  --fg-secondary: var(--grey-700);
  --fg-tertiary: var(--grey-600);
  --fg-disabled: var(--grey-300);
  --fg-placeholder: var(--grey-400);
  --fg-inverse: var(--grey-50);
  --fg-inverse-secondary: var(--grey-300);

  /* ---- Borders ---- */
  --border-subtle: var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong: var(--grey-400);
  --border-focus: var(--blue-500);
  --border-inverse: rgba(255, 255, 255, 0.12);
  --border-inverse-strong: rgba(255, 255, 255, 0.20);

  /* ---- Accent (Blue) ---- */
  --accent-default: var(--blue-500);
  --accent-hover: var(--blue-400);
  --accent-subtle: var(--blue-200);
  --accent-surface-stroke: var(--blue-100);
  --accent-surface-hover: var(--blue-0);
  --accent-surface: var(--blue-50);
  --accent-bg: var(--blue-0);

  /* ---- Success (Green) ---- */
  --success-default: var(--green-500);
  --success-hover: var(--green-400);
  --success-subtle: var(--green-200);
  --success-surface-stroke: var(--green-100);
  --success-surface-hover: var(--green-0);
  --success-surface: var(--green-50);
  --success-bg: var(--green-0);

  /* ---- Error (Red) ---- */
  --error-default: var(--red-500);
  --error-hover: var(--red-400);
  --error-subtle: var(--red-200);
  --error-surface-stroke: var(--red-100);
  --error-surface-hover: var(--red-0);
  --error-surface: var(--red-50);
  --error-bg: var(--red-0);

  /* ---- Warning (Yellow) ---- */
  --warning-default: var(--yellow-500);
  --warning-hover: var(--yellow-400);
  --warning-subtle: var(--yellow-200);
  --warning-surface-stroke: var(--yellow-100);
  --warning-surface-hover: var(--yellow-0);
  --warning-surface: var(--yellow-50);
  --warning-bg: var(--yellow-0);

  /* ---- Pink ---- */
  --pink-default: var(--pink-500);
  --pink-hover: var(--pink-400);
  --pink-subtle: var(--pink-200);
  --pink-surface-stroke: var(--pink-100);
  --pink-surface-hover: var(--pink-0);
  --pink-surface: var(--pink-50);
  --pink-bg: var(--pink-0);

  /* ---- Orange ---- */
  --orange-default: var(--orange-500);
  --orange-hover: var(--orange-400);
  --orange-subtle: var(--orange-200);
  --orange-surface-stroke: var(--orange-100);
  --orange-surface-hover: var(--orange-0);
  --orange-surface: var(--orange-50);
  --orange-bg: var(--orange-0);
  --orange-disabled: var(--orange-300);

  /* ---- Purple ---- */
  --purple-default: var(--purple-500);
  --purple-hover: var(--purple-400);
  --purple-subtle: var(--purple-200);
  --purple-surface-stroke: var(--purple-100);
  --purple-surface-hover: var(--purple-0);
  --purple-surface: var(--purple-50);
  --purple-bg: var(--purple-0);

  /* ---- Border Shorthands ---- */
  --border-dashed-green: 1px dashed var(--green-500);
  --border-dashed-orange: 1px dashed var(--orange-500);
  --border-dashed-subtle: 1px dashed var(--border-subtle);
}

/* ============================================================
   DARK MODE — Semantic token overrides
   Primitives stay identical. Only the semantic mappings change.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* ---- Core ---- */
    --bg-canvas: var(--grey-900);
    --bg-surface-1: var(--grey-800);
    --bg-surface-2: var(--grey-700);
    --bg-surface-3: var(--grey-600);
    --bg-inverse: var(--grey-50);
    --bg-inverse-subtle: var(--grey-100);
    --bg-inverse-surface: var(--grey-200);
    --overlay: rgba(0, 0, 0, 0.6);
    --transparent: rgba(0, 0, 0, 0);

    /* Hover */
    --hover-surface: var(--grey-700);
    --hover-on-surface: var(--grey-800);

    /* Navigation */
    --nav-surface: var(--grey-700);
    --nav-border: var(--grey-600);
    --nav-hover: var(--grey-600);
    --nav-selected: var(--grey-500);

    /* ---- Foreground (text, icons, UI marks) ---- */
    --fg-primary: var(--grey-50);
    --fg-secondary: var(--grey-200);
    --fg-tertiary: var(--grey-300);
    --fg-disabled: var(--grey-600);
    --fg-placeholder: var(--grey-500);
    --fg-inverse: var(--grey-900);
    --fg-inverse-secondary: var(--grey-600);

    /* ---- Borders ---- */
    --border-subtle: var(--grey-700);
    --border-default: var(--grey-600);
    --border-strong: var(--grey-500);
    --border-focus: var(--blue-400);
    --border-inverse: rgba(0, 0, 0, 0.12);
    --border-inverse-strong: rgba(0, 0, 0, 0.20);

    /* ---- Accent (Blue) ---- */
    --accent-default: var(--blue-400);
    --accent-hover: var(--blue-300);
    --accent-subtle: var(--blue-700);
    --accent-surface-stroke: var(--blue-700);
    --accent-surface-hover: var(--blue-700);
    --accent-surface: var(--blue-800);
    --accent-bg: var(--blue-900);

    /* ---- Success (Green) ---- */
    --success-default: var(--green-400);
    --success-hover: var(--green-300);
    --success-subtle: var(--green-700);
    --success-surface-stroke: var(--green-700);
    --success-surface-hover: var(--green-700);
    --success-surface: var(--green-800);
    --success-bg: var(--green-900);

    /* ---- Error (Red) ---- */
    --error-default: var(--red-400);
    --error-hover: var(--red-300);
    --error-subtle: var(--red-700);
    --error-surface-stroke: var(--red-700);
    --error-surface-hover: var(--red-700);
    --error-surface: var(--red-800);
    --error-bg: var(--red-900);

    /* ---- Warning (Yellow) ---- */
    --warning-default: var(--yellow-400);
    --warning-hover: var(--yellow-300);
    --warning-subtle: var(--yellow-700);
    --warning-surface-stroke: var(--yellow-700);
    --warning-surface-hover: var(--yellow-700);
    --warning-surface: var(--yellow-800);
    --warning-bg: var(--yellow-900);

    /* ---- Pink ---- */
    --pink-default: var(--pink-400);
    --pink-hover: var(--pink-300);
    --pink-subtle: var(--pink-700);
    --pink-surface-stroke: var(--pink-700);
    --pink-surface-hover: var(--pink-700);
    --pink-surface: var(--pink-800);
    --pink-bg: var(--pink-900);

    /* ---- Orange ---- */
    --orange-default: var(--orange-400);
    --orange-hover: var(--orange-300);
    --orange-subtle: var(--orange-700);
    --orange-surface-stroke: var(--orange-700);
    --orange-surface-hover: var(--orange-700);
    --orange-surface: var(--orange-800);
    --orange-bg: var(--orange-900);
    --orange-disabled: var(--orange-600);

    /* ---- Purple ---- */
    --purple-default: var(--purple-400);
    --purple-hover: var(--purple-300);
    --purple-subtle: var(--purple-700);
    --purple-surface-stroke: var(--purple-700);
    --purple-surface-hover: var(--purple-700);
    --purple-surface: var(--purple-800);
    --purple-bg: var(--purple-900);

    /* ---- Border Shorthands ---- */
    --border-dashed-green: 1px dashed var(--green-400);
    --border-dashed-orange: 1px dashed var(--orange-400);
    --border-dashed-subtle: 1px dashed var(--border-subtle);
  }
}