/* ============================================================
   COLOR TOKENS
   Neutral-first palette in the Vercel/Geist spirit: near-black
   text on white surfaces, a restrained blue accent, sharp
   semantic colors for status. Dark theme via [data-theme="dark"].
   ============================================================ */

:root {
  /* ---- Base neutral scale (zinc-like, Radix-inspired) ---- */
  --gray-0: #ffffff;
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-150: #ececee;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --gray-950: #09090b;
  --gray-1000: #000000;

  /* ---- Accent (Vercel electric blue) ---- */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-300: #93c5fd;
  --blue-500: #3291ff;
  --blue-600: #0070f3;
  --blue-700: #0761d1;
  --blue-900: #0b2f66;

  /* ---- Semantic status ---- */
  --red-100: #fde2e2;
  --red-500: #ee0000;
  --red-600: #e5484d;
  --red-700: #c81e1e;

  --green-100: #dcfce7;
  --green-500: #17c964;
  --green-600: #12a150;
  --green-700: #0f7a3d;

  --amber-100: #fef3c7;
  --amber-500: #f5a623;
  --amber-600: #d9860f;
  --amber-700: #a3610a;

  /* ---- Semantic aliases: light theme (default) ---- */
  --bg-page: var(--gray-0);
  --bg-subtle: var(--gray-50);
  --surface-card: var(--gray-0);
  --surface-sunken: var(--gray-50);
  --surface-hover: var(--gray-100);
  --surface-active: var(--gray-150);
  --surface-inverse: var(--gray-1000);

  --border-subtle: var(--gray-150);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-400);
  --border-focus: var(--gray-1000);

  --text-primary: var(--gray-1000);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-disabled: var(--gray-400);
  --text-inverse: var(--gray-0);
  --text-link: var(--blue-600);
  --text-link-hover: var(--blue-700);

  --accent-primary: var(--gray-1000);
  --accent-primary-hover: var(--gray-800);
  --accent-primary-text: var(--gray-0);
  --accent-blue: var(--blue-600);
  --accent-blue-hover: var(--blue-700);

  --status-success-bg: var(--green-100);
  --status-success-text: var(--green-700);
  --status-success-solid: var(--green-600);
  --status-error-bg: var(--red-100);
  --status-error-text: var(--red-700);
  --status-error-solid: var(--red-600);
  --status-warning-bg: var(--amber-100);
  --status-warning-text: var(--amber-700);
  --status-warning-solid: var(--amber-600);
  --status-info-bg: var(--blue-50);
  --status-info-text: var(--blue-700);
  --status-info-solid: var(--blue-600);

  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--gray-1000);
}

/* ---- Dark theme override ---- */
[data-theme="dark"] {
  --bg-page: var(--gray-1000);
  --bg-subtle: var(--gray-950);
  --surface-card: var(--gray-950);
  --surface-sunken: #111113;
  --surface-hover: var(--gray-900);
  --surface-active: var(--gray-800);
  --surface-inverse: var(--gray-0);

  --border-subtle: var(--gray-900);
  --border-default: var(--gray-800);
  --border-strong: var(--gray-600);
  --border-focus: var(--gray-0);

  --text-primary: var(--gray-0);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --text-disabled: var(--gray-700);
  --text-inverse: var(--gray-1000);
  --text-link: var(--blue-500);
  --text-link-hover: var(--blue-300);

  --accent-primary: var(--gray-0);
  --accent-primary-hover: var(--gray-200);
  --accent-primary-text: var(--gray-1000);

  --status-success-bg: #0d2818;
  --status-success-text: #4ade80;
  --status-error-bg: #2a0a0a;
  --status-error-text: #f87171;
  --status-warning-bg: #2b1c05;
  --status-warning-text: #fbbf24;
  --status-info-bg: #0b1b33;
  --status-info-text: #60a5fa;

  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--gray-0);
}