@cahyo-dimas/freeday 2.1.0 → 3.0.0

package/dist/freeday.bundle.css

@@ -12,6 +12,14 @@
   --azure-800: #1c398c;
   --azure-900: #1c336e;
   --azure-950: #131e42;
+  --primary-50: var(--azure-50);
+  --primary-100: var(--azure-100);
+  --primary-300: var(--azure-300);
+  --primary-400: var(--azure-400);
+  --primary-500: var(--azure-500);
+  --primary-600: var(--azure-600);
+  --primary-700: var(--azure-700);
+  --primary-800: var(--azure-800);
   --slate-0: #ffffff;
   --slate-50: #f7f8fa;
   --slate-100: #eef0f4;
@@ -41,24 +49,129 @@
   --red-500: #ef4444;
   --red-600: #dc2626;
   --red-700: #b91c1c;
+  --amber-50: #fffbeb;
   --amber-100: #fef3c7;
+  --amber-300: #fcd34d;
   --amber-400: #fbbf24;
   --amber-500: #f59e0b;
   --amber-600: #d97706;
   --amber-700: #b45309;
   --amber-800: #92400e;
+  --green-50: #f0fdf4;
   --green-100: #dcfce7;
+  --green-300: #86efac;
   --green-400: #4ade80;
   --green-500: #22c55e;
   --green-600: #16a34a;
   --green-700: #15803d;
   --green-800: #166534;
+  --blue-50: #eff6ff;
   --blue-100: #dbeafe;
   --blue-300: #93c5fd;
   --blue-400: #60a5fa;
   --blue-500: #3b82f6;
   --blue-600: #2563eb;
   --blue-700: #1d4ed8;
+  --blue-800: #1e40af;
+  --emerald-50: #ecfdf5;
+  --emerald-100: #d1fae5;
+  --emerald-300: #6ee7b7;
+  --emerald-400: #34d399;
+  --emerald-500: #10b981;
+  --emerald-600: #059669;
+  --emerald-700: #047857;
+  --emerald-800: #065f46;
+  --lime-50: #f7fee7;
+  --lime-100: #ecfccb;
+  --lime-300: #bef264;
+  --lime-400: #a3e635;
+  --lime-500: #84cc16;
+  --lime-600: #65a30d;
+  --lime-700: #4d7c0f;
+  --lime-800: #3f6212;
+  --orange-50: #fff7ed;
+  --orange-100: #ffedd5;
+  --orange-300: #fdba74;
+  --orange-400: #fb923c;
+  --orange-500: #f97316;
+  --orange-600: #ea580c;
+  --orange-700: #c2410c;
+  --orange-800: #9a3412;
+  --yellow-50: #fefce8;
+  --yellow-100: #fef9c3;
+  --yellow-300: #fde047;
+  --yellow-400: #facc15;
+  --yellow-500: #eab308;
+  --yellow-600: #ca8a04;
+  --yellow-700: #a16207;
+  --yellow-800: #854d0e;
+  --yellow-900: #713f12;
+  --teal-50: #f0fdfa;
+  --teal-100: #ccfbf1;
+  --teal-300: #5eead4;
+  --teal-400: #2dd4bf;
+  --teal-500: #14b8a6;
+  --teal-600: #0d9488;
+  --teal-700: #0f766e;
+  --teal-800: #115e59;
+  --cyan-50: #ecfeff;
+  --cyan-100: #cffafe;
+  --cyan-300: #67e8f9;
+  --cyan-400: #22d3ee;
+  --cyan-500: #06b6d4;
+  --cyan-600: #0891b2;
+  --cyan-700: #0e7490;
+  --cyan-800: #155e75;
+  --indigo-50: #eef2ff;
+  --indigo-100: #e0e7ff;
+  --indigo-200: #c7d2fe;
+  --indigo-300: #a5b4fc;
+  --indigo-400: #818cf8;
+  --indigo-500: #6366f1;
+  --indigo-600: #4f46e5;
+  --indigo-700: #4338ca;
+  --indigo-800: #3730a3;
+  --violet-50: #f5f3ff;
+  --violet-100: #ede9fe;
+  --violet-200: #ddd6fe;
+  --violet-300: #c4b5fd;
+  --violet-400: #a78bfa;
+  --violet-500: #8b5cf6;
+  --violet-600: #7c3aed;
+  --violet-700: #6d28d9;
+  --violet-800: #5b21b6;
+  --purple-50: #faf5ff;
+  --purple-100: #f3e8ff;
+  --purple-300: #d8b4fe;
+  --purple-400: #c084fc;
+  --purple-500: #a855f7;
+  --purple-600: #9333ea;
+  --purple-700: #7e22ce;
+  --purple-800: #6b21a8;
+  --fuchsia-50: #fdf4ff;
+  --fuchsia-100: #fae8ff;
+  --fuchsia-300: #f0abfc;
+  --fuchsia-400: #e879f9;
+  --fuchsia-500: #d946ef;
+  --fuchsia-600: #c026d3;
+  --fuchsia-700: #a21caf;
+  --fuchsia-800: #86198f;
+  --pink-50: #fdf2f8;
+  --pink-100: #fce7f3;
+  --pink-300: #f9a8d4;
+  --pink-400: #f472b6;
+  --pink-500: #ec4899;
+  --pink-600: #db2777;
+  --pink-700: #be185d;
+  --pink-800: #9d174d;
+  --rose-50: #fff1f2;
+  --rose-100: #ffe4e6;
+  --rose-300: #fda4af;
+  --rose-400: #fb7185;
+  --rose-500: #f43f5e;
+  --rose-600: #e11d48;
+  --rose-700: #be123c;
+  --rose-800: #9f1239;
   --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
   --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
@@ -118,12 +231,12 @@
   --control-switch-w: 2.4rem;
   --control-switch-h: 1.35rem;
   --bw: 1px;
-  --color-primary: var(--azure-600);
-  --color-primary-hover: var(--azure-700);
-  --color-primary-active: var(--azure-800);
+  --color-primary: var(--primary-600);
+  --color-primary-hover: var(--primary-700);
+  --color-primary-active: var(--primary-800);
   --color-on-primary: var(--slate-0);
-  --color-primary-soft: var(--azure-50);
-  --color-primary-border: var(--azure-100);
+  --color-primary-soft: var(--primary-50);
+  --color-primary-border: var(--primary-100);
   --color-accent: var(--sky-600);
   --color-accent-hover: var(--sky-700);
   --color-on-accent: var(--slate-0);
@@ -132,6 +245,8 @@
   --color-surface: var(--slate-0);
   --color-surface-2: var(--slate-50);
   --color-surface-3: var(--slate-100);
+  --color-surface-raised: var(--color-surface);
+  --color-scrim: rgba(10,12,25,.5);
   --color-text: var(--slate-900);
   --color-text-muted: var(--slate-600);
   --color-text-subtle: var(--slate-500);
@@ -152,7 +267,7 @@
   --color-danger-soft: var(--red-100);
   --color-info: var(--blue-600);
   --color-info-soft: var(--blue-100);
-  --color-primary-strong: var(--azure-700);
+  --color-primary-strong: var(--primary-700);
   --color-success-strong: var(--green-800);
   --color-warning-strong: var(--amber-800);
   --color-danger-strong: var(--red-700);
@@ -175,7 +290,9 @@
   --tone-6: var(--chart-6);
   --tone-7: var(--chart-7);
   --tone-8: var(--chart-8);
-  --focus-ring: var(--azure-600);
+  --surface-filter: none;
+  --surface-inset: inset 0 0 0 0 transparent;
+  --focus-ring: var(--primary-600);
   --focus-ring-width: 2px;
 }
 /* The SYSTEM default stays root-scoped: it is a statement about the document, and dropping :root
@@ -189,12 +306,12 @@
   --shadow-4: 0 28px 56px -12px rgba(0,0,0,.72),0 2px 8px rgba(0,0,0,.5);
   --shadow-lift: 0 1px 2px rgba(0,0,0,.5),0 18px 38px -14px rgba(0,0,0,.72);
   --shadow-lift-hover: 0 3px 6px rgba(0,0,0,.55),0 32px 56px -16px rgba(0,0,0,.82);
-  --color-primary: var(--azure-500);
-  --color-primary-hover: var(--azure-400);
-  --color-primary-active: var(--azure-300);
+  --color-primary: var(--primary-500);
+  --color-primary-hover: var(--primary-400);
+  --color-primary-active: var(--primary-300);
   --color-on-primary: var(--slate-0);
-  --color-primary-soft: rgba(32,80,216,.20);
-  --color-primary-border: rgba(92,139,246,.28);
+  --color-primary-soft: color-mix(in srgb, var(--primary-600) 20%, transparent);
+  --color-primary-border: color-mix(in srgb, var(--primary-400) 28%, transparent);
   --color-accent: var(--sky-400);
   --color-accent-hover: var(--sky-300);
   --color-on-accent: #06233f;
@@ -203,6 +320,7 @@
   --color-surface: var(--slate-950);
   --color-surface-2: var(--slate-900);
   --color-surface-3: var(--slate-800);
+  --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
   --color-text-subtle: var(--slate-500);
@@ -221,7 +339,7 @@
   --color-danger-soft: rgba(248,113,113,.18);
   --color-info: var(--blue-400);
   --color-info-soft: rgba(96,165,250,.18);
-  --color-primary-strong: var(--azure-300);
+  --color-primary-strong: var(--primary-300);
   --color-success-strong: var(--green-400);
   --color-warning-strong: var(--amber-400);
   --color-danger-strong: var(--red-300);
@@ -236,7 +354,7 @@
   --chart-8: #e66767;
   --chart-grid: var(--slate-800);
   --chart-tick: var(--slate-600);
-  --focus-ring: var(--azure-400);
+  --focus-ring: var(--primary-400);
   }
 }
 /* The two EXPLICIT opt-ins are deliberately NOT scoped to :root, for the same reason as density
@@ -252,12 +370,12 @@
   --shadow-4: 0 28px 56px -12px rgba(0,0,0,.72),0 2px 8px rgba(0,0,0,.5);
   --shadow-lift: 0 1px 2px rgba(0,0,0,.5),0 18px 38px -14px rgba(0,0,0,.72);
   --shadow-lift-hover: 0 3px 6px rgba(0,0,0,.55),0 32px 56px -16px rgba(0,0,0,.82);
-  --color-primary: var(--azure-500);
-  --color-primary-hover: var(--azure-400);
-  --color-primary-active: var(--azure-300);
+  --color-primary: var(--primary-500);
+  --color-primary-hover: var(--primary-400);
+  --color-primary-active: var(--primary-300);
   --color-on-primary: var(--slate-0);
-  --color-primary-soft: rgba(32,80,216,.20);
-  --color-primary-border: rgba(92,139,246,.28);
+  --color-primary-soft: color-mix(in srgb, var(--primary-600) 20%, transparent);
+  --color-primary-border: color-mix(in srgb, var(--primary-400) 28%, transparent);
   --color-accent: var(--sky-400);
   --color-accent-hover: var(--sky-300);
   --color-on-accent: #06233f;
@@ -266,6 +384,7 @@
   --color-surface: var(--slate-950);
   --color-surface-2: var(--slate-900);
   --color-surface-3: var(--slate-800);
+  --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
   --color-text-subtle: var(--slate-500);
@@ -284,7 +403,7 @@
   --color-danger-soft: rgba(248,113,113,.18);
   --color-info: var(--blue-400);
   --color-info-soft: rgba(96,165,250,.18);
-  --color-primary-strong: var(--azure-300);
+  --color-primary-strong: var(--primary-300);
   --color-success-strong: var(--green-400);
   --color-warning-strong: var(--amber-400);
   --color-danger-strong: var(--red-300);
@@ -299,7 +418,7 @@
   --chart-8: #e66767;
   --chart-grid: var(--slate-800);
   --chart-tick: var(--slate-600);
-  --focus-ring: var(--azure-400);
+  --focus-ring: var(--primary-400);
 }
 [data-theme="light"] {
   --shadow-1: 0 1px 2px rgba(16,14,30,.06);
@@ -308,12 +427,12 @@
   --shadow-4: 0 24px 48px -12px rgba(16,14,30,.26),0 2px 8px rgba(16,14,30,.10);
   --shadow-lift: 0 1px 2px rgba(16,14,30,.05),0 16px 34px -14px rgba(16,14,30,.24);
   --shadow-lift-hover: 0 2px 4px rgba(16,14,30,.06),0 30px 50px -16px rgba(16,14,30,.33);
-  --color-primary: var(--azure-600);
-  --color-primary-hover: var(--azure-700);
-  --color-primary-active: var(--azure-800);
+  --color-primary: var(--primary-600);
+  --color-primary-hover: var(--primary-700);
+  --color-primary-active: var(--primary-800);
   --color-on-primary: var(--slate-0);
-  --color-primary-soft: var(--azure-50);
-  --color-primary-border: var(--azure-100);
+  --color-primary-soft: var(--primary-50);
+  --color-primary-border: var(--primary-100);
   --color-accent: var(--sky-600);
   --color-accent-hover: var(--sky-700);
   --color-on-accent: var(--slate-0);
@@ -322,6 +441,7 @@
   --color-surface: var(--slate-0);
   --color-surface-2: var(--slate-50);
   --color-surface-3: var(--slate-100);
+  --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-900);
   --color-text-muted: var(--slate-600);
   --color-text-subtle: var(--slate-500);
@@ -340,7 +460,7 @@
   --color-danger-soft: var(--red-100);
   --color-info: var(--blue-600);
   --color-info-soft: var(--blue-100);
-  --color-primary-strong: var(--azure-700);
+  --color-primary-strong: var(--primary-700);
   --color-success-strong: var(--green-800);
   --color-warning-strong: var(--amber-800);
   --color-danger-strong: var(--red-700);
@@ -355,7 +475,7 @@
   --chart-8: #e34948;
   --chart-grid: var(--slate-200);
   --chart-tick: var(--slate-400);
-  --focus-ring: var(--azure-600);
+  --focus-ring: var(--primary-600);
 }
 /* Density is deliberately NOT scoped to :root. These are custom properties, so they inherit,
  * putting the attribute on any ancestor (a route wrapper, one section) densifies just that
@@ -380,6 +500,381 @@
   --space-6: 1.5rem;
   --control-h: 2.5rem;
 }
+[data-style="glass"] {
+  --color-surface-raised: rgba(255,255,255,.82);
+  --surface-filter: blur(14px) saturate(150%);
+  --surface-inset: inset 0 1px 0 rgba(255,255,255,.55);
+}
+[data-style="soft"] {
+  --color-surface-raised: var(--color-surface);
+  --surface-filter: none;
+  --surface-inset: inset 0 0 0 0 transparent;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"])[data-style="glass"] {
+  --color-surface-raised: rgba(23,27,38,.90);
+  --surface-inset: inset 0 1px 0 rgba(255,255,255,.09);
+  }
+}
+[data-theme="dark"][data-style="glass"] {
+  --color-surface-raised: rgba(23,27,38,.90);
+  --surface-inset: inset 0 1px 0 rgba(255,255,255,.09);
+}
+[data-theme="light"][data-style="glass"] {
+  --color-surface-raised: rgba(255,255,255,.82);
+  --surface-inset: inset 0 1px 0 rgba(255,255,255,.55);
+}
+/* Primary palette axis. 18 options, see $primaries in tokens.json. */
+[data-primary="azure"] {
+  --primary-50: var(--azure-50);
+  --primary-100: var(--azure-100);
+  --primary-300: var(--azure-300);
+  --primary-400: var(--azure-400);
+  --primary-500: var(--azure-500);
+  --primary-600: var(--azure-600);
+  --primary-700: var(--azure-700);
+  --primary-800: var(--azure-800);
+  --color-on-primary: var(--slate-0);
+}
+[data-primary="sky"] {
+  --primary-50: var(--sky-50);
+  --primary-100: var(--sky-100);
+  --primary-300: var(--sky-300);
+  --primary-400: var(--sky-400);
+  --primary-500: var(--sky-500);
+  --primary-600: var(--sky-600);
+  --primary-700: var(--sky-700);
+  --primary-800: var(--sky-800);
+  --color-on-primary: var(--slate-0);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"])[data-primary="sky"] {
+  --color-on-primary: var(--slate-950);
+  }
+}
+[data-theme="dark"][data-primary="sky"] {
+  --color-on-primary: var(--slate-950);
+}
+[data-theme="light"][data-primary="sky"] {
+  --color-on-primary: var(--slate-0);
+}
+[data-primary="blue"] {
+  --primary-50: var(--blue-50);
+  --primary-100: var(--blue-100);
+  --primary-300: var(--blue-300);
+  --primary-400: var(--blue-400);
+  --primary-500: var(--blue-500);
+  --primary-600: var(--blue-600);
+  --primary-700: var(--blue-700);
+  --primary-800: var(--blue-800);
+  --color-on-primary: var(--slate-0);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"])[data-primary="blue"] {
+  --color-on-primary: var(--slate-950);
+  }
+}
+[data-theme="dark"][data-primary="blue"] {
+  --color-on-primary: var(--slate-950);
+}
+[data-theme="light"][data-primary="blue"] {
+  --color-on-primary: var(--slate-0);
+}
+[data-primary="indigo"] {
+  --primary-50: var(--indigo-50);
+  --primary-100: var(--indigo-100);
+  --primary-300: var(--indigo-300);
+  --primary-400: var(--indigo-400);
+  --primary-500: var(--indigo-500);
+  --primary-600: var(--indigo-600);
+  --primary-700: var(--indigo-700);
+  --primary-800: var(--indigo-800);
+  --color-on-primary: var(--slate-0);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"])[data-primary="indigo"] {
+  --primary-300: var(--indigo-200);
+  --primary-400: var(--indigo-300);
+  --primary-500: var(--indigo-400);
+  --color-on-primary: var(--slate-950);
+  }
+}
+[data-theme="dark"][data-primary="indigo"] {
+  --primary-300: var(--indigo-200);
+  --primary-400: var(--indigo-300);
+  --primary-500: var(--indigo-400);
+  --color-on-primary: var(--slate-950);
+}
+[data-theme="light"][data-primary="indigo"] {
+  --primary-300: var(--indigo-300);
+  --primary-400: var(--indigo-400);
+  --primary-500: var(--indigo-500);
+  --color-on-primary: var(--slate-0);
+}
+[data-primary="violet"] {
+  --primary-50: var(--violet-50);
+  --primary-100: var(--violet-100);
+  --primary-300: var(--violet-300);
+  --primary-400: var(--violet-400);
+  --primary-500: var(--violet-500);
+  --primary-600: var(--violet-600);
+  --primary-700: var(--violet-700);
+  --primary-800: var(--violet-800);
+  --color-on-primary: var(--slate-0);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"])[data-primary="violet"] {
+  --primary-300: var(--violet-200);
+  --primary-400: var(--violet-300);
+  --primary-500: var(--violet-400);
+  --color-on-primary: var(--slate-950);
+  }
+}
+[data-theme="dark"][data-primary="violet"] {
+  --primary-300: var(--violet-200);
+  --primary-400: var(--violet-300);
+  --primary-500: var(--violet-400);
+  --color-on-primary: var(--slate-950);
+}
+[data-theme="light"][data-primary="violet"] {
+  --primary-300: var(--violet-300);
+  --primary-400: var(--violet-400);
+  --primary-500: var(--violet-500);
+  --color-on-primary: var(--slate-0);
+}
+[data-primary="purple"] {
+  --primary-50: var(--purple-50);
+  --primary-100: var(--purple-100);
+  --primary-300: var(--purple-300);
+  --primary-400: var(--purple-400);
+  --primary-500: var(--purple-500);
+  --primary-600: var(--purple-600);
+  --primary-700: var(--purple-700);
+  --primary-800: var(--purple-800);
+  --color-on-primary: var(--slate-0);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"])[data-primary="purple"] {
+  --color-on-primary: var(--slate-950);
+  }
+}
+[data-theme="dark"][data-primary="purple"] {
+  --color-on-primary: var(--slate-950);
+}
+[data-theme="light"][data-primary="purple"] {
+  --color-on-primary: var(--slate-0);
+}
+[data-primary="fuchsia"] {
+  --primary-50: var(--fuchsia-50);
+  --primary-100: var(--fuchsia-100);
+  --primary-300: var(--fuchsia-300);
+  --primary-400: var(--fuchsia-400);
+  --primary-500: var(--fuchsia-500);
+  --primary-600: var(--fuchsia-600);
+  --primary-700: var(--fuchsia-700);
+  --primary-800: var(--fuchsia-800);
+  --color-on-primary: var(--slate-0);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"])[data-primary="fuchsia"] {
+  --color-on-primary: var(--slate-950);
+  }
+}
+[data-theme="dark"][data-primary="fuchsia"] {
+  --color-on-primary: var(--slate-950);
+}
+[data-theme="light"][data-primary="fuchsia"] {
+  --color-on-primary: var(--slate-0);
+}
+[data-primary="pink"] {
+  --primary-50: var(--pink-50);
+  --primary-100: var(--pink-100);
+  --primary-300: var(--pink-300);
+  --primary-400: var(--pink-400);
+  --primary-500: var(--pink-500);
+  --primary-600: var(--pink-600);
+  --primary-700: var(--pink-700);
+  --primary-800: var(--pink-800);
+  --color-on-primary: var(--slate-0);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"])[data-primary="pink"] {
+  --color-on-primary: var(--slate-950);
+  }
+}
+[data-theme="dark"][data-primary="pink"] {
+  --color-on-primary: var(--slate-950);
+}
+[data-theme="light"][data-primary="pink"] {
+  --color-on-primary: var(--slate-0);
+}
+[data-primary="rose"] {
+  --primary-50: var(--rose-50);
+  --primary-100: var(--rose-100);
+  --primary-300: var(--rose-300);
+  --primary-400: var(--rose-400);
+  --primary-500: var(--rose-500);
+  --primary-600: var(--rose-600);
+  --primary-700: var(--rose-700);
+  --primary-800: var(--rose-800);
+  --color-on-primary: var(--slate-0);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"])[data-primary="rose"] {
+  --color-on-primary: var(--slate-950);
+  }
+}
+[data-theme="dark"][data-primary="rose"] {
+  --color-on-primary: var(--slate-950);
+}
+[data-theme="light"][data-primary="rose"] {
+  --color-on-primary: var(--slate-0);
+}
+[data-primary="orange"] {
+  --primary-50: var(--orange-50);
+  --primary-100: var(--orange-100);
+  --primary-300: var(--orange-300);
+  --primary-400: var(--orange-400);
+  --primary-500: var(--orange-500);
+  --primary-600: var(--orange-600);
+  --primary-700: var(--orange-700);
+  --primary-800: var(--orange-800);
+  --color-on-primary: var(--slate-950);
+}
+[data-primary="amber"] {
+  --primary-50: var(--amber-50);
+  --primary-100: var(--amber-100);
+  --primary-300: var(--amber-300);
+  --primary-400: var(--amber-400);
+  --primary-500: var(--amber-500);
+  --primary-600: var(--amber-600);
+  --primary-700: var(--amber-700);
+  --primary-800: var(--amber-800);
+  --color-on-primary: var(--slate-950);
+}
+[data-primary="yellow"] {
+  --primary-50: var(--yellow-50);
+  --primary-100: var(--yellow-100);
+  --primary-300: var(--yellow-300);
+  --primary-400: var(--yellow-400);
+  --primary-500: var(--yellow-500);
+  --primary-600: var(--yellow-700);
+  --primary-700: var(--yellow-800);
+  --primary-800: var(--yellow-900);
+  --color-on-primary: var(--slate-0);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"])[data-primary="yellow"] {
+  --color-on-primary: var(--slate-950);
+  }
+}
+[data-theme="dark"][data-primary="yellow"] {
+  --color-on-primary: var(--slate-950);
+}
+[data-theme="light"][data-primary="yellow"] {
+  --color-on-primary: var(--slate-0);
+}
+[data-primary="lime"] {
+  --primary-50: var(--lime-50);
+  --primary-100: var(--lime-100);
+  --primary-300: var(--lime-300);
+  --primary-400: var(--lime-400);
+  --primary-500: var(--lime-500);
+  --primary-600: var(--lime-600);
+  --primary-700: var(--lime-700);
+  --primary-800: var(--lime-800);
+  --color-on-primary: var(--slate-950);
+}
+[data-primary="green"] {
+  --primary-50: var(--green-50);
+  --primary-100: var(--green-100);
+  --primary-300: var(--green-300);
+  --primary-400: var(--green-400);
+  --primary-500: var(--green-500);
+  --primary-600: var(--green-600);
+  --primary-700: var(--green-700);
+  --primary-800: var(--green-800);
+  --color-on-primary: var(--slate-950);
+}
+[data-primary="emerald"] {
+  --primary-50: var(--emerald-50);
+  --primary-100: var(--emerald-100);
+  --primary-300: var(--emerald-300);
+  --primary-400: var(--emerald-400);
+  --primary-500: var(--emerald-500);
+  --primary-600: var(--emerald-600);
+  --primary-700: var(--emerald-700);
+  --primary-800: var(--emerald-800);
+  --color-on-primary: var(--slate-950);
+}
+[data-primary="teal"] {
+  --primary-50: var(--teal-50);
+  --primary-100: var(--teal-100);
+  --primary-300: var(--teal-300);
+  --primary-400: var(--teal-400);
+  --primary-500: var(--teal-500);
+  --primary-600: var(--teal-600);
+  --primary-700: var(--teal-700);
+  --primary-800: var(--teal-800);
+  --color-on-primary: var(--slate-950);
+}
+[data-primary="cyan"] {
+  --primary-50: var(--cyan-50);
+  --primary-100: var(--cyan-100);
+  --primary-300: var(--cyan-300);
+  --primary-400: var(--cyan-400);
+  --primary-500: var(--cyan-500);
+  --primary-600: var(--cyan-600);
+  --primary-700: var(--cyan-700);
+  --primary-800: var(--cyan-800);
+  --color-on-primary: var(--slate-950);
+}
+[data-primary="noir"] {
+  --primary-50: var(--slate-100);
+  --primary-100: var(--slate-200);
+  --primary-300: var(--slate-500);
+  --primary-400: var(--slate-700);
+  --primary-500: var(--slate-800);
+  --primary-600: var(--slate-900);
+  --primary-700: var(--slate-800);
+  --primary-800: var(--slate-950);
+  --color-on-primary: var(--slate-0);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"])[data-primary="noir"] {
+  --primary-50: var(--slate-800);
+  --primary-100: var(--slate-700);
+  --primary-300: var(--slate-300);
+  --primary-400: var(--slate-200);
+  --primary-500: var(--slate-100);
+  --primary-600: var(--slate-50);
+  --primary-700: var(--slate-200);
+  --primary-800: var(--slate-300);
+  --color-on-primary: var(--slate-950);
+  }
+}
+[data-theme="dark"][data-primary="noir"] {
+  --primary-50: var(--slate-800);
+  --primary-100: var(--slate-700);
+  --primary-300: var(--slate-300);
+  --primary-400: var(--slate-200);
+  --primary-500: var(--slate-100);
+  --primary-600: var(--slate-50);
+  --primary-700: var(--slate-200);
+  --primary-800: var(--slate-300);
+  --color-on-primary: var(--slate-950);
+}
+[data-theme="light"][data-primary="noir"] {
+  --primary-50: var(--slate-100);
+  --primary-100: var(--slate-200);
+  --primary-300: var(--slate-500);
+  --primary-400: var(--slate-700);
+  --primary-500: var(--slate-800);
+  --primary-600: var(--slate-900);
+  --primary-700: var(--slate-800);
+  --primary-800: var(--slate-950);
+  --color-on-primary: var(--slate-0);
+}
 
 /* Freeday components. GENERATED by tokens/build.mjs. Do not edit by hand. */
 /* Freeday base layer: reset ringan + default via token */
@@ -468,7 +963,7 @@ a { color: var(--color-primary); }
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
  * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
-.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
+.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
 .fdy-app__content{flex:1;min-width:0;display:flex;flex-direction:column;}
 /* Brand is a fixed header, same height as the topbar so they align, and only
  * the nav below it scrolls. Bare text (no children) renders as one bold
@@ -541,7 +1036,23 @@ a { color: var(--color-primary); }
 /* Desktop collapse: animate width -> 0 (content clips via overflow:hidden; the content area
  * flexes in to fill). Not display:none, so the collapse/expand slides instead of snapping. */
 @media (min-width:721px){.fdy-app--nav-collapsed .fdy-app__sidebar{width:0;border-right-width:0;}}
-.fdy-app__topbar{position:sticky;top:0;z-index:20;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface);border-bottom:var(--bw) solid var(--color-border);}
+/* Desktop OVERLAY: the nav floats over the content instead of displacing it, the arrangement a
+ * "menu mode" preference offers on a wide screen. The declarations below are the mobile off-canvas
+ * ones repeated, and that repetition is not an oversight: the two conditions are
+ * `(max-width:720px)` and `(min-width:721px) and .fdy-app--nav-overlay`, which no single selector
+ * can express, and the mobile path has to keep working with no JS and no class at all. What the
+ * modifier changes is the LAYOUT; every behaviour (backdrop, Escape, close-on-follow, focus return,
+ * inert, the Tab trap) is the same code path the drawer already used. */
+@media (min-width:721px){
+  .fdy-app--nav-overlay .fdy-app__sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:16rem;z-index:60;transform:translateX(-100%);box-shadow:var(--shadow-4);transition:transform var(--dur-base) var(--ease-standard);}
+  .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__sidebar{transform:translateX(0);}
+  .fdy-app--nav-overlay .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
+  .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;}
+  /* In overlay mode the sidebar is out of flow, so the collapse-to-zero-width rule above must not
+     also apply — it would fight the transform for the same panel. */
+  .fdy-app--nav-overlay.fdy-app--nav-collapsed .fdy-app__sidebar{width:16rem;border-right-width:var(--bw);}
+}
+.fdy-app__topbar{position:sticky;top:0;z-index:20;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
 .fdy-app__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-app__main{flex:1;padding:var(--space-8);}
 .fdy-skip{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100;transform:translateY(-250%);transition:transform var(--dur-fast) var(--ease-standard);}
@@ -550,13 +1061,21 @@ a { color: var(--color-primary); }
  * drop sticky so nothing escapes the box; sidebar stretches to fill it. */
 .fdy-app--static .fdy-app__sidebar{position:static;height:auto;align-self:stretch;}
 .fdy-app--static .fdy-app__topbar{position:static;}
-/* Mobile: the sidebar becomes an off-canvas drawer opened by the topbar toggle. */
+/* `pointer-events` on the backdrop is load-bearing, not a belt-and-braces extra. `visibility` is a
+ * TRANSITIONED property here, so a backdrop on its way out stays `visible` for the whole duration
+ * and keeps swallowing clicks aimed at the topbar underneath it — and switching INTO overlay mode is
+ * worse, because the element goes display:none -> display:block with its visibility animating from
+ * the initial `visible`, so a mode switch alone hands the page ~200ms of dead clicks. Measured: with
+ * only `visibility:hidden`, elementFromPoint over the nav toggle returned the backdrop.
+ * Mobile: the sidebar becomes an off-canvas drawer opened by the topbar toggle. */
 .fdy-app__backdrop{display:none;}
 @media (max-width:720px){
   .fdy-app__sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:16rem;z-index:60;transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-standard);box-shadow:var(--shadow-4);}
   .fdy-app--nav-open .fdy-app__sidebar{transform:translateX(0);}
-  .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(8,10,20,.45);opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
-  .fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;}
+  /* --color-scrim, not a literal: this was the last raw colour left in a component stylesheet, and
+     it also means the drawer behind the nav dims exactly like every other overlay in the kit. */
+  .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
+  .fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;}
   .fdy-app__main{padding:var(--space-5);}
   .fdy-app__topbar{padding:0 var(--space-4);}
 }
@@ -565,9 +1084,9 @@ a { color: var(--color-primary); }
 /* Freeday. App bar (standalone top bar: brand · actions · spacer).
  * Distinct from .fdy-app__topbar (which is bound to the shell grid). Use anywhere;
  * sticky / elevated / dense / coloured via modifiers. Pure CSS. */
-.fdy-appbar{display:flex;align-items:center;gap:var(--space-3);height:var(--space-16);padding:0 var(--space-4);background:var(--color-surface);color:var(--color-text);border-bottom:var(--bw) solid var(--color-border);}
+.fdy-appbar{display:flex;align-items:center;gap:var(--space-3);height:var(--space-16);padding:0 var(--space-4);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);border-bottom:var(--bw) solid var(--color-border);}
 .fdy-appbar--sticky{position:sticky;top:0;z-index:90;}
-.fdy-appbar--elevated{border-bottom:0;box-shadow:var(--shadow-2);}
+.fdy-appbar--elevated{border-bottom:0;box-shadow:var(--shadow-2),var(--surface-inset);}
 .fdy-appbar--dense{height:var(--space-12);}
 .fdy-appbar--primary{background:var(--color-primary);color:var(--color-on-primary);border-bottom-color:transparent;}
 .fdy-appbar__brand{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:inherit;white-space:nowrap;}
@@ -700,6 +1219,40 @@ a { color: var(--color-primary); }
 @media (min-width:960px){.fdy-hide-above-md{display:none !important;}}
 @media (min-width:1280px){.fdy-hide-above-lg{display:none !important;}}
 
+/* Freeday. Busy overlay */
+/* The blocking "the app is working" state, for an operation the reader must not interrupt or
+ * double-submit. There is deliberately NO markup contract to hand-write: it is created by
+ * `Freeday.busy()` and removed by `Freeday.idle()`, because two of these on screen at once — with
+ * two different captions, from two components that each thought they owned it — is the exact bug
+ * this component exists to prevent. One owner, enforced by there being only one way in.
+ *
+ * It is not a dialog. Nothing here asks a question and nothing can be dismissed; interaction is
+ * removed with `inert` on everything else, not with a focus trap. */
+
+/* `display` is gated on `.is-open` rather than on `:popover-open`, and that is load-bearing. The UA
+ * sheet hides a popover with `[popover]:not(:popover-open){display:none}`, but AUTHOR rules beat UA
+ * rules whatever the specificity, so a bare `.fdy-busy{display:flex}` would paint the overlay
+ * permanently the moment the element existed. Gating on a class instead also means the overlay
+ * still works where the Popover API does not: it falls back to a plain fixed layer at this
+ * z-index, which cannot clear an open <dialog> but does everything else. */
+.fdy-busy{display:none;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:var(--color-scrim);z-index:190;}
+.fdy-busy.is-open{display:flex;align-items:center;justify-content:center;}
+/* The popover's own backdrop would double the dim; this element paints its own. */
+.fdy-busy::backdrop{background:transparent;}
+
+/* The caption sits on a solid surface, not on the scrim. A scrim is semi-transparent over unknown
+ * content, so text on it has no computable contrast ratio and no gate could ever cover it. On
+ * --color-surface it is the same pair the contrast suite already checks. */
+.fdy-busy__panel{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-8);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-lift);max-width:min(20rem,calc(100vw - var(--space-8)));}
+.fdy-busy__mark{display:flex;align-items:center;justify-content:center;min-height:2.5rem;}
+.fdy-busy__caption{margin:0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);text-align:center;}
+
+/* Nothing travels under reduced motion. The spinner keeps turning (slowed by spinner.css): a
+ * loading indicator that stops moving reads as "finished", which is the opposite of the message. */
+@media (prefers-reduced-motion:reduce){
+  .fdy-busy{transition:none;}
+}
+
 /* Freeday. Button */
 .fdy-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
   height:var(--control-h);padding:0 var(--space-4);
@@ -803,7 +1356,7 @@ a { color: var(--color-primary); }
 /* Freeday. Card */
 /* position:relative, containing block for out-of-flow card content (see base.css); it also gives
    consumers the anchor a corner ribbon/badge needs. */
-.fdy-card{position:relative;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
+.fdy-card{position:relative;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift),var(--surface-inset);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
 .fdy-card--elevated{box-shadow:var(--shadow-lift-hover);}
 .fdy-card--interactive{cursor:pointer;}
 .fdy-card--interactive:hover{box-shadow:var(--shadow-lift-hover);transform:translateY(-3px);}
@@ -1248,7 +1801,7 @@ a { color: var(--color-primary); }
 /* display is gated behind [open] so the native <dialog> stays hidden until opened.
  * An unconditional display here would beat the UA `dialog:not([open]){display:none}`
  * rule (author origin wins over user-agent) and leave the drawer visible on load. */
-.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-4);overflow:hidden;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}
+.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}
 .fdy-drawer[open]{display:flex;transform:none;}
 .fdy-drawer--right{inset:0 0 0 auto;transform:translateX(100%);}
 .fdy-drawer::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}
@@ -1491,7 +2044,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 
 /* Freeday. Menu (action popup) + Split button. Enhanced by freeday-menu.js. */
 .fdy-menu-wrap{position:relative;display:inline-flex;}
-.fdy-menu{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:130;min-width:11rem;margin:0;padding:var(--space-1);list-style:none;background:var(--color-surface);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);}
+.fdy-menu{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:130;min-width:11rem;margin:0;padding:var(--space-1);list-style:none;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3),var(--surface-inset);}
 .fdy-menu[hidden]{display:none;}
 .fdy-menu--end{left:auto;right:0;}
 .fdy-menu__item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);border:0;background:transparent;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);text-align:left;cursor:pointer;white-space:nowrap;}
@@ -1522,7 +2075,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-btn-split__toggle svg{display:block;width:1rem;height:1rem;}
 
 /* Freeday. Modal (native <dialog>) */
-.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-lift-hover);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
+.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
 .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
 .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
 .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}
@@ -1672,7 +2225,18 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-step.is-active .fdy-step__marker{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-strong);}
 .fdy-step.is-complete .fdy-step__marker{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-primary);}
 .fdy-step.is-error .fdy-step__marker{border-color:var(--color-danger);background:var(--color-danger-btn);color:var(--color-on-danger);}
+/* The error badge. Colour alone cannot carry "this step has a problem" — the marker already turns
+   red and that is exactly the signal a colour-blind reader loses — so the badge holds a COUNT and
+   the step names it in text. Positioned against `.fdy-step` rather than `__btn`, because the
+   indicator-only variant has no `__btn` and the badge has to land in the same place in both.
+   It is a SIBLING of the marker, never a child: the enhancer rewrites `__marker.innerHTML` on
+   every render, so a badge inside it would be destroyed the first time the reader moved a step. */
+.fdy-step__badge{position:absolute;top:0;left:50%;z-index:2;transform:translate(.45rem,-.3rem);min-width:1.05rem;height:1.05rem;padding:0 .25rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-danger-btn);color:var(--color-on-danger);font-size:var(--text-xs);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;line-height:1;}
 .fdy-step__label{font-size:var(--text-sm);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
+.fdy-step.is-error .fdy-step__label{color:var(--color-danger-strong);}
+/* While a guard is deciding, the whole control is spoken for: the nav buttons are disabled by the
+   enhancer, and this dims the header so a second click has nothing to aim at. */
+.fdy-stepper[aria-busy="true"]{opacity:.72;}
 .fdy-step.is-active .fdy-step__label{color:var(--color-text);font-weight:var(--weight-semibold);}
 .fdy-step__btn:focus-visible{outline:none;}
 .fdy-step__btn:focus-visible .fdy-step__marker{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 30%,transparent);}
@@ -1691,6 +2255,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table td{padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);color:var(--color-text);}
 .fdy-table tbody tr:last-child td{border-bottom:0;}
 .fdy-table tbody tr{transition:background-color var(--dur-fast) var(--ease-standard);}
+/* Zebra rows. Sits BEFORE :hover and [aria-selected] on purpose: all three land on the same
+   specificity (0,2,2), so source order is what decides, and a stripe that won would make hover
+   invisible on every second row. The tint is HALF a surface step rather than --color-surface-2
+   itself, for the same reason: hover paints the full step, so the two must not be the same colour.
+   Exposed as a Tier-3 token through the var() FALLBACK, never as a declaration — a custom property
+   set here would outrank a host's own :root override. */
+.fdy-table--striped tbody tr:nth-child(even){background:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));}
 .fdy-table tbody tr:hover{background:var(--color-surface-2);}
 /* Monospace data, ids, codes, IPs, timestamps. Alignment-neutral so it works in any cell
    or inline (`<span class="fdy-mono">`), not just numeric columns. */
@@ -1755,6 +2326,12 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    a hovered row should band unbroken across the freeze line, says so itself. */
 .fdy-table--sticky tbody .fdy-table__freeze{z-index:1;}
 .fdy-table--sticky tbody td.fdy-table__freeze{background:var(--color-surface);}
+/* A frozen cell has to paint an OPAQUE background of its own (it scrolls over its neighbours), so
+   on a striped table it would cut a plain column straight through the zebra. Repaint it with the
+   stripe — and deliberately WITHOUT `.fdy-table--sticky` in the selector, which would push this to
+   (0,4,3) and beat the hover rule below. At (0,3,3) it ties, and the later rule wins, so a hovered
+   row still bands unbroken across the freeze line. */
+.fdy-table--striped tbody tr:nth-child(even) td.fdy-table__freeze{background:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));}
 .fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
 /* A frozen header cell is stuck on both axes wherever the head is frozen too, so
    it has to outrank both. */