1@layer reset, tokens, base, components, utilities;
2
3/* Fonts: Atkinson Hyperlegible Next for the interface, Atkinson Hyperlegible
4 Mono for titles, code, shas, refs and keys. Both are embedded (static/fonts,
5 SIL OFL 1.1), latin subset, variable weight. The asset loader turns the
6 relative font and icon references into hashed URLs. */
7@font-face {
8 font-family: "Atkinson Hyperlegible Next";
9 src: url(fonts/atkinson-next.woff2) format("woff2");
10 font-weight: 200 800; font-style: normal; font-display: swap;
11}
12@font-face {
13 font-family: "Atkinson Hyperlegible Next";
14 src: url(fonts/atkinson-next-italic.woff2) format("woff2");
15 font-weight: 200 800; font-style: italic; font-display: swap;
16}
17@font-face {
18 font-family: "Atkinson Hyperlegible Mono";
19 src: url(fonts/atkinson-mono.woff2) format("woff2");
20 font-weight: 200 800; font-style: normal; font-display: swap;
21}
22
23/* Palette: grays only, in four surface levels, so that blocks read apart
24 without hue. Dark: each level is lighter than the one below it; light: each
25 is whiter. Hue is kept for code, diffs and verdicts. */
26@layer tokens {
27 :root {
28 color-scheme: light dark;
29
30 /* surfaces, bottom to top */
31 --bg-canvas: light-dark(#f3f3f3, #050505); /* the page */
32 --bg-inset: light-dark(#f8f8f8, #020202); /* code, fields: sunk into a surface */
33 --bg-surface:light-dark(#ffffff, #0c0c0c); /* cards, header, rail blocks */
34 --bg-raised: light-dark(#ececec, #151515); /* hover, buttons, panel rows */
35 --bg-strong: light-dark(#dedede, #212121); /* selected row, pressed button */
36 --bg-overlay:light-dark(#ffffff, #0f0f0f); /* dialogs */
37 --backdrop: light-dark(rgb(0 0 0 / .25), rgb(0 0 0 / .7));
38
39 --border: light-dark(#dddddd, #1c1c1c);
40 --border-strong: light-dark(#c2c2c2, #303030);
41
42 --ink: light-dark(#1b1b1b, #d6d6d6);
43 --ink-hi: light-dark(#000000, #fafafa);
44 --ink-dim: light-dark(#4d4d4d, #a3a3a3);
45 --ink-mute: light-dark(#616161, #8c8c8c);
46 --focus: light-dark(#000000, #ffffff);
47 --on-ink: light-dark(#ffffff, #050505); /* text on a filled ink button */
48
49 /* Colour, sparingly, from the owner's Despair theme: only code, diffs and
50 verdicts carry hue. Light values are the same hues darkened to AA. */
51 --teal: light-dark(#2f6b6b, #7db5b5);
52 --teal-2: light-dark(#355f5f, #5a8585);
53 --red: light-dark(#a8404b, #d96c75);
54 --rose: light-dark(#6b6570, #a7a2a9);
55
56 --syn-plain: var(--ink);
57 --syn-keyword: var(--teal);
58 --syn-string: var(--rose);
59 --syn-comment: light-dark(#5c5f63, #6e7277);
60 --syn-number: var(--teal-2);
61 --syn-func: var(--ink-hi);
62 --syn-type: var(--teal-2);
63 --syn-punct: var(--ink-dim);
64
65 --add: light-dark(#dcebeb, #0c1616);
66 --del: light-dark(#f2dfe1, #1d0e10);
67
68 --font: "Atkinson Hyperlegible Next", system-ui, sans-serif;
69 --mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
70 --fs: 15px;
71 --fs-code: 13px;
72 --fs-s: 13px;
73 --fs-xs: 12px;
74 --lh: 24px;
75 --lh-code: 20px;
76
77 /* spacing scale */
78 --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
79 --r: 8px; /* cards, dialogs */
80 --r-s: 6px; /* buttons, fields */
81
82 --pad: var(--s5);
83 --stick: 0px; /* top offset of sticky headers inside the content */
84 --measure: 80ch; /* reading width of prose */
85 --rail: 340px;
86 --page: 1320px;
87 --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 32px rgb(0 0 0 / .18);
88
89 /* names used by the code, diff and merge request sheets */
90 --paper: var(--bg-canvas);
91 --paper-alt: var(--bg-raised);
92 --row: var(--bg-raised);
93 --sel: var(--bg-strong);
94 --rule: var(--border);
95 }
96}