/* ============================================================
   Replicant — Color tokens
   Base palette (raw values) + semantic aliases.
   Mirrors client/src/index.css. Light theme on :root, dark on .dark.
   ============================================================ */

:root {
  /* ---- Brand blue scale (the signature "light blue") ---- */
  --color-blue-25: #fbfcff;
  --color-blue-50: #f7f8ff;
  --color-blue-100: #eaeeff;
  --color-blue-200: #d5ddff;
  --color-blue-300: #c0ccff;
  --color-blue-400: #abbbff;
  --color-blue-500: #97abff;
  --color-blue-600: #829aff;
  --color-blue-700: #6d89ff;
  --color-blue-800: #5878ff;
  --color-blue-900: #4367ff; /* primary */
  --color-blue-1000: #2e56ff;
  --color-blue-1100: #0a35f5;

  /* ---- Neutral (zinc) scale ---- */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  --color-white: #ffffff;

  /* ---- Semantic raw colors ---- */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-300: #86efac;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-300: #fca5a5;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-orange-50: #fff7ed;
  --color-orange-300: #fdba74;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-amber-300: #fcd34d;

  /* =========================================================
     Semantic aliases — use THESE in components, not raw scale.
     ========================================================= */
  --background: var(--color-white);
  --foreground: var(--color-zinc-950);
  --card: var(--color-white);
  --card-foreground: var(--color-zinc-950);
  --popover: var(--color-white);
  --popover-foreground: var(--color-zinc-950);

  --primary: var(--color-blue-900);
  --primary-foreground: var(--color-blue-25);
  --secondary: var(--color-zinc-200);
  --secondary-foreground: var(--color-zinc-900);
  --muted: var(--color-zinc-100);
  --muted-foreground: var(--color-zinc-500);
  --accent: var(--color-blue-100);
  --accent-foreground: var(--color-blue-1100);
  --destructive: var(--color-red-600);
  --destructive-foreground: var(--color-zinc-50);

  --border: var(--color-zinc-200);
  --input: var(--color-zinc-200);
  --ring: var(--color-zinc-900);

  --success: var(--color-green-600);
  --success-hover: var(--color-green-700);
  --warning: #f59e0b;
  --info: var(--primary);
  --brand: var(--primary);

  --success-soft: #ecfdf5;
  --destructive-soft: #fef2f2;
  --warning-soft: #fffbeb;
  --info-soft: #eff6ff;
  --neutral-soft: #f1f5f9;
  --success-text: #15803d;
  --warning-text: #b45309;
  --destructive-text: #b91c1c;

  /* ---- Chart palette (brand-led) ---- */
  --chart-1: var(--color-blue-1100);
  --chart-2: var(--color-blue-700);
  --chart-3: var(--color-blue-400);
  --chart-4: var(--color-zinc-300);
  --chart-5: var(--color-zinc-400);

  /* ---- Sidebar ---- */
  --sidebar: var(--color-blue-25);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--accent-foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);

  /* ---- Badge tokens ---- */
  --badge-positive-bg: var(--color-green-50);
  --badge-positive-fg: var(--color-green-800);
  --badge-negative-bg: var(--color-red-50);
  --badge-negative-fg: var(--color-red-800);
  --badge-neutral-bg: var(--color-zinc-100);
  --badge-neutral-fg: var(--foreground);
  --badge-info-bg: var(--color-blue-100);
  --badge-info-fg: var(--color-blue-800);
  --badge-orange-bg: var(--color-orange-50);
  --badge-orange-fg: var(--color-orange-600);

  /* ---- Brand gradient (AI-themed icons / accents) ---- */
  --brand-gradient-from: #305ce3;
  --brand-gradient-to: #00a3ee;
}

/* Dark theme — apply `.dark` to a container/root to opt in. */
.dark {
  --background: oklch(0.2598 0.0306 262.6666);
  --foreground: oklch(0.9219 0 0);
  --card: oklch(0.3106 0.0301 268.6365);
  --card-foreground: oklch(0.9219 0 0);
  --popover: oklch(0.29 0.0249 268.3986);
  --popover-foreground: oklch(0.9219 0 0);
  --primary: var(--color-blue-900);
  --primary-foreground: var(--color-blue-25);
  --secondary: oklch(0.3095 0.0266 266.7132);
  --secondary-foreground: oklch(0.9219 0 0);
  --muted: oklch(0.3095 0.0266 266.7132);
  --muted-foreground: oklch(0.7155 0 0);
  --accent: oklch(0.338 0.0589 267.5867);
  --accent-foreground: oklch(0.8823 0.0571 254.1284);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: var(--color-white);
  --border: oklch(0.3843 0.0301 269.7337);
  --input: oklch(0.3843 0.0301 269.7337);
  --ring: var(--color-white);
  --success-text: var(--color-green-300);
  --warning-text: var(--color-amber-300);
  --destructive-text: var(--color-red-300);
  --chart-1: var(--color-blue-800);
  --chart-2: var(--color-blue-600);
  --chart-3: var(--color-blue-400);
  --chart-4: var(--color-blue-200);
  --chart-5: var(--color-blue-100);
  --sidebar: oklch(0.31 0.0283 267.7408);
  --sidebar-foreground: oklch(0.9219 0 0);
  --sidebar-primary: var(--color-white);
  --sidebar-primary-foreground: var(--color-white);
  --sidebar-accent: var(--primary);
  --sidebar-accent-foreground: var(--primary-foreground);
  --sidebar-border: oklch(0.3843 0.0301 269.7337);
  --sidebar-ring: var(--color-white);
  --badge-positive-bg: var(--color-green-800);
  --badge-positive-fg: var(--color-white);
  --badge-negative-bg: var(--color-red-800);
  --badge-negative-fg: var(--color-white);
  --badge-neutral-bg: var(--color-zinc-600);
  --badge-neutral-fg: var(--color-zinc-100);
  --badge-info-bg: var(--color-blue-500);
  --badge-info-fg: var(--color-blue-100);
  --badge-orange-bg: var(--color-orange-700);
  --badge-orange-fg: var(--color-orange-100);
}