/* ============================================================================
   WebPros Design System — COLOR TOKENS
   Cool slate neutrals (hue 286) carry ~90% of surface area; one saturated
   WebPros violet (hue ~292) is the single signal. Semantic status hues stay
   muted and are always paired with an icon + label. All color in oklch.
   Base ramps are theme-independent; semantic aliases split light / dark.
   ========================================================================== */

:root {
  /* ---- Brand ramp — WebPros violet, modernized & desaturated ------------- */
  --wp-50:  oklch(0.977 0.012 300);
  --wp-100: oklch(0.948 0.026 300);
  --wp-200: oklch(0.902 0.050 298);
  --wp-300: oklch(0.832 0.085 296);
  --wp-400: oklch(0.715 0.140 294);
  --wp-500: oklch(0.585 0.186 292);   /* primary anchor — recognizably WebPros */
  --wp-600: oklch(0.520 0.195 292);
  --wp-700: oklch(0.455 0.170 292);
  --wp-800: oklch(0.395 0.135 291);
  --wp-900: oklch(0.330 0.098 290);
  --wp-950: oklch(0.255 0.062 289);

  /* On-brand foreground — near-white glyph that sits on the brand gradient.
     Theme-independent: the logo gradient is identical in light and dark. */
  --brand-foreground: oklch(0.985 0.004 300);

  /* ---- Neutral ramp — cool slate ---------------------------------------- */
  --n-0:    oklch(1 0 0);
  --n-50:   oklch(0.985 0.0025 286);
  --n-100:  oklch(0.968 0.004 286);
  --n-150:  oklch(0.948 0.005 286);
  --n-200:  oklch(0.920 0.006 286);
  --n-300:  oklch(0.872 0.008 286);
  --n-400:  oklch(0.708 0.013 286);
  --n-500:  oklch(0.556 0.018 286);
  --n-600:  oklch(0.456 0.020 286);
  --n-700:  oklch(0.370 0.020 286);
  --n-800:  oklch(0.274 0.018 286);
  --n-900:  oklch(0.214 0.016 286);
  --n-950:  oklch(0.168 0.014 286);
  --n-1000: oklch(0.130 0.012 286);

  /* ---- Status hues (shared chroma/lightness family) --------------------- */
  --green-500: oklch(0.620 0.150 150);
  --green-600: oklch(0.545 0.135 150);
  --amber-500: oklch(0.760 0.150 78);
  --amber-600: oklch(0.680 0.150 62);
  --red-500:   oklch(0.585 0.205 24);
  --red-600:   oklch(0.520 0.205 24);
  --blue-500:  oklch(0.600 0.150 244);
  --blue-600:  oklch(0.530 0.150 244);
}

/* ============================================================================
   SEMANTIC TOKENS — LIGHT (default)
   ========================================================================== */
:root,
[data-theme="light"] {
  --background: var(--n-50);
  --foreground: var(--n-900);

  /* Raised surfaces — one step brighter than canvas so panels lift w/o shadow */
  --surface: var(--n-0);
  --surface-foreground: var(--n-900);
  --surface-2: var(--n-100);            /* sunken / subtle panels */

  --muted: var(--n-100);
  --muted-foreground: oklch(0.5 0.02 286);   /* darkened to clear WCAG AA on tints */

  --subtle: var(--n-150);               /* hover wash on neutrals */

  --border: var(--n-200);               /* the hairline that does structural work */
  --border-strong: var(--n-300);
  --input: var(--n-300);
  --ring: var(--wp-500);

  --primary: var(--wp-600);
  --primary-hover: var(--wp-700);
  --primary-foreground: oklch(0.99 0.004 300);
  --primary-subtle: var(--wp-50);
  --primary-subtle-foreground: var(--wp-700);
  --primary-border: var(--wp-200);

  --accent: var(--wp-50);
  --accent-foreground: var(--wp-700);

  --success: var(--green-600);
  --success-foreground: oklch(0.99 0 0);
  --success-subtle: oklch(0.955 0.035 150);
  --success-subtle-foreground: oklch(0.40 0.10 150);

  --warning: var(--amber-600);
  --warning-foreground: oklch(0.20 0.02 70);
  --warning-subtle: oklch(0.965 0.045 80);
  --warning-subtle-foreground: oklch(0.45 0.10 62);

  --destructive: var(--red-600);
  --destructive-foreground: oklch(0.99 0 0);
  --destructive-subtle: oklch(0.962 0.028 24);
  --destructive-subtle-foreground: oklch(0.46 0.16 24);

  --info: var(--blue-600);
  --info-foreground: oklch(0.99 0 0);
  --info-subtle: oklch(0.962 0.030 244);
  --info-subtle-foreground: oklch(0.45 0.12 244);

  /* Chart series — brand first, then a calm cool-to-warm spread */
  --chart-1: var(--wp-500);
  --chart-2: oklch(0.66 0.14 244);
  --chart-3: oklch(0.70 0.13 180);
  --chart-4: oklch(0.74 0.15 92);
  --chart-5: oklch(0.66 0.17 12);

  /* Scrim behind modals / sheets / the mobile rail */
  --overlay: oklch(0.21 0.02 286 / 0.5);
  /* Translucent sticky-header surface (pairs with backdrop-blur) */
  --topbar-bg: oklch(0.985 0.0025 286 / 0.82);

  color-scheme: light;
}

/* ============================================================================
   SEMANTIC TOKENS — DARK ([data-theme="dark"])
   ========================================================================== */
[data-theme="dark"] {
  --background: var(--n-1000);
  --foreground: var(--n-100);

  --surface: var(--n-950);
  --surface-foreground: var(--n-100);
  --surface-2: var(--n-900);

  --muted: var(--n-900);
  --muted-foreground: var(--n-400);

  --subtle: oklch(0.232 0.016 286);

  --border: oklch(0.275 0.014 286);
  --border-strong: oklch(0.330 0.016 286);
  --input: oklch(0.310 0.016 286);
  --ring: var(--wp-400);

  --primary: var(--wp-400);
  --primary-hover: var(--wp-300);
  --primary-foreground: oklch(0.17 0.02 290);
  --primary-subtle: oklch(0.285 0.045 292);
  --primary-subtle-foreground: var(--wp-200);
  --primary-border: oklch(0.36 0.07 292);

  --accent: oklch(0.262 0.026 292);
  --accent-foreground: var(--wp-200);

  --success: var(--green-500);
  --success-foreground: oklch(0.15 0.02 150);
  --success-subtle: oklch(0.30 0.055 150);
  --success-subtle-foreground: oklch(0.85 0.10 150);

  --warning: var(--amber-500);
  --warning-foreground: oklch(0.18 0.02 70);
  --warning-subtle: oklch(0.32 0.055 70);
  --warning-subtle-foreground: oklch(0.88 0.09 82);

  --destructive: oklch(0.62 0.205 24);
  --destructive-foreground: oklch(0.99 0 0);
  --destructive-subtle: oklch(0.31 0.075 24);
  --destructive-subtle-foreground: oklch(0.85 0.10 24);

  --info: var(--blue-500);
  --info-foreground: oklch(0.99 0 0);
  --info-subtle: oklch(0.31 0.060 244);
  --info-subtle-foreground: oklch(0.84 0.09 244);

  --chart-1: var(--wp-400);
  --chart-2: oklch(0.70 0.13 244);
  --chart-3: oklch(0.74 0.12 180);
  --chart-4: oklch(0.80 0.14 92);
  --chart-5: oklch(0.72 0.16 12);

  --overlay: oklch(0.05 0.01 286 / 0.6);
  --topbar-bg: oklch(0.130 0.012 286 / 0.82);

  color-scheme: dark;
}