/*
 * Kantrik design tokens: the single source of truth for colour, type, space, radius, shadow, texture and motion.
 * Every other stylesheet (base.css, components.css, sections.css) reads these custom properties and defines no colour of its own.
 * Style: technical drawing on warm paper. One saturated accent (orange), hairlines, square corners, mono labels, grain.
 * Light is the default; dark follows the system, or `data-theme="dark"` / `data-theme="light"` on <html> (set by the theme button).
 * Rationale and component list: docs/design-notes.md
 */
:root {
  color-scheme: light dark;

  /* Paper and ink: warm, never a cold grey. */
  --paper-0: #ffffff;
  --paper-50: #fdfbf8;
  --paper-100: #f6f2ec;
  --paper-200: #ece5db;
  --line-300: #cfc6b9;
  --line-200: #e4ddd3;
  --ink-500: #7a7066;
  --ink-600: #5d544a;
  --ink-900: #14110e;
  --night-950: #0f0d0b;
  --night-900: #16130f;
  --night-850: #1c1814;

  /* Accent: orange. --orange-600 is the brand colour; the lighter steps serve dark surfaces and washes. */
  --orange-50: #fdf1ea;
  --orange-100: #fbe6da;
  --orange-200: #f7c9ae;
  --orange-400: #ff7a33;
  --orange-500: #f56a14;
  --orange-600: #d04208;
  --orange-700: #a93405;
  --orange-800: #7e2704;

  /* Roles, light theme. */
  --color-bg: var(--paper-50);
  --color-bg-alt: var(--paper-100);
  --color-surface: var(--paper-0);
  --color-surface-sunk: var(--paper-100);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-text-faint: var(--ink-500);
  --color-border: var(--line-200);
  --color-border-strong: var(--line-300);
  --color-line: var(--line-300);                /* drawing lines, grid, dimension marks */
  --color-accent: var(--orange-600);            /* headline accent, frames, markers, labels: 4.5:1 on paper */
  --color-accent-hover: var(--orange-700);
  --color-accent-soft: var(--orange-100);
  --color-accent-tint: var(--orange-50);
  --color-primary: var(--orange-600);           /* solid buttons */
  --color-primary-hover: var(--orange-700);
  --color-on-primary: #ffffff;                  /* 4.7:1 on the primary */
  --color-link: var(--orange-700);
  --color-focus: var(--orange-600);
  --color-band: var(--orange-600);              /* the full-bleed accent band */
  --color-band-hover: var(--orange-700);
  --color-on-band: #ffffff;
  --color-on-band-muted: #ffe9dd;
  --color-band-line: rgb(255 255 255 / 0.28);
  --color-ok: #1f6b43;
  --color-ok-soft: #e2f3e8;
  --color-warn: #8a5a00;
  --color-warn-soft: #fdeec7;
  --color-bad: #a8261c;
  --color-bad-soft: #fde3df;
  --color-panel: rgb(255 255 255 / 0.82);       /* translucent panels over drawings */

  /* Code colours (on panels). */
  --code-key: var(--orange-700);
  --code-string: #1f6b43;
  --code-number: #8a5a00;
  --code-keyword: var(--orange-600);
  --code-comment: var(--ink-500);
  --color-success-dot: #1f9d55;

  /* Type: a technical grotesque for headings, a neutral grotesque for text, one mono for labels, buttons and navigation. All from Google Fonts. */
  --font-display: "Space Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.45rem, 1.2rem + 0.9vw, 2rem);
  --text-3xl: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
  --text-hero: clamp(2.2rem, 1.4rem + 2.6vw, 3.5rem);
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-display: -0.01em;
  --tracking-label: 0.08em;

  /* Space: 4 px base, generous at section level. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;
  --space-9: 8rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 80rem;
  --container-narrow: 46rem;

  /* Shape: square. Only small chips get a hint of rounding. */
  --radius-sm: 2px;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 2px;
  --radius-round: 50%;
  --border-w: 1px;
  --marker: 7px;                                 /* corner squares of frames */

  /* Elevation: almost none. Buttons carry a soft accent glow, floating panels a faint lift. */
  --shadow-sm: 0 1px 0 rgb(20 17 14 / 0.04);
  --shadow-md: 0 8px 24px rgb(20 17 14 / 0.08);
  --shadow-lg: 0 18px 48px rgb(20 17 14 / 0.12);
  --shadow-glow: 0 4px 16px rgb(208 66 8 / 0.32);
  --glow: radial-gradient(55% 55% at 78% 30%, rgb(208 66 8 / 0.08), transparent 70%);

  /* Texture: fine film grain over paper and bands (inline SVG noise, no request). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: 0.07;

  /* Motion. */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 220ms;
}

/* Dark theme: follows the system unless the page says otherwise. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--night-950);
    --color-bg-alt: var(--night-900);
    --color-surface: var(--night-850);
    --color-surface-sunk: var(--night-900);
    --color-text: #f3ede4;
    --color-text-muted: #b3a797;
    --color-text-faint: #8f8374;
    --color-border: #2d2721;
    --color-border-strong: #443b32;
    --color-line: #3a322a;
    --color-accent: var(--orange-400);
    --color-accent-hover: #ff9a5c;
    --color-accent-soft: #3a1e0e;
    --color-accent-tint: #25160c;
    --color-primary: var(--orange-400);
    --color-primary-hover: #ff9a5c;
    --color-on-primary: #140a03;
    --color-link: #ff9a5c;
    --color-focus: #ff9a5c;
    --color-ok: #7fd9a2;
    --color-ok-soft: #14301f;
    --color-warn: #f0c36a;
    --color-warn-soft: #34270a;
    --color-bad: #ff9a90;
    --color-bad-soft: #3a1612;
    --color-panel: rgb(28 24 20 / 0.86);
    --code-key: #ff9a5c;
    --code-string: #9fdcb0;
    --code-number: #f2d27a;
    --code-keyword: var(--orange-400);
    --code-comment: #8f8374;
    --color-success-dot: #5fd08a;
    --shadow-sm: 0 1px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.55);
    --shadow-glow: 0 4px 16px rgb(255 122 51 / 0.28);
    --glow: radial-gradient(55% 55% at 78% 30%, rgb(255 122 51 / 0.12), transparent 70%);
    --grain-opacity: 0.12;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--night-950);
  --color-bg-alt: var(--night-900);
  --color-surface: var(--night-850);
  --color-surface-sunk: var(--night-900);
  --color-text: #f3ede4;
  --color-text-muted: #b3a797;
  --color-text-faint: #8f8374;
  --color-border: #2d2721;
  --color-border-strong: #443b32;
  --color-line: #3a322a;
  --color-accent: var(--orange-400);
  --color-accent-hover: #ff9a5c;
  --color-accent-soft: #3a1e0e;
  --color-accent-tint: #25160c;
  --color-primary: var(--orange-400);
  --color-primary-hover: #ff9a5c;
  --color-on-primary: #140a03;
  --color-link: #ff9a5c;
  --color-focus: #ff9a5c;
  --color-ok: #7fd9a2;
  --color-ok-soft: #14301f;
  --color-warn: #f0c36a;
  --color-warn-soft: #34270a;
  --color-bad: #ff9a90;
  --color-bad-soft: #3a1612;
  --color-panel: rgb(28 24 20 / 0.86);
  --code-key: #ff9a5c;
  --code-string: #9fdcb0;
  --code-number: #f2d27a;
  --code-keyword: var(--orange-400);
  --code-comment: #8f8374;
  --color-success-dot: #5fd08a;
  --shadow-sm: 0 1px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.55);
  --shadow-glow: 0 4px 16px rgb(255 122 51 / 0.28);
  --glow: radial-gradient(55% 55% at 78% 30%, rgb(255 122 51 / 0.12), transparent 70%);
  --grain-opacity: 0.12;
}
:root[data-theme="light"] { color-scheme: light; }