Design system tokens (#67)

web/src/style.css

@@ -40,6 +40,24 @@
 
   /* the one interactive hue */
   --accent: oklch(0.8 0.12 220);
+  --accent-bright: oklch(0.88 0.12 220);
+
+  /* dead lamp and pressed-control lowlight */
+  --lamp-off: oklch(0.3 0.012 250);
+  --lowlight: oklch(0 0 0 / 30%);
+
+  /* release verdicts (§9.3) — rejected is quiet slate, never fault red */
+  --verdict-eligible: oklch(0.8 0.17 150);
+  --verdict-waived: oklch(0.82 0.14 80);
+  --verdict-rejected: oklch(0.68 0.02 250);
+
+  /* library status (§4.2) — informational, never a severity ramp:
+     activity in one violet family, satisfaction in neutrals */
+  --status-airing: oklch(0.78 0.14 305);
+  --status-incomplete: oklch(0.72 0.09 305);
+  --status-waiting: oklch(0.64 0.045 305);
+  --status-complete: oklch(0.85 0.01 250);
+  --status-ended: oklch(0.62 0.015 250);
 
   /* type */
   --font-label: system-ui, "Segoe UI", sans-serif;
@@ -47,6 +65,15 @@
     ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
   --font-display: "Rajdhani", "Avenir Next Condensed", "Arial Narrow", sans-serif;
 
+  /* type scale */
+  --text-2xs: 0.6875rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 1rem;
+  --text-md: 1.0625rem;
+  --text-lg: 1.3125rem;
+  --text-xl: 1.625rem;
+
   /* rhythm */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
@@ -77,13 +104,13 @@ body {
   background: var(--ground);
   color: var(--ink);
   font-family: var(--font-label);
-  font-size: 1rem;
+  font-size: var(--text-base);
   line-height: 1.5;
 }
 
 .readout {
   font-family: var(--font-readout);
-  font-size: 0.8125rem;
+  font-size: var(--text-sm);
 }
 
 .dim {
@@ -107,7 +134,7 @@ body {
   border-bottom: 0;
   border-top: 1px solid var(--line);
   justify-content: space-between;
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
 }
 
 .rail-id {
@@ -119,7 +146,7 @@ body {
 .wordmark {
   margin: 0;
   font-family: var(--font-display);
-  font-size: 1.625rem;
+  font-size: var(--text-xl);
   font-weight: 700;
   letter-spacing: 0.1em;
   line-height: 1;
@@ -193,7 +220,7 @@ body {
 
 /* dead air: dark, no glow, no motion */
 .lamp[data-state="off"] {
-  --lamp: oklch(0.3 0.012 250);
+  --lamp: var(--lamp-off);
   box-shadow: none;
 }
 
@@ -318,7 +345,7 @@ body {
 .module-name {
   margin: 0;
   font-family: var(--font-display);
-  font-size: 1.0625rem;
+  font-size: var(--text-md);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.12em;
@@ -326,7 +353,7 @@ body {
 }
 
 .module-master .module-name {
-  font-size: 1.3125rem;
+  font-size: var(--text-lg);
 }
 
 .module-status {
@@ -349,7 +376,7 @@ body {
 
 .module-role {
   margin: var(--space-2) 0 0;
-  font-size: 0.6875rem;
+  font-size: var(--text-2xs);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.12em;
@@ -358,7 +385,7 @@ body {
 
 .module-detail {
   margin: var(--space-1) 0 0;
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   color: var(--ink-muted);
   min-height: 1.2em;
 }
@@ -406,7 +433,7 @@ body {
   min-height: 2.75rem;
   padding: 0 var(--space-4);
   font-family: var(--font-readout);
-  font-size: 0.8125rem;
+  font-size: var(--text-sm);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--accent);
@@ -422,11 +449,11 @@ body {
 
 .control:hover {
   border-color: var(--accent);
-  color: oklch(from var(--accent) calc(l + 0.08) c h);
+  color: var(--accent-bright);
 }
 
 .control:active {
-  box-shadow: inset 0 1px oklch(0 0 0 / 30%);
+  box-shadow: inset 0 1px var(--lowlight);
 }
 
 .control:disabled {