/* ============================================================================
   themes.css — semantic tokens. Components consume ONLY these (never raw
   primitives), so a single mapping switch flips the whole UI light <-> dark.
   :root = light (default). [data-theme="dark"] overrides.
   ========================================================================== */

:root,
:root[data-theme="light"] {
  --color-bg:            var(--neutral-50);   /* #F8FAFC */
  --color-bg-subtle:     var(--neutral-100);
  --color-surface:       var(--neutral-0);
  --color-surface-2:     var(--neutral-50);
  --color-surface-raised:var(--neutral-0);

  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);

  --color-text:          var(--neutral-900);
  --color-text-muted:    var(--neutral-600);
  --color-text-subtle:   var(--neutral-400);
  --color-text-invert:   var(--neutral-0);

  --color-primary:       var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-press: var(--blue-800);
  --color-primary-contrast: #ffffff;
  --color-primary-soft:  var(--blue-50);
  --color-primary-ring:  rgba(37, 99, 235, 0.28);

  --color-success: var(--green-500);
  --color-warn:    var(--amber-500);
  --color-danger:  var(--red-500);

  /* Surface used for the dark "invert" band (CTA) even in light mode */
  --color-invert-bg:   var(--ink-800);
  --color-invert-text: var(--neutral-50);

  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg:            var(--ink-800);      /* #1A1A22 */
  --color-bg-subtle:     var(--ink-900);
  --color-surface:       var(--ink-700);
  --color-surface-2:     var(--ink-600);
  --color-surface-raised:var(--ink-600);

  --color-border:        var(--ink-500);
  --color-border-strong: var(--ink-400);

  --color-text:          var(--neutral-100);
  --color-text-muted:    #a7adba;
  --color-text-subtle:   #6b7280;
  --color-text-invert:   var(--ink-900);

  --color-primary:       #4d84f5;             /* lifted for contrast on dark */
  --color-primary-hover: #6b9bf7;
  --color-primary-press: var(--blue-400);
  --color-primary-contrast: #0b1220;
  --color-primary-soft:  rgba(77, 132, 245, 0.14);
  --color-primary-ring:  rgba(77, 132, 245, 0.4);

  --color-invert-bg:   var(--neutral-100);
  --color-invert-text: var(--ink-800);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Kit compatibility aliases.
   The React UI kit (assets/jsx/icons.jsx — Toast/Modal/Dropdown/Avatar/Switch)
   uses short legacy token names. Map them once to our semantic tokens; because
   each alias resolves var(--color-*) at use-time, they follow light/dark
   automatically (no need to redeclare in the dark block).
   -------------------------------------------------------------------------- */
:root {
  --surface:        var(--color-surface);
  --border:         var(--color-border);
  --border-strong:  var(--color-border-strong);
  --bg-3:           var(--color-bg-subtle);
  --text:           var(--color-text);
  --text-dim:       var(--color-text-subtle);
  --primary-hsl:    var(--color-primary);
  --success:        var(--color-success);
  --danger:         var(--color-danger);
}