/* ============================================================
   DOMAIN · COLOR TOKENS
   Base ramps (raw values) + semantic aliases (what components use).
   Light theme on :root; dark theme under [data-theme="dark"].
   Components should reference SEMANTIC aliases only.
   ============================================================ */
:root {
  /* --- Neutral (cool slate) --- */
  --neutral-0:   #ffffff;
  --neutral-25:  #fbfcfd;
  --neutral-50:  #f6f8fa;
  --neutral-100: #eef1f5;
  --neutral-150: #e5e9ef;
  --neutral-200: #dae0e8;
  --neutral-300: #c2cbd6;
  --neutral-400: #97a2b0;
  --neutral-500: #6c7889;
  --neutral-600: #4f5b6b;
  --neutral-700: #394351;
  --neutral-800: #262e39;
  --neutral-900: #171d25;
  --neutral-950: #0d1117;

  /* --- Brand (trustworthy blue) --- */
  --brand-50:  #eef3ff;
  --brand-100: #dde6ff;
  --brand-200: #c1d1ff;
  --brand-300: #98b3ff;
  --brand-400: #6a8cff;
  --brand-500: #3f66f0;
  --brand-600: #2c4fd8;
  --brand-700: #243fae;
  --brand-800: #213788;
  --brand-900: #1f316c;

  /* --- Accent (teal — signals / secondary emphasis) --- */
  --accent-50:  #e9faf6;
  --accent-100: #c7f2e8;
  --accent-200: #94e6d4;
  --accent-300: #55d1bb;
  --accent-400: #22b89e;
  --accent-500: #0e9a84;
  --accent-600: #0a7c6b;
  --accent-700: #0b6255;
  --accent-800: #0c4e46;

  /* --- Success (green) --- */
  --green-50:  #e9f9ee;
  --green-100: #c9f0d5;
  --green-200: #97e2b0;
  --green-300: #57cd84;
  --green-500: #16a34a;
  --green-600: #128040;
  --green-700: #106435;

  /* --- Warning (amber) --- */
  --amber-50:  #fef6e7;
  --amber-100: #fce8c2;
  --amber-200: #f8d087;
  --amber-300: #f2b24b;
  --amber-500: #d98207;
  --amber-600: #b46905;
  --amber-700: #8f5206;

  /* --- Danger (red) --- */
  --red-50:  #fdecec;
  --red-100: #fbd3d3;
  --red-200: #f5a8a8;
  --red-300: #ee7676;
  --red-500: #dc2f2f;
  --red-600: #c01f1f;
  --red-700: #9c1a1a;

  /* --- Info (violet — distinct from brand for "why you're seeing this") --- */
  --violet-50:  #f1eefe;
  --violet-100: #e0d9fc;
  --violet-200: #c3b5f8;
  --violet-500: #6d4de0;
  --violet-600: #5a3bc4;
  --violet-700: #4a2fa0;

  /* ==========================================================
     SEMANTIC ALIASES · LIGHT
     ========================================================== */
  /* Surfaces */
  --surface-app:      var(--neutral-50);
  --surface-sunken:   var(--neutral-100);
  --surface-card:     var(--neutral-0);
  --surface-raised:   var(--neutral-0);
  --surface-overlay:  var(--neutral-0);
  --surface-inset:    var(--neutral-50);
  --surface-hover:    var(--neutral-100);
  --surface-active:   var(--neutral-150);
  --surface-selected: var(--brand-50);
  --surface-chrome:   var(--neutral-0);

  /* Borders */
  --border-subtle:  var(--neutral-150);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-selected: var(--brand-500);

  /* Text */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500);
  --text-disabled:  var(--neutral-400);
  --text-inverse:   var(--neutral-0);
  --text-brand:     var(--brand-600);
  --text-link:      var(--brand-600);

  /* Interactive — primary (brand) */
  --interactive-primary:        var(--brand-500);
  --interactive-primary-hover:  var(--brand-600);
  --interactive-primary-active: var(--brand-700);
  --interactive-primary-fg:     var(--neutral-0);

  /* Interactive — neutral / secondary */
  --interactive-neutral:        var(--neutral-0);
  --interactive-neutral-hover:  var(--neutral-100);
  --interactive-neutral-active: var(--neutral-150);

  /* Focus */
  --focus-ring: var(--brand-400);

  /* Status — foreground / background / border trios */
  --success-fg:     var(--green-700);
  --success-bg:     var(--green-50);
  --success-border: var(--green-200);
  --success-solid:  var(--green-500);

  --warning-fg:     var(--amber-700);
  --warning-bg:     var(--amber-50);
  --warning-border: var(--amber-200);
  --warning-solid:  var(--amber-500);

  --danger-fg:      var(--red-700);
  --danger-bg:      var(--red-50);
  --danger-border:  var(--red-200);
  --danger-solid:   var(--red-500);

  --info-fg:        var(--violet-700);
  --info-bg:        var(--violet-50);
  --info-border:    var(--violet-200);
  --info-solid:     var(--violet-500);

  --accent-fg:      var(--accent-700);
  --accent-bg:      var(--accent-50);
  --accent-border:  var(--accent-200);
  --accent-solid:   var(--accent-500);

  --brand-fg:       var(--brand-700);
  --brand-bg:       var(--brand-50);
  --brand-border:   var(--brand-200);

  color-scheme: light;
}

/* ============================================================
   SEMANTIC ALIASES · DARK
   ============================================================ */
[data-theme="dark"] {
  --surface-app:      var(--neutral-950);
  --surface-sunken:   #090c11;
  --surface-card:     var(--neutral-900);
  --surface-raised:   #1b222c;
  --surface-overlay:  #1b222c;
  --surface-inset:    #10151c;
  --surface-hover:    #1e2530;
  --surface-active:   #262e39;
  --surface-selected: #1a2540;
  --surface-chrome:   var(--neutral-900);

  --border-subtle:  #1f2732;
  --border-default: #2a333f;
  --border-strong:  #3a4553;
  --border-selected: var(--brand-400);

  --text-primary:   #eef1f5;
  --text-secondary: #a7b2c0;
  --text-tertiary:  #7a8698;
  --text-disabled:  #566173;
  --text-inverse:   var(--neutral-950);
  --text-brand:     var(--brand-300);
  --text-link:      var(--brand-300);

  --interactive-primary:        var(--brand-500);
  --interactive-primary-hover:  var(--brand-400);
  --interactive-primary-active: var(--brand-300);
  --interactive-primary-fg:     #0b1220;

  --interactive-neutral:        #1b222c;
  --interactive-neutral-hover:  #232b36;
  --interactive-neutral-active: #2b3542;

  --focus-ring: var(--brand-400);

  --success-fg:     var(--green-300);
  --success-bg:     #0f2418;
  --success-border: #1c4a30;
  --success-solid:  var(--green-500);

  --warning-fg:     var(--amber-300);
  --warning-bg:     #2a1e08;
  --warning-border: #573d12;
  --warning-solid:  var(--amber-500);

  --danger-fg:      var(--red-300);
  --danger-bg:      #2c1315;
  --danger-border:  #5a2427;
  --danger-solid:   var(--red-500);

  --info-fg:        var(--violet-200);
  --info-bg:        #1c1636;
  --info-border:    #37296b;
  --info-solid:     var(--violet-500);

  --accent-fg:      var(--accent-300);
  --accent-bg:      #062420;
  --accent-border:  #0d4a42;
  --accent-solid:   var(--accent-400);

  --brand-fg:       var(--brand-300);
  --brand-bg:       #14213f;
  --brand-border:   #26407a;

  color-scheme: dark;
}