/* ==========================================================================
   COLORS — semantic surfaces, text, borders, brand, status.
   Dark is the product default (declared on :root). Light is a derivation
   applied via .light or [data-theme='light']. Values resolved from the
   open-source Supabase OKLCH derivation system (packages/ui, packages/config).
   ========================================================================== */

/* ---- DARK THEME (product default) --------------------------------------- */
:root,
[data-theme='dark'],
.dark {
  color-scheme: dark;

  /* Surfaces — elevation ladder (each step ≈ +0.025 OKLCH lightness) */
  --background: #131413;          /* elevation 0 — app canvas, sidebar */
  --background-200: #181a19;
  --card: #181a19;                /* elevation 1 — cards, panels, tables */
  --popover: #1b1d1c;             /* elevation 1.5 — dropdowns, dialogs */
  --secondary: #1e201f;           /* elevation 2 — hover surfaces, overlays */
  --overlay: #1e201f;             /* dropdown/menu surface */
  --muted: rgb(237 239 238 / 0.031);    /* translucent fill e1 */
  --accent: rgb(237 239 238 / 0.051);   /* translucent fill e2 — selection, menu hover */
  --tertiary: rgb(237 239 238 / 0.067); /* translucent fill e3 — strongest neutral */

  /* Text */
  --foreground: #edefee;          /* primary text (≥15:1 on background) */
  --foreground-light: #bcbdbc;    /* secondary text */
  --foreground-lighter: #989a99;  /* tertiary text, placeholders, meta */
  --foreground-muted: #989a99;
  --foreground-contrast: #131413; /* text on brand / inverted fills */

  /* Borders — translucent foreground, never opaque gray */
  --border: rgb(238 239 238 / 0.075);          /* default hairline */
  --border-muted: rgb(238 239 238 / 0.075);
  --border-overlay: rgb(238 239 238 / 0.14);   /* dropdown / dialog border */
  --border-strong: rgb(238 239 238 / 0.133);   /* inputs, button borders */
  --border-stronger: rgb(238 239 238 / 0.19);  /* hover borders */
  --input: rgb(238 239 238 / 0.133);

  /* Brand — Supabase green (hue 153–159) */
  --brand: #3ecf8e;               /* the signature green */
  --brand-link: #00c573;          /* links */
  --brand-600: #85e0ba;           /* icon / text on brand tints */
  --brand-500: #006239;           /* primary button fill */
  --brand-400: #00311d;           /* deep tint */
  --brand-300: #002918;
  --brand-200: #000a07;
  --primary: #45cd8e;             /* mode-invariant vivid accent */
  --primary-foreground: #131413;
  --ring: rgb(69 205 142 / 0.55); /* focus ring */

  /* Status — anchored OKLCH, hues pulled 15% toward brand for harmony */
  --warning: #f2af48;    --warning-foreground: #080503;
  --warning-600: #da8f00; --warning-500: #692e00;
  --warning-400: #4a2200; --warning-300: #341800;
  --destructive: #fa8880; --destructive-foreground: #090504;
  --destructive-400: #532019; --destructive-300: #3e1712;
  --info: #9b8ff0;       --info-foreground: #060509;

  --border-warning: rgb(242 175 72 / 0.30);
  --border-destructive: rgb(250 136 128 / 0.30);
  --border-info: rgb(155 143 240 / 0.30);
  --border-brand: rgb(69 205 142 / 0.30);

  /* Shadows — quiet, black-based, reserved for floating layers */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.4);

  /* Code-block syntax accents */
  --code-1: hsl(170.8deg 43.1% 61.4%);  /* teal */
  --code-2: hsl(33.2deg 90.3% 75.7%);   /* amber */
  --code-3: hsl(83.8deg 61.7% 63.1%);   /* lime */
  --code-4: hsl(276.1deg 67.7% 74.5%);  /* violet */
  --code-5: hsl(13.8deg 89.7% 69.6%);   /* coral */
}

/* ---- LIGHT THEME --------------------------------------------------------- */
[data-theme='light'],
.light {
  color-scheme: light;

  --background: #fdfdfd;          /* soft gray, not pure white */
  --background-200: #ffffff;
  --card: #ffffff;
  --popover: #ffffff;
  --secondary: #ffffff;
  --overlay: #ffffff;
  --muted: rgb(3 3 3 / 0.027);
  --accent: rgb(3 3 3 / 0.039);
  --tertiary: rgb(3 3 3 / 0.055);

  --foreground: #030303;
  --foreground-light: #464646;
  --foreground-lighter: #696969;
  --foreground-muted: #696969;
  --foreground-contrast: #fdfdfd;

  --border: rgb(3 3 3 / 0.082);
  --border-muted: rgb(3 3 3 / 0.082);
  --border-overlay: rgb(3 3 3 / 0.15);
  --border-strong: rgb(3 3 3 / 0.145);
  --border-stronger: rgb(3 3 3 / 0.21);
  --input: rgb(3 3 3 / 0.145);

  --brand: #3fcf8e;
  --brand-link: #0a874f;
  --brand-600: #097c4f;
  --brand-500: #16b674;
  --brand-400: #98e6c1;
  --brand-300: #cdf5e1;
  --brand-200: #e5faf0;
  --primary: #45cd8e;
  --primary-foreground: #030303;
  --ring: rgb(69 205 142 / 0.55);

  --warning: #ca8a10;    --warning-foreground: #fffdf8;
  --warning-400: #ffe0a3; --warning-300: #fff3d6;
  --destructive: #ab413e; --destructive-foreground: #fff9f8;
  --destructive-400: #fdd7d3; --destructive-300: #fff0ee;
  --info: #6c5eba;       --info-foreground: #fbfbff;

  --border-warning: rgb(202 138 16 / 0.30);
  --border-destructive: rgb(171 65 62 / 0.30);
  --border-info: rgb(108 94 186 / 0.30);
  --border-brand: rgb(69 205 142 / 0.30);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.08);

  --code-1: hsl(170.6deg 43.2% 51%);
  --code-2: hsl(33.1deg 80% 52.9%);
  --code-3: hsl(83.8deg 61.6% 48%);
  --code-4: hsl(276.3deg 60% 52.9%);
  --code-5: hsl(14deg 80.4% 58%);
}