/* QuickLitmus — color tokens. Light mode only. */
:root {
  /* Base — ink scale (cool gray) */
  --ink-900: #111827;
  --ink-700: #374151;
  --ink-600: #4B5563;
  --ink-500: #6B7280;
  --ink-400: #9CA3AF;
  --ink-300: #D1D5DB;
  --ink-200: #E5E7EB;
  --ink-150: #EEF0F3;
  --ink-100: #F3F4F6;
  --ink-50:  #F9FAFB;
  --white:   #FFFFFF;

  /* Base — blue scale (brand — "Litmus Blue", custom oklch-tuned classic blue) */
  --blue-900: #0E2E7E;
  --blue-800: #10399F;
  --blue-700: #1448CD;
  --blue-600: #1A5AF5;
  --blue-500: #3D74F7;
  --blue-300: #96B5FB;
  --blue-100: #DEE9FE;
  --blue-50:  #EBF1FF;

  /* Base — green scale (success / positive signal) */
  --green-900: #14532D;
  --green-800: #166534;
  --green-700: #15803D;
  --green-600: #16A34A;
  --green-500: #22C55E;
  --green-300: #86EFAC;
  --green-100: #DCFCE7;
  --green-50:  #F0FDF4;

  /* Base — semantic hues (Tailwind rose / amber / sky) */
  --red-600: #E11D48;
  --red-50:  #FFF1F2;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-50:  #FFFBEB;
  --sky-500: #0EA5E9;
  --sky-600: #0284C7;
  --sky-50:  #F0F9FF;

  /* Semantic — text */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-500);
  --text-placeholder: var(--ink-400);
  --text-on-accent: var(--white);
  --text-brand: var(--blue-700);
  --text-link: var(--blue-700);

  /* Semantic — surfaces */
  --surface-page: var(--ink-50);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-100);
  --surface-header: var(--ink-50);
  --surface-tint: var(--blue-50);
  --surface-ink: var(--ink-900);

  /* Semantic — borders */
  --border-default: var(--ink-200);
  --border-hairline: var(--ink-150);
  --border-strong: var(--ink-300);
  --border-focus: var(--blue-600);
  --border-selected: var(--blue-600);

  /* Semantic — actions.
     Buttons/filled actions use blue-700: white-on-blue-600 is ~4.2:1 (borderline for
     button text); 700 is ~6.5:1. blue-600 stays the brand/graphics blue (bars, dots,
     borders, icons, wordmark — 3:1 non-text rule). Blue TEXT is always ≥ blue-700. */
  --action-primary: var(--blue-700);
  --action-primary-hover: var(--blue-800);
  --action-primary-active: var(--blue-900);
  --action-ink: var(--ink-900);
  --action-ink-hover: #1F2937;

  /* Semantic — status. Green = positive signal (live, success, significant); TEXT ≥ green-700. */
  --status-live: var(--green-700);
  --status-success: var(--green-700);
  --status-success-bg: var(--green-50);
  --status-error: var(--red-600);
  --status-error-bg: var(--red-50);
  --status-warning: var(--amber-600);
  --status-warning-bg: var(--amber-50);
  --status-info: var(--sky-600);
  --status-info-bg: var(--sky-50);

  /* Data viz (bars, charts) — blue leads; green is reserved for positive/significant signals */
  --data-1: var(--blue-600);
  --data-2: var(--blue-300);
  --data-3: var(--ink-900);
  --data-4: var(--ink-400);
  --data-rest: var(--ink-200);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(26, 90, 245, 0.22);
}