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, in four surface levels, so that blocks read apart without
24 hue. Dark: each level is lighter than the one below it; light: each is
25 whiter. Hue is kept for code, diffs and verdicts, and one accent, the teal
26 of Despair, marks where you are and what is alive: the current tab, the row
27 cursor, links in prose, open folders. */
28@layer tokens {
29 :root {
30 color-scheme: light dark;
31
32 /* surfaces, bottom to top */
33 --bg-canvas: light-dark(#f3f3f3, #050505); /* the page */
34 --bg-inset: light-dark(#f8f8f8, #020202); /* code, fields: sunk into a surface */
35 --bg-surface:light-dark(#ffffff, #0c0c0c); /* cards, header, rail blocks */
36 --bg-raised: light-dark(#ececec, #151515); /* hover, buttons, panel rows */
37 --bg-strong: light-dark(#dedede, #212121); /* selected row, pressed button */
38 --bg-overlay:light-dark(#ffffff, #0f0f0f); /* dialogs */
39 --backdrop: light-dark(rgb(0 0 0 / .25), rgb(0 0 0 / .7));
40
41 --border: light-dark(#dddddd, #1c1c1c);
42 --border-strong: light-dark(#c2c2c2, #303030);
43
44 --ink: light-dark(#1b1b1b, #d6d6d6);
45 --ink-hi: light-dark(#000000, #fafafa);
46 --ink-dim: light-dark(#4d4d4d, #a3a3a3);
47 --ink-mute: light-dark(#616161, #8c8c8c);
48 --focus: light-dark(#000000, #ffffff);
49 --on-ink: light-dark(#ffffff, #050505); /* text on a filled ink button */
50
51 /* Colour, sparingly, from the owner's Despair theme. Light values are the
52 same hues darkened to AA. */
53 --teal: light-dark(#2f6b6b, #7db5b5);
54 --accent: var(--teal); /* the one accent of the interface */
55 --teal-2: light-dark(#355f5f, #5a8585);
56 --red: light-dark(#a8404b, #d96c75);
57 --rose: light-dark(#6b6570, #a7a2a9);
58
59 --syn-plain: var(--ink);
60 --syn-keyword: var(--teal);
61 --syn-string: var(--rose);
62 --syn-comment: light-dark(#5c5f63, #6e7277);
63 --syn-number: var(--teal-2);
64 --syn-func: var(--ink-hi);
65 --syn-type: var(--teal-2);
66 --syn-punct: var(--ink-dim);
67
68 --add: light-dark(#dcebeb, #0c1616);
69 --del: light-dark(#f2dfe1, #1d0e10);
70
71 --font: "Atkinson Hyperlegible Next", system-ui, sans-serif;
72 --mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
73 --fs: 15px;
74 --fs-code: 13px;
75 --fs-s: 13px;
76 --fs-xs: 12px;
77 --lh: 24px;
78 --lh-code: 20px;
79
80 /* spacing scale */
81 --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
82 --r: 8px; /* cards, dialogs */
83 --r-s: 6px; /* buttons, fields */
84
85 --pad: var(--s5);
86 --stick: 0px; /* top offset of sticky headers inside the content */
87 --measure: 80ch; /* reading width of prose */
88 --rail: 340px;
89 --page: 1320px;
90 --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 32px rgb(0 0 0 / .18);
91
92 /* names used by the code, diff and merge request sheets */
93 --paper: var(--bg-canvas);
94 --paper-alt: var(--bg-raised);
95 --row: var(--bg-raised);
96 --sel: var(--bg-strong);
97 --rule: var(--border);
98 }
99}