/* ============================================================
   Colors — Design Tokens
   Yaz Design System v1.0
   ============================================================ */

:root {
  /* ── Neutral Scale ── */
  --neutral-0: #ffffff;
  --neutral-50: #f8f9fa;
  --neutral-100: #f1f3f5;
  --neutral-200: #e9ecef;
  --neutral-300: #dee2e6;
  --neutral-400: #ced4da;
  --neutral-500: #adb5bd;
  --neutral-600: #868e96;
  --neutral-700: #495057;
  --neutral-800: #343a40;
  --neutral-900: #212529;
  --neutral-950: #0d1117;
  --neutral-1000: #08090a;

  /* ── Semantic (dark default) ── */
  --color-bg-primary: var(--neutral-1000);
  --color-bg-secondary: var(--neutral-950);
  --color-bg-tertiary: var(--neutral-900);
  --color-bg-elevated: var(--neutral-900);
  --color-bg-glass: rgba(255, 255, 255, 0.05);
  --color-border-primary: var(--neutral-800);
  --color-border-secondary: rgba(255, 255, 255, 0.06);
  --color-border-focus: var(--brand-500);
  --color-text-primary: var(--neutral-0);
  --color-text-secondary: var(--neutral-400);
  --color-text-tertiary: var(--neutral-500);
  --color-text-inverse: var(--neutral-900);
  --color-text-link: var(--brand-500);

  /* ── Status ──
     Dark-mode values (this block) already clear WCAG AA as text on
     --color-bg-primary/--color-bg-secondary (dark): success #10b981 ≈7.4:1,
     error #ef4444 ≈5.6:1 on neutral-1000. Only the LIGHT override below needed
     a fix — see its comment. Kept identical to what the customer app's
     src/constants/theme.ts already shipped (Colors.dark), so consumers do not
     see two different "correct" dark reds/greens. */
  --color-success: #10b981;
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-warning: #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-error: #ef4444;
  --color-error-bg: rgba(239, 68, 68, 0.1);
  --color-info: #3b82f6;
  --color-info-bg: rgba(59, 130, 246, 0.1);
  --color-purple: #8b5cf6;
  --color-purple-bg: rgba(139, 92, 246, 0.1);

  /* ── Glassmorphism ── */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --glass-blur: blur(20px);
  --glass-saturate: saturate(180%);
}

/* ── Light Mode Override ── */
[data-theme="light"],
.theme-light {
  --color-bg-primary: var(--neutral-50);
  --color-bg-secondary: var(--neutral-0);
  --color-bg-tertiary: var(--neutral-100);
  --color-bg-elevated: var(--neutral-0);
  --color-bg-glass: rgba(255, 255, 255, 0.7);
  --color-border-primary: var(--neutral-200);
  --color-border-secondary: var(--neutral-100);
  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-text-tertiary: var(--neutral-500);
  --color-text-inverse: var(--neutral-0);

  /* ── Status, light mode ── (proposed fix, contrast-aa branch)
     The dark-mode --color-success/--color-error (above) pass AA as text on
     the dark backgrounds, but light mode inherited the SAME two values, and
     they fail AA as text on --color-bg-primary (neutral-50 #f8f9fa):
       --color-success #10b981 on #f8f9fa  →  2.54:1  (needs 4.5:1)
       --color-error   #ef4444 on #f8f9fa  →  3.76:1  (needs 4.5:1)
     the customer app hit exactly this and fixed it (src/constants/theme.ts,
     Colors.light.success/danger, audit A3 2026-09-20) with darker tones that
     clear AA on both its `background` and `surface`:
       #047857 on #f8f9fa  →  4.96:1   #c62828 on #f8f9fa  →  5.09:1
     Reused verbatim here rather than re-deriving a third pair — this is a
     token *value* override for light mode, not a new token name, so any
     existing `var(--color-success)`/`var(--color-error)` usage picks it up
     automatically. Dark mode is untouched (already correct, see above). */
  --color-success: #047857;
  --color-success-bg: rgba(4, 120, 87, 0.1);
  --color-error: #c62828;
  --color-error-bg: rgba(198, 40, 40, 0.1);

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-hover: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-hover: rgba(0, 0, 0, 0.15);
}