progress

src/styles/tokens.css

@@ -25,6 +25,8 @@
 
   /* Type */
   --font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  /* Menu bar only: the tactical HUD labels. */
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
 
   --step-display: clamp(2.75rem, 1.2rem + 6.2vw, 7rem);
   --step-h2:      clamp(1.9rem,  1.1rem + 2.6vw, 3.25rem);
@@ -33,6 +35,7 @@
   --step-title:   clamp(1.6rem,  1.2rem + 1.5vw, 2.5rem);
   --step-body:    clamp(1rem,    0.96rem + 0.2vw, 1.125rem);
   --step-small:   0.875rem;
+  --step-micro:   0.75rem;
 
   --weight-regular: 400;
   --weight-medium:  500;
@@ -40,6 +43,7 @@
   --track-display: -0.03em;
   --track-h2:      -0.02em;
   --track-h3:      -0.01em;
+  --track-caps:     0.08em;
 
   --leading-display: 1.02;
   --leading-h2:      1.08;
@@ -81,6 +85,21 @@
   /* Chrome */
   --header-height: 4.5rem;
 
+  /* HUD frame (menu bar): one line width and colour for every line, borders and crosses alike. */
+  --hud-line-width: 1px;
+  --hud-arm:        7px;
+  --hud-line:          rgb(26 26 24 / 0.3);
+  --hud-line-on-night: rgb(233 229 223 / 0.3);
+  /* Frosted glass behind the bar. One blur, kept small so it stays cheap to composite. */
+  --glass:          rgb(233 229 223 / 0.76);
+  --glass-on-night: rgb(14 16 15 / 0.56);
+  --glass-solid:          rgb(233 229 223 / 0.96);
+  --glass-solid-on-night: rgb(14 16 15 / 0.94);
+  --glass-blur:     14px;
+  /* Tints mixed from the text colour, so they work on either tone. */
+  --tint-hover:  6%;
+  --tint-active: 9%;
+
   /* Focus */
   --focus-width: 2px;
   --focus-offset: 3px;