1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<style>
/* Fallback fonts with adjusted metrics to prevent layout shift on font swap.
* These match the metrics of the custom fonts so text doesn't reflow.
* Values from: https://developer.chrome.com/blog/font-fallbacks
* Inter values: https://github.com/rsms/inter/discussions/632
*/
@font-face {
font-family: "Inter Fallback";
src: local("Arial"), local("ArialMT");
ascent-override: 90.2%;
descent-override: 22.5%;
line-gap-override: 0%;
size-adjust: 107.4%;
}
@font-face {
font-family: "Plus Jakarta Sans Fallback";
src: local("Arial"), local("ArialMT");
/* Plus Jakarta Sans has similar metrics to Inter (geometric sans-serif) */
ascent-override: 94%;
descent-override: 23%;
line-gap-override: 0%;
size-adjust: 104%;
}
@font-face {
font-family: "JetBrains Mono Fallback";
src: local("Menlo"), local("Consolas"), local("Monaco");
ascent-override: 102%;
descent-override: 30%;
line-gap-override: 0%;
size-adjust: 98%;
}
:root {
/* Warm Workbench Theme - Light Mode */
/* Backgrounds */
--wt-color-bg: #faf9f7; /* near-white with warmth */
--wt-color-bg-elevated: #ffffff; /* pure white content cards */
--wt-color-bg-soft: #f5f3f0; /* subtle warm gray for header/sections */
/* Borders */
--wt-color-border-subtle: #e8e6e3;
/* Text */
--wt-color-text: #2d2926; /* warm charcoal */
--wt-color-text-muted: #6b635b; /* warm gray */
--wt-color-text-soft: #78716a; /* lighter warm gray, WCAG AA compliant */
/* Accents */
--wt-color-accent: #d97706; /* amber */
--wt-color-accent-soft: #fef3c7;
--wt-color-accent-strong: #b45309;
--wt-color-link: #b45309;
/* Craft details */
--wt-color-craft-brown: #8b7355; /* h2 underlines */
/* Code */
--wt-color-code-bg: #f8f7f6;
--wt-color-code-border: #e5e3e0;
--wt-color-code-inline-text: #b45309; /* amber text for inline code */
/* Shadows - using oklch for proper alpha blending */
--wt-shadow-soft: oklch(0% 0 0 / 0.03);
--wt-shadow-medium: oklch(0% 0 0 / 0.06);
--wt-shadow-accent: oklch(from var(--wt-color-accent) l c h / 0.15);
--wt-shadow-accent-strong: oklch(from var(--wt-color-accent) l c h / 0.25);
/* Terminal output colors (used by terminal shortcode) */
--cyan: #0a8080;
--green: #1b7f4b;
--bright-white: #ece9e6; /* gutter background - subtle on light theme */
--red: #dc2626;
--yellow: #ca8a04;
--blue: #2563eb;
--magenta: #9333ea;
--bright-black: #6b7280;
/* Layout */
--wt-header-height: 60px;
--wt-main-padding-top: 40px;
/* Border Radius Scale */
--wt-radius-sm: 0.25rem; /* 4px - small elements, TOC items */
--wt-radius-md: 0.5rem; /* 8px - buttons, inputs, cards */
--wt-radius-lg: 0.75rem; /* 12px - content cards, modals */
--wt-radius-pill: 999px; /* pill shapes */
/* Typography - adjusted fallbacks prevent layout shift on font swap */
--wt-font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--wt-font-head: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", var(--wt-font-sans);
--wt-font-mono: "JetBrains Mono", "JetBrains Mono Fallback", "Fira Code", "SF Mono", Menlo, monospace;
}
/* Dark Mode - follows system preference */
@media (prefers-color-scheme: dark) {
:root {
/* Backgrounds - warm darks */
--wt-color-bg: #1c1b1a;
--wt-color-bg-elevated: #262524;
--wt-color-bg-soft: #222120;
/* Borders */
--wt-color-border-subtle: #3a3836;
/* Text - warm lights */
--wt-color-text: #e8e6e3;
--wt-color-text-muted: #a8a29e;
--wt-color-text-soft: #8a847e;
/* Accents - slightly brighter for dark backgrounds */
--wt-color-accent: #f59e0b;
--wt-color-accent-soft: #422006;
--wt-color-accent-strong: #fbbf24;
--wt-color-link: #fcd34d;
/* Craft details - muted amber ties to brand in dark mode */
--wt-color-craft-brown: #92400e;
/* Code */
--wt-color-code-bg: #252321;
--wt-color-code-border: #3a3735;
--wt-color-code-inline-text: #fbbf24; /* amber text for inline code */
/* Shadows - lighter in dark mode for visibility */
--wt-shadow-soft: oklch(0% 0 0 / 0.15);
--wt-shadow-medium: oklch(0% 0 0 / 0.25);
--wt-shadow-accent: oklch(from var(--wt-color-accent) l c h / 0.2);
--wt-shadow-accent-strong: oklch(from var(--wt-color-accent) l c h / 0.35);
/* Terminal colors - brighter for dark mode */
--cyan: #67d4d4;
--green: #4ade80;
--bright-white: #3a3836; /* gutter background - subtle on dark theme */
--red: #f87171;
--yellow: #fbbf24;
--blue: #60a5fa;
--magenta: #c084fc;
--bright-black: #6b7280;
}
}
</style>