/*
 * tokens.css — the base layer of the design tokens (ADR 0006). Loaded first on
 * every longread (src/_includes/longread.njk), before longread-tokens.css and
 * longread.css, and on every site page (src/_includes/base.njk), before
 * site-tokens.css and style.css (ADR 0007).
 *
 * Layers: `@layer base, type;` is declared here and in longread-tokens.css, so
 * the order holds whichever file loads first. A content type's own token file
 * (`type`, e.g. longread-tokens.css) may override any token here: these values
 * are the defaults, today the longread's. Base never refers to a type token
 * (scripts/check.js). Component rules (longread.css) are unlayered, so they win
 * over both layers; a book's style.css is unlayered too and may set only the
 * project tokens in PROJECT_TOKENS (lib/longread.js), which no layer defines.
 * No !important in a layer: it would reverse the layer order.
 *
 * Reading guide: one token per line, light first, dark below with the same
 * three selectors as ADR 0005 (system dark unless data-theme="light", and
 * data-theme="dark").
 */

@layer base, type;

@layer base {
  /* ── Tokens ──────────────────────────────────────────────────────────── */
  :root {
    /* Colour (light) */
    --paper: #FCFCFB;                          /* page background */
    --ink: #1C2129;                            /* body text */
    --muted: #5B6470;                          /* secondary text, H3, captions, markers */
    --rule: #E2E4E1;                           /* rules and borders */
    --card: #F0F1EF;                           /* cards, code background */
    /* Project tokens --accent-light/--accent-dark (a book's style.css) pick
       the accent per theme, so a book never repeats theme selectors. */
    --accent: var(--accent-light, #0B5C93);    /* links, H2, arrows, focus, active */
    --img-filter: none;                        /* images */
    --selection: #D9E8F4;                      /* ::selection background (text keeps its colour) */
    --field: #FFFFFF;                          /* input, select, textarea background */
    --field-rule: #858D98;                     /* field border, ≥ 3:1 against --field (WCAG 1.4.11) */
    color-scheme: light;

    /* Type */
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* system fonts only */

    /* Shape */
    --radius: 14px;                            /* cards, figures, hero */
    --radius-sm: 8px;                          /* images in figures, panel links */
    --radius-control: 10px;                    /* theme buttons */

    /* Focus */
    --focus-width: 2px;
    --focus-offset: 2px;
    --focus-radius: 4px;

    /* Touch target */
    --target: 44px;

    /* Motion (docs/design/longread.md §5) */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur-hover: 180ms;
    --dur-press: 120ms;
    --dur-in: 240ms;
    --dur-out: 180ms;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #0F1622;
      --ink: #DCE3EB;
      --muted: #97A3B4;
      --rule: #243247;
      --card: #182230;
      --accent: var(--accent-dark, #82C7E6);
      --img-filter: brightness(.86);
      --selection: #1D364C;
      --field: #0F1622;
      --field-rule: #5A6A80;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --paper: #0F1622;
    --ink: #DCE3EB;
    --muted: #97A3B4;
    --rule: #243247;
    --card: #182230;
    --accent: var(--accent-dark, #82C7E6);
    --img-filter: brightness(.86);
    --selection: #1D364C;
    --field: #0F1622;
    --field-rule: #5A6A80;
    color-scheme: dark;
  }
}

/* Base elements (ADR 0006). In the base layer, so every component rule in
   longread.css (unlayered) wins: .longread hr, blockquote and lists keep their
   look in books, and these values apply only where no component styles the
   element. Base tokens only. */
@layer base {
  /* ── Focus: one ring for everything (moved from longread.css, unchanged) ── */
  :focus-visible {
    outline: var(--focus-width) solid var(--accent);
    outline-offset: var(--focus-offset);
    border-radius: var(--focus-radius);
  }

  /* ── Grundelementer: deliberate visual change (PR #40, decision 4) ─────── */
  :root { accent-color: var(--accent); caret-color: var(--accent); }
  /* Background only: the text keeps its colour; --selection is ≥ 4.5:1 against
     --ink, --muted, --accent and the callout labels in both themes. */
  ::selection { background: var(--selection); }

  /* Text-like fields only: checkboxes, radios, ranges and colour pickers keep
     their native look and get the accent via accent-color. */
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea {
    font: inherit; color: var(--ink); background: var(--field);
    border: 1px solid var(--field-rule); border-radius: var(--radius-control);
    min-height: var(--target); padding: 0 12px;
  }
  textarea { padding: 10px 12px; }

  code, kbd, pre { font-family: var(--mono); }
  code { font-size: .875em; padding: .1em .3em; border-radius: var(--focus-radius); background: var(--card); }
  pre { font-size: .875em; padding: 14px 18px; border-radius: var(--radius); background: var(--card); overflow-x: auto; }
  pre code { font-size: inherit; padding: 0; background: none; }
  kbd {
    font-size: .8125em; padding: .05em .35em; border: 1px solid var(--rule); border-bottom-width: 2px;
    border-radius: var(--focus-radius); background: var(--paper);
  }
  hr { border: 0; border-top: 1px solid var(--rule); }
  blockquote { margin-left: 0; padding-left: 18px; border-left: 2px solid var(--rule); color: var(--muted); }
  abbr[title] { text-decoration: underline dotted; text-underline-offset: .18em; cursor: help; }
  dt { font-weight: 600; }
  dd { margin: 0 0 .5em; }
  details { border-block: 1px solid var(--rule); }
  summary { min-height: var(--target); padding-block: 10px; font-family: var(--sans); font-weight: 600; cursor: pointer; }
  ::marker { color: var(--muted); }
  ol > li::marker { font-variant-numeric: lining-nums tabular-nums; }
  /* ── Slut på grundelementer ─────────────────────────────────────────────── */
}