/* ============================================================
   FlowSpace — Color tokens
   Two layers: primitive palettes + semantic role aliases.
   Components reference SEMANTIC tokens, never primitives.
   ============================================================ */

:root {

  /* ── Brand — Indigo ───────────────────────────── */
  --color-brand-50:  #EEF2FF;
  --color-brand-100: #E0E7FF;
  --color-brand-200: #C7D2FE;
  --color-brand-300: #A5B4FC;
  --color-brand-400: #818CF8;
  --color-brand-500: #6366F1;
  --color-brand-600: #4F46E5;  /* default interactive */
  --color-brand-700: #4338CA;
  --color-brand-800: #3730A3;
  --color-brand-900: #312E81;
  --color-brand-950: #1E1B4B;

  /* ── Neutral — Gray ───────────────────────────── */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #111827;
  --color-neutral-950: #030712;

  /* ── Teal — Secondary accent ──────────────────── */
  --color-teal-50:  #F0FDFA;
  --color-teal-100: #CCFBF1;
  --color-teal-200: #99F6E4;
  --color-teal-300: #5EEAD4;
  --color-teal-400: #2DD4BF;
  --color-teal-500: #14B8A6;
  --color-teal-600: #0D9488;  /* secondary default */
  --color-teal-700: #0F766E;
  --color-teal-800: #115E59;
  --color-teal-900: #134E4A;

  /* ── Success — Green ──────────────────────────── */
  --color-success-50:  #F0FDF4;
  --color-success-100: #DCFCE7;
  --color-success-200: #BBF7D0;
  --color-success-300: #86EFAC;
  --color-success-400: #4ADE80;
  --color-success-500: #22C55E;
  --color-success-600: #16A34A;
  --color-success-700: #15803D;
  --color-success-800: #166534;
  --color-success-900: #14532D;

  /* ── Warning — Amber ──────────────────────────── */
  --color-warning-50:  #FFFBEB;
  --color-warning-100: #FEF3C7;
  --color-warning-200: #FDE68A;
  --color-warning-300: #FCD34D;
  --color-warning-400: #FBBF24;
  --color-warning-500: #F59E0B;
  --color-warning-600: #D97706;
  --color-warning-700: #B45309;
  --color-warning-800: #92400E;
  --color-warning-900: #78350F;

  /* ── Error — Red ──────────────────────────────── */
  --color-error-50:  #FEF2F2;
  --color-error-100: #FEE2E2;
  --color-error-200: #FECACA;
  --color-error-300: #FCA5A5;
  --color-error-400: #F87171;
  --color-error-500: #EF4444;
  --color-error-600: #DC2626;
  --color-error-700: #B91C1C;
  --color-error-800: #991B1B;
  --color-error-900: #7F1D1D;


  /* ============================================================
     SEMANTIC COLORS — use these in components
     ============================================================ */

  /* Brand / Interactive */
  --color-interactive-default:  var(--color-brand-600);
  --color-interactive-hover:    var(--color-brand-700);
  --color-interactive-active:   var(--color-brand-800);
  --color-interactive-disabled: var(--color-neutral-300);
  --color-interactive-subtle:   var(--color-brand-50);
  --color-interactive-on-brand: var(--color-neutral-0);

  /* Secondary / Teal */
  --color-secondary-default: var(--color-teal-600);
  --color-secondary-hover:   var(--color-teal-700);
  --color-secondary-subtle:  var(--color-teal-50);
  --color-secondary-on:      var(--color-neutral-0);

  /* Backgrounds */
  --color-bg-base:     var(--color-neutral-0);
  --color-bg-subtle:   var(--color-neutral-50);
  --color-bg-muted:    var(--color-neutral-100);
  --color-bg-emphasis: var(--color-neutral-800);
  --color-bg-overlay:  rgba(17, 24, 39, 0.48);
  --color-bg-brand:    var(--color-brand-600);

  /* Surfaces */
  --color-surface-default: var(--color-neutral-0);
  --color-surface-raised:  var(--color-neutral-0);
  --color-surface-overlay: var(--color-neutral-0);
  --color-surface-sunken:  var(--color-neutral-100);

  /* Borders */
  --color-border-default: var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);
  --color-border-focus:   var(--color-brand-500);
  --color-border-error:   var(--color-error-500);
  --color-border-success: var(--color-success-600);

  /* Foreground / Text */
  --color-text-primary:    #212121;
  --color-text-secondary:  var(--color-neutral-600);
  --color-text-muted:      var(--color-neutral-400);
  --color-text-disabled:   var(--color-neutral-300);
  --color-text-inverse:    var(--color-neutral-0);
  --color-text-brand:      var(--color-brand-600);
  --color-text-success:    var(--color-success-700);
  --color-text-warning:    var(--color-warning-700);
  --color-text-error:      var(--color-error-600);
  --color-text-link:       var(--color-brand-600);
  --color-text-link-hover: var(--color-brand-700);

  /* Status / Feedback */
  --color-feedback-success-bg:     var(--color-success-50);
  --color-feedback-success-text:   var(--color-success-700);
  --color-feedback-success-border: var(--color-success-200);
  --color-feedback-warning-bg:     var(--color-warning-50);
  --color-feedback-warning-text:   var(--color-warning-700);
  --color-feedback-warning-border: var(--color-warning-200);
  --color-feedback-error-bg:       var(--color-error-50);
  --color-feedback-error-text:     var(--color-error-700);
  --color-feedback-error-border:   var(--color-error-200);
  --color-feedback-info-bg:        var(--color-brand-50);
  --color-feedback-info-text:      var(--color-brand-700);
  --color-feedback-info-border:    var(--color-brand-200);
}


/* ============================================================
   DARK MODE — apply via [data-theme="dark"] on <html>
   ============================================================ */
[data-theme="dark"] {
  --color-bg-base:   #0F0F13;
  --color-bg-subtle: #17171E;
  --color-bg-muted:  #1E1E28;

  --color-surface-default: #17171E;
  --color-surface-raised:  #1E1E28;
  --color-surface-sunken:  #0F0F13;

  --color-border-default: rgba(255, 255, 255, 0.08);
  --color-border-strong:  rgba(255, 255, 255, 0.16);

  --color-text-primary:   #F9FAFB;
  --color-text-secondary: #D1D5DB;
  --color-text-muted:     #6B7280;
  --color-text-disabled:  #374151;
  --color-text-inverse:   #111827;

  --color-interactive-default: var(--color-brand-400);
  --color-interactive-hover:   var(--color-brand-300);
  --color-interactive-subtle:  rgba(99, 102, 241, 0.12);

  --color-text-brand: var(--color-brand-400);
  --color-text-link:  var(--color-brand-400);
}