@layer reset, tokens, base, components, utilities;

/* Fonts: Atkinson Hyperlegible Next for the interface, Atkinson Hyperlegible
   Mono for titles, code, shas, refs and keys. Both are embedded (static/fonts,
   SIL OFL 1.1), latin subset, variable weight. The asset loader turns the
   relative font and icon references into hashed URLs. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url(fonts/atkinson-next.woff2) format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url(fonts/atkinson-next-italic.woff2) format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url(fonts/atkinson-mono.woff2) format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* Palette: grays only, in four surface levels, so that blocks read apart
   without hue. Dark: each level is lighter than the one below it; light: each
   is whiter. Hue is kept for code, diffs and verdicts. */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* surfaces, bottom to top */
    --bg-canvas: light-dark(#f3f3f3, #050505); /* the page */
    --bg-inset:  light-dark(#f8f8f8, #020202); /* code, fields: sunk into a surface */
    --bg-surface:light-dark(#ffffff, #0c0c0c); /* cards, header, rail blocks */
    --bg-raised: light-dark(#ececec, #151515); /* hover, buttons, panel rows */
    --bg-strong: light-dark(#dedede, #212121); /* selected row, pressed button */
    --bg-overlay:light-dark(#ffffff, #0f0f0f); /* dialogs */
    --backdrop:  light-dark(rgb(0 0 0 / .25), rgb(0 0 0 / .7));

    --border:        light-dark(#dddddd, #1c1c1c);
    --border-strong: light-dark(#c2c2c2, #303030);

    --ink:      light-dark(#1b1b1b, #d6d6d6);
    --ink-hi:   light-dark(#000000, #fafafa);
    --ink-dim:  light-dark(#4d4d4d, #a3a3a3);
    --ink-mute: light-dark(#616161, #8c8c8c);
    --focus:    light-dark(#000000, #ffffff);
    --on-ink:   light-dark(#ffffff, #050505); /* text on a filled ink button */

    /* Colour, sparingly, from the owner's Despair theme: only code, diffs and
       verdicts carry hue. Light values are the same hues darkened to AA. */
    --teal:    light-dark(#2f6b6b, #7db5b5);
    --teal-2:  light-dark(#355f5f, #5a8585);
    --red:     light-dark(#a8404b, #d96c75);
    --rose:    light-dark(#6b6570, #a7a2a9);

    --syn-plain:   var(--ink);
    --syn-keyword: var(--teal);
    --syn-string:  var(--rose);
    --syn-comment: light-dark(#5c5f63, #6e7277);
    --syn-number:  var(--teal-2);
    --syn-func:    var(--ink-hi);
    --syn-type:    var(--teal-2);
    --syn-punct:   var(--ink-dim);

    --add: light-dark(#dcebeb, #0c1616);
    --del: light-dark(#f2dfe1, #1d0e10);

    --font: "Atkinson Hyperlegible Next", system-ui, sans-serif;
    --mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
    --fs: 15px;
    --fs-code: 13px;
    --fs-s: 13px;
    --fs-xs: 12px;
    --lh: 24px;
    --lh-code: 20px;

    /* spacing scale */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
    --r: 8px;   /* cards, dialogs */
    --r-s: 6px; /* buttons, fields */

    --pad: var(--s5);
    --stick: 0px;     /* top offset of sticky headers inside the content */
    --measure: 80ch;  /* reading width of prose */
    --rail: 340px;
    --page: 1320px;
    --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 32px rgb(0 0 0 / .18);

    /* names used by the code, diff and merge request sheets */
    --paper: var(--bg-canvas);
    --paper-alt: var(--bg-raised);
    --row: var(--bg-raised);
    --sel: var(--bg-strong);
    --rule: var(--border);
  }
}