/*
 * GridWeave website design tokens.
 * Colour values are taken from the web application (web/src/index.css): zinc
 * neutrals and an indigo accent in OKLCH. Light is the default; dark applies
 * through prefers-color-scheme unless the visitor chose a theme with the toggle
 * (data-theme="light" or "dark" on the root element).
 * Every token is defined on bare :root first; the dark blocks only redefine.
 */
:root {
  /* Colour */
  --bg: oklch(0.985 0.002 286);
  --bg-alt: oklch(0.967 0.002 286);
  --surface: oklch(1 0 0);
  --fg: oklch(0.141 0.005 286);
  --fg-muted: oklch(0.46 0.016 286);
  --border: oklch(0.9 0.004 286);
  --border-strong: oklch(0.64 0.012 286);
  --accent: oklch(0.511 0.262 277);
  --accent-fg: oklch(1 0 0);
  --accent-hover: oklch(0.45 0.25 277);
  --accent-soft: oklch(0.95 0.025 277);
  --accent-soft-fg: oklch(0.25 0.09 277);
  --link: oklch(0.47 0.25 277);
  --ring: oklch(0.511 0.262 277);
  --success: oklch(0.44 0.13 150);
  --success-soft: oklch(0.96 0.04 150);
  --warning: oklch(0.45 0.11 70);
  --warning-soft: oklch(0.96 0.06 90);
  --warning-border: oklch(0.85 0.1 85);
  --danger: oklch(0.5 0.2 27);
  --danger-soft: oklch(0.96 0.03 25);
  --code-bg: oklch(0.965 0.003 286);
  --shadow: 0 1px 2px oklch(0.2 0.01 286 / 0.06), 0 4px 16px oklch(0.2 0.01 286 / 0.05);

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --text-2xl: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  --text-4xl: clamp(2.25rem, 1.4rem + 4vw, 4rem);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --measure: 65ch;

  /* Spacing (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6rem;

  /* Shape and layout */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-lg: 0.875rem;
  --container: 70rem;
  --gutter: max(1rem, env(safe-area-inset-left, 0px));
  --header-h: 4rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.141 0.005 286);
    --bg-alt: oklch(0.165 0.006 286);
    --surface: oklch(0.18 0.006 286);
    --fg: oklch(0.96 0.003 286);
    --fg-muted: oklch(0.72 0.012 286);
    --border: oklch(1 0 0 / 11%);
    --border-strong: oklch(0.56 0.012 286);
    --accent: oklch(0.54 0.25 277);
    --accent-fg: oklch(1 0 0);
    --accent-hover: oklch(0.6 0.24 277);
    --accent-soft: oklch(0.27 0.06 277);
    --accent-soft-fg: oklch(0.95 0.02 277);
    --link: oklch(0.78 0.12 277);
    --ring: oklch(0.7 0.16 277);
    --success: oklch(0.8 0.17 150);
    --success-soft: oklch(0.27 0.06 150);
    --warning: oklch(0.85 0.14 85);
    --warning-soft: oklch(0.3 0.06 85);
    --warning-border: oklch(0.5 0.09 85);
    --danger: oklch(0.8 0.12 25);
    --danger-soft: oklch(0.28 0.07 25);
    --code-bg: oklch(0.21 0.006 286);
    --shadow: 0 1px 2px oklch(0 0 0 / 0.4);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: oklch(0.141 0.005 286);
  --bg-alt: oklch(0.165 0.006 286);
  --surface: oklch(0.18 0.006 286);
  --fg: oklch(0.96 0.003 286);
  --fg-muted: oklch(0.72 0.012 286);
  --border: oklch(1 0 0 / 11%);
  --border-strong: oklch(0.56 0.012 286);
  --accent: oklch(0.54 0.25 277);
  --accent-fg: oklch(1 0 0);
  --accent-hover: oklch(0.6 0.24 277);
  --accent-soft: oklch(0.27 0.06 277);
  --accent-soft-fg: oklch(0.95 0.02 277);
  --link: oklch(0.78 0.12 277);
  --ring: oklch(0.7 0.16 277);
  --success: oklch(0.8 0.17 150);
  --success-soft: oklch(0.27 0.06 150);
  --warning: oklch(0.85 0.14 85);
  --warning-soft: oklch(0.3 0.06 85);
  --warning-border: oklch(0.5 0.09 85);
  --danger: oklch(0.8 0.12 25);
  --danger-soft: oklch(0.28 0.07 25);
  --code-bg: oklch(0.21 0.006 286);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.4);
  color-scheme: dark;
}