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