@tangle-network/brand 1.11.0 → 1.13.0

package/src/styles/named-themes.css

@@ -56,7 +56,9 @@
  * from the complete canonical light baseline in tokens.css. */
 [data-theme="aubergine-light"],
 [data-theme="arena-light"],
-[data-theme="tangle-light"] {
+[data-theme="super-light"],
+[data-theme="tangle-light"],
+[data-theme="agents-light"] {
   --hsl-secondary-foreground: 0 0% 10%;
   --surface-neutral-text: #4b5563;
 }
@@ -81,7 +83,10 @@
   --border-subtle: rgba(183,157,255,0.12); --border-default: rgba(183,157,255,0.22);
   --border-hover: rgba(183,157,255,0.40); --accent-text: #c4b0ff;
   --brand-primary: #8f8bff; --brand-glow: #c4b0ff;
-  --text-primary: #f4f1fd; --text-secondary: #cec4e8; --text-muted: #a99fc8; --text-dim: #786d99;
+  --text-primary: #f4f1fd; --text-secondary: #cec4e8; --text-muted: #b7afd1; --text-dim: #a59ebb;
+  --md3-surface: var(--bg-root); --md3-surface-dim: var(--md3-surface-container-lowest);
+  --md3-surface-bright: var(--md3-surface-container-highest); --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
 }
 [data-theme="aubergine-light"] {
   --hsl-background: 258 60% 96%;  --hsl-foreground: 258 45% 11%;
@@ -100,7 +105,10 @@
   --border-subtle: rgba(60,32,110,0.10); --border-default: rgba(60,32,110,0.16);
   --border-hover: rgba(60,32,110,0.30); --accent-text: #6d28d9;
   --brand-primary: #6d28d9; --brand-glow: #8b5cf6;
-  --text-primary: #160f22; --text-secondary: #3f3460; --text-muted: #6c6289; --text-dim: #8a82a6;
+  --text-primary: #160f22; --text-secondary: #3f3460; --text-muted: #585070; --text-dim: #655d82;
+  --md3-surface: var(--bg-root); --md3-surface-dim: var(--depth-2);
+  --md3-surface-bright: #ffffff; --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
 }
 
 /* ───────────────────────── Arena — emerald / green accent ────────────────── */
@@ -121,7 +129,10 @@
   --border-subtle: rgba(52,211,153,0.10); --border-default: rgba(52,211,153,0.18);
   --border-hover: rgba(52,211,153,0.32); --accent-text: #34d399;
   --brand-primary: #10b981; --brand-glow: #34d399;
-  --text-primary: #ecfdf5; --text-secondary: #c2e8d6; --text-muted: #8fb6a3; --text-dim: #5f8472;
+  --text-primary: #ecfdf5; --text-secondary: #c2e8d6; --text-muted: #8fb6a3; --text-dim: #7ba08e;
+  --md3-surface: var(--bg-root); --md3-surface-dim: var(--md3-surface-container-lowest);
+  --md3-surface-bright: var(--md3-surface-container-highest); --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
 }
 [data-theme="arena-light"] {
   --hsl-background: 150 30% 96%;  --hsl-foreground: 158 30% 10%;
@@ -140,7 +151,70 @@
   --border-subtle: rgba(6,95,70,0.10); --border-default: rgba(6,95,70,0.16);
   --border-hover: rgba(6,95,70,0.30); --accent-text: #047857;
   --brand-primary: #059669; --brand-glow: #10b981;
-  --text-primary: #06231a; --text-secondary: #285048; --text-muted: #5f8472; --text-dim: #82a699;
+  --text-primary: #06231a; --text-secondary: #285048; --text-muted: #455f52; --text-dim: #4e6d62;
+  --md3-surface: var(--bg-root); --md3-surface-dim: var(--depth-2);
+  --md3-surface-bright: #ffffff; --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
+}
+
+/* ───────────────────────── Super — warm neutral / forest accent ─────────────
+ * SUPER, the local logistics app. Warm green-grey planes with a forest action
+ * colour. Light is the product's primary mode; dark keeps the same hue family.
+ * Status and category tones are inherited, never retinted. */
+[data-theme="super"] {
+  --hsl-background: 120 12% 8%;   --hsl-foreground: 86 20% 93%;
+  --hsl-card: 120 11% 12%;        --hsl-card-foreground: 86 20% 93%;
+  --hsl-popover: 120 10% 15%;     --hsl-popover-foreground: 86 20% 93%;
+  --hsl-primary: 139 31% 61%;     --hsl-primary-foreground: 140 35% 8%;
+  --hsl-secondary: 120 9% 17%;    --hsl-secondary-foreground: 86 20% 93%;
+  --hsl-muted: 120 9% 17%;        --hsl-muted-foreground: 95 10% 67%;
+  --hsl-accent: 120 10% 18%;      --hsl-accent-foreground: 86 20% 93%;
+  --hsl-border: 120 9% 25%;       --hsl-input: 120 9% 17%;
+  --hsl-ring: 139 31% 61%;
+  --depth-1: #121712; --depth-2: #1c231c; --depth-3: #232b23; --depth-4: #2b342b;
+  --bg-root: #121712; --bg-card: var(--depth-2); --bg-input: var(--depth-3);
+  --md3-surface-container-lowest: #0d110d; --md3-surface-container-low: #171d17;
+  --md3-surface-container: #1c231c; --md3-surface-container-high: #232b23;
+  --md3-surface-container-highest: #2b342b; --md3-outline-variant: #3a453a;
+  --border-subtle: rgba(190,210,180,0.12); --border-default: rgba(190,210,180,0.20);
+  --border-hover: rgba(190,210,180,0.34); --accent-text: #8fd0a4;
+  --brand-primary: #7dbb91; --brand-glow: #8fd0a4;
+  --text-primary: #eef1ea; --text-secondary: #cbd3c5; --text-muted: #a9b3a2; --text-dim: #959f8f;
+  --md3-primary: #8fd0a4; --bg-hover: rgba(190,210,180,0.06); --bg-selection: rgba(125,187,145,0.28);
+  --accent-surface-soft: rgba(125,187,145,0.08); --accent-surface-strong: rgba(125,187,145,0.24);
+  --border-accent: rgba(125,187,145,0.38); --border-accent-hover: rgba(125,187,145,0.56);
+  --btn-primary-bg: #7dbb91; --btn-primary-hover: #8fcaa1; --btn-primary-text: #0e1d13;
+  --btn-cta-bg: #7dbb91; --btn-cta-text: #0e1d13;
+  --md3-surface: var(--bg-root); --md3-surface-dim: var(--md3-surface-container-lowest);
+  --md3-surface-bright: var(--md3-surface-container-highest); --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
+}
+[data-theme="super-light"] {
+  --hsl-background: 75 22% 96%;   --hsl-foreground: 114 13% 15%;
+  --hsl-card: 0 0% 100%;          --hsl-card-foreground: 114 13% 15%;
+  --hsl-popover: 0 0% 100%;       --hsl-popover-foreground: 114 13% 15%;
+  --hsl-primary: 148 40% 25%;     --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 80 18% 93%;    --hsl-muted: 80 18% 93%;
+  --hsl-muted-foreground: 99 9% 37%;
+  --hsl-accent: 80 18% 93%;       --hsl-border: 87 17% 87%;
+  --hsl-input: 92 14% 78%;        --hsl-ring: 144 31% 34%;
+  --depth-1: #f7f8f4; --depth-2: #eff1eb; --depth-3: #ffffff; --depth-4: #ffffff;
+  --bg-root: #f7f8f4; --bg-card: #ffffff; --bg-input: #eff1eb;
+  --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #fcfcf9;
+  --md3-surface-container: #f7f8f4; --md3-surface-container-high: #eff1eb;
+  --md3-surface-container-highest: #e6eae1; --md3-outline-variant: #dfe4d9;
+  --border-subtle: rgba(34,43,33,0.10); --border-default: rgba(34,43,33,0.16);
+  --border-hover: rgba(34,43,33,0.30); --accent-text: #275a3f;
+  --brand-primary: #275a3f; --brand-glow: #3b7050;
+  --text-primary: #222b21; --text-secondary: #46523f; --text-muted: #5d6857; --text-dim: #616c5a;
+  --md3-primary: #275a3f; --bg-hover: rgba(34,43,33,0.04); --bg-selection: rgba(39,90,63,0.16);
+  --accent-surface-soft: rgba(39,90,63,0.06); --accent-surface-strong: rgba(39,90,63,0.14);
+  --border-accent: rgba(39,90,63,0.30); --border-accent-hover: rgba(39,90,63,0.45);
+  --btn-primary-bg: #275a3f; --btn-primary-hover: #1e4832; --btn-primary-text: #ffffff;
+  --btn-cta-bg: #275a3f; --btn-cta-text: #ffffff;
+  --md3-surface: var(--bg-root); --md3-surface-dim: var(--depth-2);
+  --md3-surface-bright: #ffffff; --md3-surface-variant: var(--md3-surface-container-high);
+  --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
 }
 
 /* ───────────────────────── Tangle — neutral dark spine ─────────────────────
@@ -188,7 +262,7 @@
   --border-subtle: rgba(20,20,40,0.08); --border-default: rgba(20,20,40,0.14);
   --border-hover: rgba(20,20,40,0.26); --accent-text: #4f46e5;
   --brand-primary: #6366f1; --brand-glow: #818cf8;
-  --text-primary: #15131f; --text-secondary: #3f3a52; --text-muted: #6a6680; --text-dim: #9490a6;
+  --text-primary: #15131f; --text-secondary: #3f3a52; --text-muted: #59556b; --text-dim: #67627b;
 }
 
 /* ───────────────────── Intelligence — violet surface ramp ────────────────────
@@ -245,3 +319,259 @@
   --border-default: rgba(120, 108, 158, 0.18);
   --border-hover: rgba(120, 108, 158, 0.28);
 }
+
+/* ───────────────────── Hospitality — sage paper, forest accent ─────────────────
+ * Hospitality's product identity: a sage-tinted surface ladder and a forest-green
+ * accent in place of iris. It follows the canonical ladder's roles exactly (light
+ * paper cards on a tinted canvas; dark planes rising in the same steps as the
+ * neutral spine), so shared components keep their hierarchy and only the hue
+ * changes. Status tones are deliberately NOT overridden: approval, overdue and
+ * failure read the same in Hospitality as everywhere else.
+ *
+ * Apply `data-theme="hospitality"` on <html>. The mode comes from the `.dark`
+ * class the shared theme control already toggles: without `.dark` the scope is
+ * light, including before hydration, and tokens.css seeds it with the complete
+ * canonical light baseline exactly as it does `vault`; with `.dark` it takes the
+ * dark baseline and this file's dark ladder. A mode switch never needs a second
+ * attribute, and the two blocks declare the same properties. */
+[data-theme="hospitality"]:where(:not(.dark)) {
+  --hsl-background: 102 18% 92%;  --hsl-foreground: 143 25% 12%;
+  --hsl-card: 0 0% 100%;          --hsl-card-foreground: 143 25% 12%;
+  --hsl-popover: 0 0% 100%;       --hsl-popover-foreground: 143 25% 12%;
+  --hsl-primary: 153 38% 25%;     --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 126 17% 94%;   --hsl-secondary-foreground: 143 25% 12%;
+  --hsl-muted: 126 17% 94%;       --hsl-muted-foreground: 146 9% 39%;
+  --hsl-accent: 131 20% 91%;      --hsl-accent-foreground: 143 25% 12%;
+  --hsl-border: 130 15% 84%;      --hsl-input: 105 22% 97.5%;
+  --hsl-ring: 148 28% 43%;
+  --sidebar-background: 0 0% 100%;       --sidebar-foreground: 143 25% 12%;
+  --sidebar-primary: 153 38% 25%;        --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 126 17% 94%;         --sidebar-accent-foreground: 143 25% 12%;
+  --sidebar-border: 130 15% 84%;         --sidebar-ring: 148 28% 43%;
+  --md3-surface: #e9eee7; --md3-surface-dim: #d5ded3; --md3-surface-bright: #ffffff;
+  --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #f8faf7;
+  --md3-surface-container: #ffffff; --md3-surface-container-high: #edf2ee;
+  --md3-surface-container-highest: #ffffff; --md3-surface-variant: #edf2ee;
+  --md3-on-surface: #17261d; --md3-on-surface-variant: #5a6c62;
+  --md3-outline: #6d8376; --md3-outline-variant: #d0dcd2;
+  --md3-primary: #285842; --md3-primary-dim: #1f4735; --md3-primary-container: #1f4735;
+  --md3-on-primary: #ffffff; --md3-surface-tint: #285842;
+  --depth-1: #e9eee7; --depth-2: #ffffff; --depth-3: #edf2ee; --depth-4: #ffffff;
+  --bg-root: #e9eee7; --bg-dark: #e9eee7; --bg-section: #e9eee7;
+  --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-input: #f8faf7;
+  --bg-hover: rgba(40, 88, 66, 0.05); --bg-selection: rgba(40, 88, 66, 0.16);
+  --border-subtle: rgba(23, 38, 29, 0.10); --border-default: rgba(23, 38, 29, 0.14);
+  --border-hover: rgba(23, 38, 29, 0.24);
+  --border-accent: rgba(40, 88, 66, 0.20); --border-accent-hover: rgba(40, 88, 66, 0.36);
+  --accent-text: #285842;
+  --accent-surface-soft: rgba(40, 88, 66, 0.05); --accent-surface-strong: rgba(40, 88, 66, 0.13);
+  --accent-gradient-strong: linear-gradient(135deg, #1f4735, #336c52);
+  --brand-primary: #3d7b5f; --brand-cool: #4f8c6c; --brand-glow: #6cac8a; --brand-vibrant: #3d7b5f;
+  --btn-primary-bg: #285842; --btn-primary-hover: #336c52; --btn-primary-text: #ffffff;
+  --text-primary: #17261d; --text-secondary: #36493e; --text-muted: #5a6c62; --text-dim: #5f6d65;
+}
+.dark[data-theme="hospitality"] {
+  --hsl-background: 150 8% 8.6%;  --hsl-foreground: 140 12% 90.2%;
+  --hsl-card: 150 6% 18.8%;       --hsl-card-foreground: 140 12% 90.2%;
+  --hsl-popover: 150 6% 20.8%;    --hsl-popover-foreground: 140 12% 90.2%;
+  --hsl-primary: 145 31% 59%;     --hsl-primary-foreground: 153 35% 10%;
+  --hsl-secondary: 150 6% 20.8%;  --hsl-secondary-foreground: 140 12% 90.2%;
+  --hsl-muted: 150 6% 20.8%;      --hsl-muted-foreground: 145 8% 71%;
+  --hsl-accent: 150 6% 20.8%;     --hsl-accent-foreground: 140 12% 90.2%;
+  --hsl-border: 150 5% 29.8%;     --hsl-input: 150 8% 12.2%;
+  --hsl-ring: 145 31% 59%;
+  --sidebar-background: 150 9% 6.3%;     --sidebar-foreground: 140 12% 90.2%;
+  --sidebar-primary: 145 31% 59%;        --sidebar-primary-foreground: 153 35% 10%;
+  --sidebar-accent: 150 6% 20.8%;        --sidebar-accent-foreground: 140 12% 90.2%;
+  --sidebar-border: 150 5% 29.8%;        --sidebar-ring: 145 31% 59%;
+  --md3-surface: #141816; --md3-surface-dim: #0f1210; --md3-surface-bright: #383e3b;
+  --md3-surface-container-lowest: #0f1210; --md3-surface-container-low: #212624;
+  --md3-surface-container: #2d3330; --md3-surface-container-high: #323835;
+  --md3-surface-container-highest: #383e3b; --md3-surface-variant: #323835;
+  --md3-on-surface: #e3e9e5; --md3-on-surface-variant: #afbbb4;
+  --md3-outline: #8a938e; --md3-outline-variant: #48504c;
+  --md3-primary: #76b791; --md3-primary-dim: #396a52; --md3-primary-container: #396a52;
+  --md3-on-primary: #11221a; --md3-surface-tint: #76b791;
+  --depth-1: #141816; --depth-2: #2d3330; --depth-3: #323835; --depth-4: #383e3b;
+  --bg-root: #141816; --bg-dark: #141816; --bg-section: #141816;
+  --bg-card: #2d3330; --bg-elevated: #383e3b; --bg-input: #1d221f;
+  --bg-hover: rgba(118, 183, 145, 0.07); --bg-selection: rgba(118, 183, 145, 0.28);
+  --border-subtle: rgba(227, 233, 229, 0.10); --border-default: rgba(227, 233, 229, 0.16);
+  --border-hover: rgba(227, 233, 229, 0.28);
+  --border-accent: rgba(118, 183, 145, 0.35); --border-accent-hover: rgba(118, 183, 145, 0.50);
+  --accent-text: #76b791;
+  --accent-surface-soft: rgba(118, 183, 145, 0.07); --accent-surface-strong: rgba(57, 106, 82, 0.40);
+  --accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);
+  --brand-primary: #529873; --brand-cool: #76b791; --brand-glow: #94c7a9; --brand-vibrant: #529873;
+  --btn-primary-bg: #76b791; --btn-primary-hover: #8dc3a4; --btn-primary-text: #11221a;
+  --text-primary: #e3e9e5; --text-secondary: #c5cec9; --text-muted: #afbbb4; --text-dim: #9ea9a2;
+}
+/* agents:begin — generated by scripts/gen-ladders.mjs from its MAP; edit there, not these lines.
+ * Agents (Agent Builder): white light pages, cards separated by shadow, and a
+ * mauve neutral ladder. Surfaces, text and borders only; the accent, status
+ * and category tokens stay canonical. Select data-theme="agents" for dark and
+ * data-theme="agents-light" for light. */
+[data-theme="agents"] {
+  --bg-card: #1a191b;
+  --hsl-background: 270 5.6% 7.1%;
+  --hsl-foreground: 240 6.2% 93.7%;
+  --hsl-card: 270 3.8% 10.2%;
+  --hsl-card-foreground: 240 6.2% 93.7%;
+  --hsl-popover: 260 4.2% 13.9%;
+  --hsl-popover-foreground: 240 6.2% 93.7%;
+  --hsl-secondary: 260 4.2% 13.9%;
+  --hsl-secondary-foreground: 240 6.2% 93.7%;
+  --hsl-muted: 260 4.2% 13.9%;
+  --hsl-muted-foreground: 258 6.9% 71.8%;
+  --hsl-accent: 270 4.7% 16.9%;
+  --hsl-accent-foreground: 240 6.2% 93.7%;
+  --hsl-border: 270 5% 23.5%;
+  --hsl-input: 251 4.8% 44.9%;
+  --sidebar-background: 270 3.8% 10.2%;
+  --sidebar-foreground: 240 6.2% 93.7%;
+  --sidebar-accent: 270 4.7% 16.9%;
+  --sidebar-accent-foreground: 240 6.2% 93.7%;
+  --sidebar-border: 270 5% 23.5%;
+  --md3-surface: #121113;
+  --md3-surface-dim: #121113;
+  --md3-surface-bright: #323035;
+  --md3-surface-container-lowest: #121113;
+  --md3-surface-container-low: #1a191b;
+  --md3-surface-container: #1a191b;
+  --md3-surface-container-high: #232225;
+  --md3-surface-container-highest: #2b292d;
+  --md3-surface-variant: #232225;
+  --md3-on-surface: #eeeef0;
+  --md3-on-surface-variant: #b5b2bc;
+  --md3-outline: #6f6d78;
+  --md3-outline-variant: #3c393f;
+  --depth-1: #121113;
+  --depth-2: #1a191b;
+  --depth-3: #232225;
+  --depth-4: #2b292d;
+  --bg-root: #121113;
+  --bg-dark: #121113;
+  --bg-elevated: #232225;
+  --bg-section: #121113;
+  --bg-input: #1a191b;
+  --bg-hover: #232225;
+  --text-primary: #eeeef0;
+  --text-secondary: #eeeef0;
+  --text-muted: #b5b2bc;
+  --text-dim: #b5b2bc;
+  --border-subtle: #3c393f;
+  --border-default: #49474e;
+  --border-hover: #625f69;
+  --shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
+  --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
+  --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px rgb(0 0 0 / 0.6);
+}
+[data-theme="agents-light"] {
+  --bg-card: #ffffff;
+  --hsl-background: 0 0% 100%;
+  --hsl-foreground: 257 10.1% 13.5%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 257 10.1% 13.5%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 257 10.1% 13.5%;
+  --hsl-secondary: 285 14.3% 94.5%;
+  --hsl-secondary-foreground: 257 10.1% 13.5%;
+  --hsl-muted: 285 14.3% 94.5%;
+  --hsl-muted-foreground: 252 4.8% 40.8%;
+  --hsl-accent: 276 11.6% 91.6%;
+  --hsl-accent-foreground: 257 10.1% 13.5%;
+  --hsl-border: 262 11.4% 86.3%;
+  --hsl-input: 249 6% 57.5%;
+  --sidebar-background: 270 20% 98%;
+  --sidebar-foreground: 257 10.1% 13.5%;
+  --sidebar-accent: 276 11.6% 91.6%;
+  --sidebar-accent-foreground: 257 10.1% 13.5%;
+  --sidebar-border: 262 11.4% 86.3%;
+  --md3-surface: #ffffff;
+  --md3-surface-dim: #faf9fb;
+  --md3-surface-bright: #ffffff;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #faf9fb;
+  --md3-surface-container: #ffffff;
+  --md3-surface-container-high: #f2eff3;
+  --md3-surface-container-highest: #ffffff;
+  --md3-surface-variant: #f2eff3;
+  --md3-on-surface: #211f26;
+  --md3-on-surface-variant: #65636d;
+  --md3-outline: #8e8c99;
+  --md3-outline-variant: #dbd8e0;
+  --depth-1: #ffffff;
+  --depth-2: #ffffff;
+  --depth-3: #faf9fb;
+  --depth-4: #ffffff;
+  --bg-root: #ffffff;
+  --bg-dark: #faf9fb;
+  --bg-elevated: #ffffff;
+  --bg-section: #faf9fb;
+  --bg-input: #ffffff;
+  --bg-hover: #f2eff3;
+  --text-primary: #211f26;
+  --text-secondary: #211f26;
+  --text-muted: #65636d;
+  --text-dim: #65636d;
+  --border-subtle: #dbd8e0;
+  --border-default: #d0cdd7;
+  --border-hover: #bcbac7;
+  --shadow-card: 0 0 0 1px rgb(33 31 38 / 0.03), 0 2px 6px rgb(33 31 38 / 0.05), 0 4px 8px rgb(33 31 38 / 0.08);
+  --shadow-dropdown: 0 0 0 1px rgb(33 31 38 / 0.04), 0 6px 16px rgb(33 31 38 / 0.12);
+  --shadow-overlay: 0 8px 28px rgb(33 31 38 / 0.28);
+}
+/* agents:end */
+
+/* ───────────────────── Website — indigo night, indigo paper ───────────────────
+ * The public site's identity (tangle.tools): an indigo-tinted surface ladder in
+ * dark and cool indigo paper in light. Only the planes and ink change; the Tangle
+ * accent, status, category and syntax tones stay canonical.
+ *
+ * Apply `class="dark" data-theme="website"` on <html>. A section that reads as
+ * paper (long-form, editorial) sets `data-theme="website"` without `.dark` and
+ * becomes a complete light island; tokens.css seeds both modes with the
+ * canonical baselines, as it does Hospitality. The two blocks declare the same
+ * properties, so nothing from one mode survives into the other. */
+[data-theme="website"]:where(:not(.dark)) {
+  --hsl-background: 240 42.9% 97.3%;  --hsl-foreground: 224 18% 12%;
+  --hsl-card: 0 0% 100%;              --hsl-card-foreground: 224 18% 12%;
+  --hsl-popover: 0 0% 100%;           --hsl-popover-foreground: 224 18% 12%;
+  --hsl-secondary: 240 35.7% 94.5%;   --hsl-secondary-foreground: 224 18% 12%;
+  --hsl-muted: 240 35.7% 94.5%;       --hsl-muted-foreground: 240 13% 42.4%;
+  --hsl-accent: 240 23.1% 92.4%;      --hsl-accent-foreground: 224 18% 12%;
+  --hsl-border: 240 26.3% 88.8%;      --hsl-input: 240 42.9% 97.3%;
+  --md3-surface: #f5f5fb; --md3-surface-dim: #e7e7f0; --md3-surface-bright: #ffffff;
+  --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #fafafd;
+  --md3-surface-container: #ffffff; --md3-surface-container-high: #ececf6;
+  --md3-surface-container-highest: #ffffff; --md3-surface-variant: #ececf6;
+  --md3-on-surface: #191c24; --md3-on-surface-variant: #5e5e7a;
+  --md3-outline: #5e5e7a; --md3-outline-variant: #dbdbea;
+  --depth-1: #f5f5fb; --depth-2: #ffffff; --depth-3: #ececf6; --depth-4: #ffffff;
+  --bg-root: #f5f5fb; --bg-dark: #f5f5fb; --bg-section: #ececf6;
+  --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-input: #f5f5fb;
+  --border-subtle: rgba(25, 28, 36, 0.08); --border-default: rgba(25, 28, 36, 0.12);
+  --border-hover: rgba(25, 28, 36, 0.24);
+  --text-primary: #191c24; --text-secondary: #3a3a50; --text-muted: #5e5e7a; --text-dim: #5e5e7a;
+}
+.dark[data-theme="website"] {
+  --hsl-background: 243 45% 7.8%;     --hsl-foreground: 0 0% 99.2%;
+  --hsl-card: 244 34.9% 16.3%;        --hsl-card-foreground: 0 0% 99.2%;
+  --hsl-popover: 243 33.3% 21.2%;     --hsl-popover-foreground: 0 0% 99.2%;
+  --hsl-secondary: 244 34% 19%;       --hsl-secondary-foreground: 0 0% 99.2%;
+  --hsl-muted: 244 34% 19%;           --hsl-muted-foreground: 237 23% 65.9%;
+  --hsl-accent: 243 33.3% 21.2%;      --hsl-accent-foreground: 0 0% 99.2%;
+  --hsl-border: 243 31.9% 28.2%;      --hsl-input: 243 41.2% 10%;
+  --md3-surface: #0c0b1d; --md3-surface-dim: #080814; --md3-surface-bright: #2e2c56;
+  --md3-surface-container-lowest: #080814; --md3-surface-container-low: #141328;
+  --md3-surface-container: #1d1b38; --md3-surface-container-high: #222041;
+  --md3-surface-container-highest: #262448; --md3-surface-variant: #222041;
+  --md3-on-surface: #fdfdfd; --md3-on-surface-variant: #aaa8b8;
+  --md3-outline: #9496bc; --md3-outline-variant: #33315f;
+  --depth-1: #0c0b1d; --depth-2: #1d1b38; --depth-3: #222041; --depth-4: #262448;
+  --bg-root: #0c0b1d; --bg-dark: #0c0b1d; --bg-section: #141328;
+  --bg-card: #1d1b38; --bg-elevated: #262448; --bg-input: #100f24;
+  --border-subtle: rgba(255, 255, 255, 0.08); --border-default: rgba(255, 255, 255, 0.15);
+  --border-hover: rgba(255, 255, 255, 0.28);
+  --text-primary: #fdfdfd; --text-secondary: #aaa8b8; --text-muted: #9496bc; --text-dim: #9496bc;
+}