/* ==========================================================================
   Design tokens — the only place raw values live.
   Components use these variables only; change a token and the whole UI follows.

   Owner-customizable (set by js/theme.js from Settings → Dashboard):
     --accent            brand color (hex)
     [data-theme]        light | dark   (auto = follows the device)
     [data-density]      comfortable | compact
     [data-radius]       sharp | soft | round
     [data-font]         system | modern | rounded | geometric | humanist | serif | mono
   ========================================================================== */

:root {
  /* Brand */
  --accent: #c2410c;
  --accent-hover: color-mix(in oklab, var(--accent) 86%, black);
  --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface));
  --accent-ring: color-mix(in oklab, var(--accent) 40%, transparent);
  --on-accent: #fff; /* set by theme.js for contrast */

  /* Neutrals (light) */
  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #f1f1ee;
  --surface-hover: #f4f4f1;
  --border: #e4e4df;
  --border-strong: #cfcfc8;
  --text: #1c1c1a;
  --text-muted: #62625c;
  --text-subtle: #8c8c85;
  --overlay: rgb(20 20 18 / 0.42);

  /* Semantic */
  --success: #2f9e44;
  --warning: #d9822b;
  --danger: #d6336c;
  --info: #1c7ed6;
  --neutral: #868e96;
  --success-soft: color-mix(in oklab, var(--success) 13%, var(--surface));
  --warning-soft: color-mix(in oklab, var(--warning) 15%, var(--surface));
  --danger-soft: color-mix(in oklab, var(--danger) 12%, var(--surface));
  --info-soft: color-mix(in oklab, var(--info) 12%, var(--surface));
  --neutral-soft: color-mix(in oklab, var(--neutral) 14%, var(--surface));

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --font: var(--font-sans);
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-tight: 1.25;
  --leading: 1.5;

  /* Spacing — 4px grid, scaled by density */
  --density: 1;
  --space-1: calc(4px * var(--density));
  --space-2: calc(8px * var(--density));
  --space-3: calc(12px * var(--density));
  --space-4: calc(16px * var(--density));
  --space-5: calc(20px * var(--density));
  --space-6: calc(24px * var(--density));
  --space-8: calc(32px * var(--density));
  --control-height: calc(36px * var(--density));

  /* Shape */
  --radius-base: 8px;
  --radius-sm: calc(var(--radius-base) * 0.6);
  --radius: var(--radius-base);
  --radius-lg: calc(var(--radius-base) * 1.5);
  --radius-pill: 999px;
  --border-width: 1px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow: 0 2px 8px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.14), 0 2px 8px rgb(0 0 0 / 0.06);

  /* Motion */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --sidebar-width: 232px;
  --topbar-height: 56px;
  --content-max: 1240px;

  color-scheme: light;
}

/* Dark neutrals: explicit dark, or auto on a dark device */
:root[data-theme="dark"] {
  --bg: #121211;
  --surface: #1b1b19;
  --surface-2: #232321;
  --surface-hover: #252523;
  --border: #2f2f2c;
  --border-strong: #42423e;
  --text: #ecece8;
  --text-muted: #a5a59e;
  --text-subtle: #7b7b75;
  --overlay: rgb(0 0 0 / 0.6);
  --accent-hover: color-mix(in oklab, var(--accent) 84%, white);
  --success: #51cf66;
  --warning: #f2a94a;
  --danger: #f06595;
  --info: #4dabf7;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 2px 10px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.55);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #121211;
    --surface: #1b1b19;
    --surface-2: #232321;
    --surface-hover: #252523;
    --border: #2f2f2c;
    --border-strong: #42423e;
    --text: #ecece8;
    --text-muted: #a5a59e;
    --text-subtle: #7b7b75;
    --overlay: rgb(0 0 0 / 0.6);
    --accent-hover: color-mix(in oklab, var(--accent) 84%, white);
    --success: #51cf66;
    --warning: #f2a94a;
    --danger: #f06595;
    --info: #4dabf7;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 2px 10px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.55);
    color-scheme: dark;
  }
}

/* Density */
:root[data-density="compact"] { --density: 0.8; --text-base: 0.8125rem; }

/* Corner style */
:root[data-radius="sharp"] { --radius-base: 2px; }
:root[data-radius="soft"] { --radius-base: 8px; }
:root[data-radius="round"] { --radius-base: 14px; }

/* Fonts (system stacks only: no external font downloads) */
/* Fonts already on people's devices (nothing is downloaded) */
:root[data-font="modern"] { --font: "Inter", "Segoe UI Variable Text", "SF Pro Text", "SF Pro", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
:root[data-font="rounded"] { --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Quicksand", "Arial Rounded MT Bold", system-ui, sans-serif; }
:root[data-font="geometric"] { --font: "Avenir Next", "Avenir", "Montserrat", "Century Gothic", "Futura", "Segoe UI", system-ui, sans-serif; }
:root[data-font="humanist"] { --font: "Seravek", "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif; }
:root[data-font="serif"] { --font: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, Georgia, serif; }
:root[data-font="mono"] { --font: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}