/* ============================================================
   Metronic 9 — Color Tokens
   Primitives mirror Tailwind v4 (zinc neutrals + blue primary),
   the exact palette Metronic's ReUI theme references.
   Semantic aliases follow src/css/config.reui.css.
   ============================================================ */

:root {
  /* ---- Base ---- */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ---- Neutral scale (Tailwind zinc) ---- */
  --color-zinc-50:  oklch(0.985 0 0);
  --color-zinc-100: oklch(0.967 0.001 286.375);
  --color-zinc-200: oklch(0.92 0.004 286.32);
  --color-zinc-300: oklch(0.871 0.006 286.286);
  --color-zinc-400: oklch(0.705 0.015 286.067);
  --color-zinc-500: oklch(0.552 0.016 285.938);
  --color-zinc-600: oklch(0.442 0.017 285.786);
  --color-zinc-700: oklch(0.37 0.013 285.805);
  --color-zinc-800: oklch(0.274 0.006 286.033);
  --color-zinc-900: oklch(0.21 0.006 285.885);
  --color-zinc-950: oklch(0.141 0.005 285.823);

  /* ---- Primary (Tailwind blue) ---- */
  --color-blue-50:  oklch(0.97 0.014 254.604);
  --color-blue-100: oklch(0.932 0.032 255.585);
  --color-blue-500: oklch(0.623 0.214 259.815);
  --color-blue-600: oklch(0.546 0.245 262.881);
  --color-blue-700: oklch(0.488 0.243 264.376);
  --color-blue-950: oklch(0.282 0.091 267.935);

  /* ---- Success (green) ---- */
  --color-green-50:  oklch(0.982 0.018 155.826);
  --color-green-100: oklch(0.962 0.044 156.743);
  --color-green-500: oklch(0.723 0.219 149.579);
  --color-green-600: oklch(0.627 0.194 149.214);
  --color-green-700: oklch(0.527 0.154 150.069);
  --color-green-800: oklch(0.448 0.119 151.328);

  /* ---- Warning (yellow) ---- */
  --color-yellow-50:  oklch(0.987 0.026 102.212);
  --color-yellow-100: oklch(0.973 0.071 103.193);
  --color-yellow-500: oklch(0.795 0.184 86.047);
  --color-yellow-600: oklch(0.681 0.162 75.834);
  --color-yellow-700: oklch(0.554 0.135 66.442);

  /* ---- Info (violet) ---- */
  --color-violet-50:  oklch(0.969 0.016 293.756);
  --color-violet-100: oklch(0.943 0.029 294.588);
  --color-violet-500: oklch(0.606 0.25 292.717);
  --color-violet-700: oklch(0.491 0.27 292.581);

  /* ---- Destructive (red) ---- */
  --color-red-50:  oklch(0.971 0.013 17.38);
  --color-red-100: oklch(0.936 0.032 17.717);
  --color-red-500: oklch(0.637 0.237 25.331);
  --color-red-600: oklch(0.577 0.245 27.325);
  --color-red-700: oklch(0.505 0.213 27.518);

  /* ---- Purple (chart) ---- */
  --color-purple-500: oklch(0.627 0.265 303.9);

  /* ============================================================
     Semantic aliases (light theme) — from config.reui.css
     ============================================================ */
  --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-500);
  --primary-foreground: var(--color-white);
  --primary-accent: var(--color-blue-700);
  --primary-soft: var(--color-blue-50);

  --secondary: var(--color-zinc-100);
  --secondary-foreground: var(--color-zinc-900);

  --muted: var(--color-zinc-100);
  --muted-foreground: var(--color-zinc-500);

  --accent: var(--color-zinc-100);
  --accent-foreground: var(--color-zinc-900);

  --mono: var(--color-zinc-950);
  --mono-foreground: var(--color-white);

  --destructive: var(--color-red-600);
  --destructive-foreground: var(--color-white);
  --destructive-accent: var(--color-red-700);
  --destructive-soft: var(--color-red-50);

  --success: var(--color-green-500);
  --success-foreground: var(--color-white);
  --success-accent: var(--color-green-800);
  --success-soft: var(--color-green-100);

  --warning: var(--color-yellow-500);
  --warning-foreground: var(--color-white);
  --warning-accent: var(--color-yellow-700);
  --warning-soft: var(--color-yellow-100);

  --info: var(--color-violet-500);
  --info-foreground: var(--color-white);
  --info-accent: var(--color-violet-700);
  --info-soft: var(--color-violet-100);

  /* ---- Borders / inputs / rings ---- */
  --border: oklch(94% 0.004 286.32); /* between zinc-100 and zinc-200 */
  --input: var(--color-zinc-200);
  --ring: var(--color-zinc-400);

  /* ---- Chart palette ---- */
  --chart-1: var(--color-blue-500);
  --chart-2: var(--color-green-500);
  --chart-3: var(--color-yellow-500);
  --chart-4: var(--color-red-500);
  --chart-5: var(--color-purple-500);
}

/* ============================================================
   Dark theme — applied under .dark scope
   ============================================================ */
.dark {
  --background: var(--color-zinc-950);
  --foreground: var(--color-zinc-50);

  --card: var(--color-zinc-950);
  --card-foreground: var(--color-zinc-50);
  --popover: var(--color-zinc-950);
  --popover-foreground: var(--color-zinc-50);

  --primary: var(--color-blue-600);
  --primary-foreground: var(--color-white);

  --secondary: var(--color-zinc-800);
  --secondary-foreground: var(--color-zinc-50);

  --muted: var(--color-zinc-900);
  --muted-foreground: var(--color-zinc-500);

  --accent: var(--color-zinc-900);
  --accent-foreground: var(--color-zinc-50);

  --mono: var(--color-zinc-300);
  --mono-foreground: var(--color-black);

  --border: var(--color-zinc-800);
  --input: var(--color-zinc-800);
  --ring: var(--color-zinc-600);
}