/* tokens.css */
:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg:          light-dark(#F6F7F9, #0E1217);  /* page background */
  --surface:     light-dark(#FFFFFF, #151A21);  /* panels, cards, inputs */
  --surface-2:   light-dark(#EEF0F4, #1C222B);  /* sunken areas: output panes, code, callouts */
  --line:        light-dark(#DFE3E9, #27303B);  /* default borders */
  --line-strong: light-dark(#C9CFD8, #394452);  /* input borders, dividers that must be seen */

  /* Text */
  --ink:   light-dark(#12161C, #E9EDF2);  /* primary text */
  --ink-2: light-dark(#444C59, #B3BCC9);  /* secondary text */
  --ink-3: light-dark(#626B79, #8D97A6);  /* tertiary text, placeholders, meta */

  /* Brand */
  --accent:       light-dark(#0E6B73, #5CC8CF);  /* buttons, links, focus */
  --accent-hover: light-dark(#0A565D, #7FD7DC);
  --accent-ink:   light-dark(#FFFFFF, #06262A);  /* text on --accent */
  --accent-soft:  light-dark(#E2F1F2, #12303A);  /* tinted background */
  --marker:       light-dark(#FFD84D, #F2CC3D);  /* highlighter yellow */
  --marker-soft:  light-dark(#FFF1B8, #3B3414);  /* highlighted text background */
  --marker-ink:   #12161C;                        /* text on --marker (both themes) */

  /* Status */
  --ok:        light-dark(#1B7F4B, #5FD08F);
  --ok-soft:   light-dark(#E3F4EA, #12291D);
  --warn:      light-dark(#8A5200, #F0B24D);
  --warn-soft: light-dark(#FFF1D6, #31260F);
  --err:       light-dark(#B3261E, #FF8A80);
  --err-soft:  light-dark(#FCE6E4, #35171A);

  /* Inverted band (closing CTA on the homepage) */
  --band-bg:  light-dark(#12161C, #1C222B);
  --band-ink: #E9EDF2;

  /* Fonts (self-hosted, see 4.3) */
  --font-ui:   "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-ui:   0.875rem;   /* 14  all UI controls */
  --fs-body: 1rem;       /* 16  prose */
  --fs-lg:   1.125rem;   /* 18  lead paragraphs */
  --fs-xl:   1.375rem;   /* 22  h3 / group headings */
  --fs-2xl:  1.75rem;    /* 28  tool page h1, h2 in prose */
  --fs-3xl:  clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);  /* section h2 on homepage */
  --fs-hero: clamp(2.5rem, 1.5rem + 3.6vw, 4rem);     /* homepage h1 */

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;

  /* Radius: different sizes for different levels of hierarchy */
  --r-sm: 6px;     /* buttons, inputs, small tiles */
  --r-md: 10px;    /* panels, callouts, tool cards */
  --r-lg: 16px;    /* large framed surfaces (hero screenshot, privacy panel) */
  --r-pill: 999px;

  /* Shadow: ONLY for popovers, menus and the hero screenshot frame */
  --shadow-pop: light-dark(
    0 8px 24px rgb(18 22 28 / 0.12), 0 8px 24px rgb(0 0 0 / 0.5));

  /* Layout */
  --gutter: 16px;
  --header-h: 56px;
  --container: 1264px;  /* overridden by layout classes, see 4.4 */
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (min-width: 640px)  { :root { --gutter: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 32px; } }

::selection { background: var(--marker); color: var(--marker-ink); }

/* Textburrow's default; explicit Light/Dark retain the original palettes. */
:root:not([data-theme]), :root[data-theme="autumn"] {
  color-scheme: light;
  accent-color: var(--accent);
  --bg: #FBF4E8; --surface: #FFF9EF; --surface-2: #F1E3D0;
  --line: #D4BDA3; --line-strong: #98755E;
  --ink: #3E2A21; --ink-2: #634839; --ink-3: #735A4B;
  --accent: #9C4428; --accent-hover: #7E321E; --accent-ink: #FFF9EF; --accent-soft: #F3DCCD;
  --marker: #D79A3B; --marker-soft: #F4E1B7; --marker-ink: #3E2A21;
  --band-bg: #3E2A21; --band-ink: #FFF9EF;
  --shadow-pop: 0 8px 24px rgb(62 42 33 / 0.14);
}