@rdna/radiants 0.1.2 → 0.1.4

package/dark.css

@@ -1,5 +1,5 @@
 /* =============================================================================
-   @dna/radiants - Dark Mode Overrides
+   @rdna/radiants - Dark Mode Overrides
    Inverted semantic tokens for dark theme
    ============================================================================= */
 
@@ -11,107 +11,1271 @@
 .dark {
   /* ============================================
      SURFACE TOKENS - Inverted for dark backgrounds
+     Warm blacks instead of cold grays
      ============================================ */
 
-  --color-surface-primary: var(--color-black);
-  --color-surface-secondary: var(--color-warm-cloud);
-  --color-surface-tertiary: #3D2E1A;  /* Muted sunset-fuzz for dark - WCAG AA compliant */
-  --color-surface-elevated: #1A1918;  /* Slightly lighter than black for depth */
-  --color-surface-muted: #252422;     /* Muted dark surface */
+  --color-surface-primary: var(--color-ink);
+  --color-surface-secondary: var(--color-cream);
+  --color-surface-tertiary: oklch(0.3129 0.0389 73.57);  /* was #3D2E1A — Muted sunset-fuzz for dark - WCAG AA compliant */
+  --color-surface-elevated: var(--color-pure-black);  /* Pure black — darker than window chrome (#0F0E0C) */
+  --color-surface-muted: oklch(0.9126 0.1170 93.68 / 0.08);              /* was rgba(252, 225, 132, 0.08) */
+
+  /* Surface overlays — sun-yellow opacity ladder for dark depth */
+  --color-surface-overlay-subtle: oklch(0.9126 0.1170 93.68 / 0.04);    /* was rgba(252, 225, 132, 0.04) — 4% sun-yellow */
+  --color-surface-overlay-medium: oklch(0.9126 0.1170 93.68 / 0.08);    /* was rgba(252, 225, 132, 0.08) — 8% sun-yellow */
+
+  /* Interaction overlays — warm brighten on hover/press */
+  --color-hover-overlay: oklch(0.9126 0.1170 93.68 / 0.08);             /* was rgba(252, 225, 132, 0.08) — hover: 8% sun-yellow */
+  --color-active-overlay: oklch(0.9126 0.1170 93.68 / 0.12);            /* was rgba(252, 225, 132, 0.12) — pressed: 12% sun-yellow */
 
   /* ============================================
      CONTENT TOKENS - Inverted for dark backgrounds
+     White for headings, cream for body text
      ============================================ */
 
-  --color-content-primary: var(--color-warm-cloud);
-  --color-content-secondary: var(--color-warm-cloud);  /* Base for opacity modifiers: text-content-secondary/70 */
-  --color-content-inverted: var(--color-black);
-  --color-content-muted: rgba(254, 248, 226, 0.6);  /* warm-cloud at 60% */
-  --color-content-link: var(--color-sky-blue);       /* Links stay sky-blue for contrast */
+  --color-content-primary: var(--color-cream);  /* Body text: cream */
+  --color-content-heading: var(--color-pure-white);   /* Headings: pure white */
+  --color-content-secondary: oklch(0.9780 0.0295 94.34 / 0.85);          /* was rgba(254, 248, 226, 0.85) */
+  --color-content-inverted: var(--color-ink);
+  --color-content-muted: oklch(0.9780 0.0295 94.34 / 0.6);              /* was rgba(254, 248, 226, 0.6) — cream at 60% */
+  --color-content-link: var(--color-sky-blue);       /* Links: lighter sky-blue has good contrast on dark bg */
 
   /* ============================================
      EDGE TOKENS - Adjusted for dark backgrounds
      ============================================ */
 
-  --color-edge-primary: var(--color-warm-cloud);
-  --color-edge-muted: rgba(254, 248, 226, 0.2);  /* warm-cloud at 20% */
+  --color-edge-primary: oklch(0.9780 0.0295 94.34 / 0.2);                /* was rgba(254, 248, 226, 0.2) — cream at 20% — matches divider */
+  --color-edge-muted: oklch(0.9780 0.0295 94.34 / 0.12);               /* was rgba(254, 248, 226, 0.12) — subtler than primary */
+  --color-edge-hover: oklch(0.9780 0.0295 94.34 / 0.35);               /* was rgba(254, 248, 226, 0.35) — cream at 35% for hover states */
   --color-edge-focus: var(--color-sun-yellow);   /* Focus stays yellow for visibility */
 
+  /* ============================================
+     SHORT SEMANTIC TOKENS - Backgrounds
+     New short names (post-rename migration)
+     ============================================ */
+
+  --color-page: var(--color-ink);                              /* Main page bg: dark */
+  --color-card: var(--color-pure-black);                       /* Elevated surface: deeper than page */
+  --color-depth: oklch(0.22 0.0100 84.59);                    /* Sidebar/depth surface: just above ink */
+  --color-inv: var(--color-ink);                               /* Dark surface: stays ink in dark (Toolbar, tooltips, Card dark) */
+  --color-tinted: oklch(0.3129 0.0389 73.57);                 /* Warm amber tint: was surface-tertiary */
+  --color-hover: oklch(0.9126 0.1170 93.68 / 0.08);           /* Hover overlay: 8% sun-yellow */
+  --color-active: oklch(0.9126 0.1170 93.68 / 0.12);          /* Active overlay: 12% sun-yellow */
+
+  /* ============================================
+     SHORT SEMANTIC TOKENS - Text
+     ============================================ */
+
+  --color-main: var(--color-cream);                            /* Body text: cream on dark */
+  --color-head: var(--color-pure-white);                       /* Headings: pure white on dark */
+  --color-sub: oklch(0.9780 0.0295 94.34 / 0.85);             /* Secondary text: cream at 85% */
+  --color-mute: oklch(0.9780 0.0295 94.34 / 0.6);             /* Muted text: cream at 60% */
+  --color-flip: var(--color-cream);                            /* Text on inv surfaces: cream on ink, unchanged in dark */
+  --color-link: var(--color-sky-blue);                         /* Links: unchanged */
+
+  /* ============================================
+     SHORT SEMANTIC TOKENS - Borders
+     ============================================ */
+
+  --color-line: oklch(0.9780 0.0295 94.34 / 0.2);             /* Primary border: cream at 20% */
+  --color-rule: oklch(0.9780 0.0295 94.34 / 0.12);            /* Muted border: cream at 12% */
+  --color-line-hover: oklch(0.9780 0.0295 94.34 / 0.35);      /* Hover border: cream at 35% */
+  --color-focus: var(--color-sun-yellow);                      /* Focus ring: yellow unchanged */
+
   /* ============================================
      ACTION TOKENS - Preserved for retro aesthetic
      High-contrast action colors work on dark backgrounds
      ============================================ */
 
-  --color-action-primary: var(--color-sun-yellow);
-  --color-action-secondary: var(--color-warm-cloud);
-  --color-action-destructive: var(--color-sun-red);  /* Same in dark - high contrast on dark bg */
-  --color-action-accent: var(--color-sunset-fuzz);
+  --color-accent: var(--color-sun-yellow);
+  --color-accent-inv: var(--color-ink);
+  --color-accent-soft: var(--color-sunset-fuzz);
+  --color-danger: var(--color-sun-red);
+  --color-success: var(--color-mint);
+  --color-warning: var(--color-sun-yellow);
+
+  /* ============================================
+     DARK MODE — Typography Adjustments
+     Text appears heavier on dark backgrounds.
+     Antialiased rendering + lighter code weight.
+     ============================================ */
+
+  code, pre {
+    font-weight: 300;  /* PixelCode Light — compensates for perceived weight gain on dark bg */
+  }
+
+  /* ============================================
+     TEXT GLOW - Warm phosphor halo on all text
+     Inherits down the tree via text-shadow
+     ============================================ */
+
+  text-shadow:
+    0 0 10px var(--glow-sun-yellow-subtle),
+    0 0 40px oklch(0.9126 0.1170 93.68 / 0.08);
 
   /* ============================================
      BOX SHADOWS - Adjusted for dark mode
-     Using warm-cloud for retro lift effect on dark
+     Using cream for retro lift effect on dark
      ============================================ */
 
-  --shadow-btn: 0 1px 0 0 var(--color-warm-cloud);
-  --shadow-btn-hover: 0 3px 0 0 var(--color-warm-cloud);
-  --shadow-card: 2px 2px 0 0 rgba(254, 248, 226, 0.3);
-  --shadow-card-lg: 4px 4px 0 0 rgba(254, 248, 226, 0.3);
-  --shadow-inner: inset 0 0 0 1px var(--color-warm-cloud);
+  /* ============================================
+     WINDOW CHROME - Solid ink for AppWindow frame
+     ============================================ */
+
+  --color-window-chrome-from: var(--color-ink);
+  --color-window-chrome-to: var(--color-ink);
+
+  /* ============================================
+     GLOW EFFECTS - For hover/active states only
+     Sun-yellow based glows for the dark theme
+     ============================================ */
+
+  --glow-sun-yellow: oklch(0.9126 0.1170 93.68 / 0.6);                   /* was rgba(252, 225, 132, 0.6) */
+  --glow-sun-yellow-subtle: oklch(0.9126 0.1170 93.68 / 0.3);           /* was rgba(252, 225, 132, 0.3) */
+  --glow-sun-red: oklch(0.7429 0.1568 21.43 / 0.5);                     /* was rgba(255, 107, 99, 0.5) */
+  --glow-mint: oklch(0.9312 0.0702 142.51 / 0.5);                       /* was rgba(206, 245, 202, 0.5) */
+  --glow-sky-blue: oklch(0.7701 0.0527 236.81 / 0.5);                   /* was rgba(149, 186, 210, 0.5) */
+
+  /* Cream glow opacity steps for hover/active states */
+  --glow-cream-hover: oklch(0.9780 0.0295 94.34 / 0.3);   /* was var(--glow-cream-hover) */
+  --glow-cream-active: oklch(0.9780 0.0295 94.34 / 0.4);  /* was var(--glow-cream-active) */
+
+  /* Glow shadow presets for interactive states */
+  /* Layered: ring → close glow → ambient */
+  --shadow-glow-sm:
+    0 0 0 1px var(--color-rule),
+    0 0 6px var(--glow-sun-yellow-subtle);
+  --shadow-glow-md:
+    0 0 0 1px var(--color-rule),
+    0 0 8px var(--glow-sun-yellow-subtle),
+    0 0 14px var(--glow-sun-yellow-subtle);
+  --shadow-glow-lg:
+    0 0 0 1px var(--color-line),
+    0 0 10px var(--glow-sun-yellow),
+    0 0 24px var(--glow-sun-yellow-subtle);
+  --shadow-glow-xl:
+    0 0 0 1px var(--color-line),
+    0 0 12px var(--glow-sun-yellow),
+    0 0 24px var(--glow-sun-yellow),
+    0 0 36px var(--glow-sun-yellow-subtle);
+
+  /* Status glow presets — ring tinted to status color */
+  --shadow-glow-success:
+    0 0 0 1px oklch(from var(--color-success) l c h / 0.3),
+    0 0 8px var(--glow-mint);
+  --shadow-glow-error:
+    0 0 0 1px oklch(from var(--color-danger) l c h / 0.3),
+    0 0 8px var(--glow-sun-red);
+  --shadow-glow-info:
+    0 0 0 1px oklch(from var(--color-link) l c h / 0.3),
+    0 0 8px var(--glow-sky-blue);
+
+  /* ============================================
+     SHADOW ELEVATION — Moon Mode
+     Ambient glows instead of directional shadows
+     ============================================ */
+
+  /* Layered: tight ring → close glow → ambient spread */
+  --shadow-inset:
+    inset 0 0 0 1px var(--color-rule),
+    inset 0 0 6px var(--glow-sun-yellow-subtle);
+  --shadow-surface:
+    0 0 0 1px var(--color-rule),
+    0 1px 2px var(--glow-sun-yellow-subtle);
+  --shadow-resting:
+    0 0 0 1px var(--color-rule),
+    0 0 4px var(--glow-sun-yellow-subtle),
+    0 0 8px var(--glow-sun-yellow-subtle);
+  --shadow-lifted:
+    0 0 0 1px var(--color-line),
+    0 0 8px var(--glow-sun-yellow),
+    0 0 16px var(--glow-sun-yellow-subtle);
+  --shadow-raised:
+    0 0 0 1px var(--color-line),
+    0 0 8px var(--glow-sun-yellow),
+    0 0 20px var(--glow-sun-yellow-subtle);
+  --shadow-floating:
+    0 0 0 1px var(--color-line),
+    0 0 10px var(--glow-sun-yellow),
+    0 0 24px var(--glow-sun-yellow-subtle);
+  --shadow-focused:
+    0 0 0 1px var(--color-line-hover),
+    0 0 12px var(--glow-sun-yellow),
+    0 0 24px var(--glow-sun-yellow),
+    0 0 36px var(--glow-sun-yellow-subtle);
 }
 
 /* =============================================================================
-   System Preference Fallback
-   Auto-applies dark mode when user prefers dark color scheme
-   The :not(.light) allows explicit light mode override
+   Dark Mode Component Styles
+
+   HOVER PATTERN FOR SURFACE ELEMENTS:
+   - Base state: 20% cream border (--color-rule)
+   - Hover state: yellow border (--color-focus) + glow
+
+   Glow effects applied on hover/focus/active states only
    ============================================================================= */
 
-@media (prefers-color-scheme: dark) {
-  :root:not(.light) {
-    /* ============================================
-       SURFACE TOKENS - Inverted for dark backgrounds
-       ============================================ */
-
-    --color-surface-primary: var(--color-black);
-    --color-surface-secondary: var(--color-warm-cloud);
-    --color-surface-tertiary: #3D2E1A;  /* Muted sunset-fuzz for dark - WCAG AA compliant */
-    --color-surface-elevated: #1A1918;
-    --color-surface-muted: #252422;
-
-    /* ============================================
-       CONTENT TOKENS - Inverted for dark backgrounds
-       ============================================ */
-
-    --color-content-primary: var(--color-warm-cloud);
-    --color-content-secondary: var(--color-warm-cloud);  /* Base for opacity modifiers: text-content-secondary/70 */
-    --color-content-inverted: var(--color-black);
-    --color-content-muted: rgba(254, 248, 226, 0.6);
-    --color-content-link: var(--color-sky-blue);
-
-    /* ============================================
-       EDGE TOKENS - Adjusted for dark backgrounds
-       ============================================ */
-
-    --color-edge-primary: var(--color-warm-cloud);
-    --color-edge-muted: rgba(254, 248, 226, 0.2);
-    --color-edge-focus: var(--color-sun-yellow);
-
-    /* ============================================
-       ACTION TOKENS - Preserved for retro aesthetic
-       ============================================ */
-
-    --color-action-primary: var(--color-sun-yellow);
-    --color-action-secondary: var(--color-warm-cloud);
-    --color-action-destructive: var(--color-sun-red);  /* Same in dark - high contrast on dark bg */
-    --color-action-accent: var(--color-sunset-fuzz);
-
-    /* ============================================
-       BOX SHADOWS - Adjusted for dark mode
-       ============================================ */
-
-    --shadow-btn: 0 1px 0 0 var(--color-warm-cloud);
-    --shadow-btn-hover: 0 3px 0 0 var(--color-warm-cloud);
-    --shadow-card: 2px 2px 0 0 rgba(254, 248, 226, 0.3);
-    --shadow-card-lg: 4px 4px 0 0 rgba(254, 248, 226, 0.3);
-    --shadow-inner: inset 0 0 0 1px var(--color-warm-cloud);
+.dark {
+  /* ============================================
+     GLOBAL INTERACTIVE GLOW PATTERN
+     In dark mode, hover/active → glow instead
+     of background color change. No border added
+     to avoid layout shift on non-button elements.
+     ============================================ */
+
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-hover,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-depth,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-sun-yellow,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-sun-yellow\/50,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-inv {
+    transition: box-shadow 150ms ease-out;
+  }
+
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-hover:hover,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-depth:hover,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-sun-yellow:hover,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-sun-yellow\/50:hover,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-inv:hover {
+    background-color: transparent !important;
+    box-shadow:
+      0 0 4px var(--glow-cream-hover),
+      0 0 10px var(--glow-sun-yellow-subtle);
+  }
+
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-hover:active,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-depth:active,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-sun-yellow:active,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-sun-yellow\/50:active,
+  & :not(tr):not([role="menuitem"]):not([role="option"]).hover\:bg-inv:active {
+    background-color: transparent !important;
+    box-shadow:
+      0 0 6px var(--glow-cream-active),
+      0 0 14px var(--glow-sun-yellow);
+  }
+
+  /* ============================================
+     MENU ITEMS — Flat+quiet style (yellow bg, ink text)
+     Overrides global glow pattern for selection areas.
+     ============================================ */
+
+  & [role="menuitem"]:hover,
+  & [role="option"]:hover {
+    background-color: var(--color-accent) !important;
+    color: var(--color-accent-inv) !important;
+    box-shadow: none !important;
+  }
+
+  & [role="menuitem"]:active,
+  & [role="option"]:active {
+    background-color: var(--color-cream) !important;
+    color: var(--color-ink) !important;
+    box-shadow: none !important;
+  }
+
+  /* Destructive menu items keep danger text on yellow hover */
+  & [role="menuitem"].text-danger:hover {
+    color: var(--color-danger) !important;
+  }
+
+  /* ============================================
+     SHADOW UTILITY OVERRIDES
+     Tailwind v4 bakes @theme shadow values into --tw-shadow
+     at build time, so dark token overrides don't reach the
+     utility classes. Force-override --tw-shadow here.
+     ============================================ */
+
+  & .shadow-inset {
+    --tw-shadow: inset 0 0 0 1px var(--color-rule), inset 0 0 6px var(--glow-sun-yellow-subtle);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  & .shadow-surface {
+    --tw-shadow: 0 0 0 1px var(--color-rule), 0 1px 2px var(--glow-sun-yellow-subtle);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  & .shadow-resting {
+    --tw-shadow: 0 0 0 1px var(--color-rule), 0 0 4px var(--glow-sun-yellow-subtle), 0 0 8px var(--glow-sun-yellow-subtle);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  & .shadow-lifted {
+    --tw-shadow: 0 0 0 1px var(--color-line), 0 0 8px var(--glow-sun-yellow), 0 0 16px var(--glow-sun-yellow-subtle);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  & .shadow-raised {
+    --tw-shadow: 0 0 0 1px var(--color-line), 0 0 8px var(--glow-sun-yellow), 0 0 20px var(--glow-sun-yellow-subtle);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  & .shadow-floating {
+    --tw-shadow: 0 0 0 1px var(--color-line), 0 0 10px var(--glow-sun-yellow), 0 0 24px var(--glow-sun-yellow-subtle);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  & .shadow-focused {
+    --tw-shadow: 0 0 0 1px var(--color-line-hover), 0 0 12px var(--glow-sun-yellow), 0 0 24px var(--glow-sun-yellow), 0 0 36px var(--glow-sun-yellow-subtle);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  /* ============================================
+     PIXEL SHADOW — Dark mode glow equivalents
+     ============================================ */
+
+  & .pixel-shadow-surface {
+    filter: drop-shadow(0 0 4px oklch(0.9208 0.1118 98.08 / 0.08));
+  }
+  & .pixel-shadow-resting {
+    filter: drop-shadow(0 0 4px oklch(0.9208 0.1118 98.08 / 0.12)) drop-shadow(0 0 8px oklch(0.9208 0.1118 98.08 / 0.06));
+  }
+  & .pixel-shadow-lifted {
+    filter: drop-shadow(0 0 8px oklch(0.9208 0.1118 98.08 / 0.2)) drop-shadow(0 0 16px oklch(0.9208 0.1118 98.08 / 0.08));
+  }
+  & .pixel-shadow-raised {
+    filter: drop-shadow(0 0 8px oklch(0.9208 0.1118 98.08 / 0.2)) drop-shadow(0 0 20px oklch(0.9208 0.1118 98.08 / 0.08));
+  }
+  & .pixel-shadow-floating {
+    filter: drop-shadow(0 0 10px oklch(0.9208 0.1118 98.08 / 0.25)) drop-shadow(0 0 24px oklch(0.9208 0.1118 98.08 / 0.1));
+  }
+
+  /* ============================================
+     SOLID BUTTON — Ink bg, tone text,
+     glow + border on hover
+     ============================================ */
+
+  /* Icon-only buttons: suppress gradient bevels (artifacts at high rounded values) */
+  & [data-slot="button-face"][data-icon-only] {
+    background-image: none !important;
+  }
+
+  /* Pressed pattern overlay: tone-matched (--btn-tint is set per data-color) */
+  & [data-slot="button-face"][data-mode="solid"]:active::before {
+    background: var(--btn-tint) !important;
+  }
+
+  & [data-slot="button-face"][data-mode="solid"] {
+    background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 15%);
+    background-image: none;
+    color: var(--btn-tint);
+    transition: background 150ms ease-out, translate 150ms ease-out;
+
+    &::after { background: var(--color-rule); }
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 20%) !important;
+      background-image: none;
+      &::after { background: var(--color-line-hover); }
+    }
+
+    &:active {
+      background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 25%) !important;
+      background-image: none;
+      &::after { background: var(--color-focus); }
+    }
+
+    &[data-state="selected"] {
+      background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 25%) !important;
+      background-image: none;
+      &::after { background: var(--color-focus); }
+    }
+  }
+
+  /* Danger tone on solid — pixel border color overrides */
+  & [data-slot="button-face"][data-mode="solid"][data-color="danger"] {
+    &::after { background: oklch(from var(--color-danger) l c h / 0.3); }
+    &:hover::after { background: oklch(0.7429 0.1568 21.43 / 0.4); }
+    &:active::after { background: var(--color-sun-red); }
+    &[data-state="selected"]::after { background: var(--color-sun-red); }
+  }
+
+  /* Success tone on solid — green border */
+  & [data-slot="button-face"][data-mode="solid"][data-color="success"] {
+    &::after { background: oklch(from var(--color-success) l c h / 0.3); }
+    &:hover::after { background: oklch(from var(--color-success) l c h / 0.5); }
+    &:active::after { background: var(--color-success); }
+    &[data-state="selected"]::after { background: var(--color-success); }
+  }
+
+  /* Info tone on solid — blue border */
+  & [data-slot="button-face"][data-mode="solid"][data-color="info"] {
+    &::after { background: oklch(from var(--color-sky-blue) l c h / 0.3); }
+    &:hover::after { background: oklch(from var(--color-sky-blue) l c h / 0.5); }
+    &:active::after { background: var(--color-sky-blue); }
+    &[data-state="selected"]::after { background: var(--color-sky-blue); }
+  }
+
+  /* Neutral tone on solid — muted cream border */
+  & [data-slot="button-face"][data-mode="solid"][data-color="neutral"] {
+    &::after { background: var(--color-rule); }
+    &:hover::after { background: var(--color-line); }
+    &:active::after { background: var(--color-line-hover); }
+    &[data-state="selected"]::after { background: var(--color-line-hover); }
+  }
+
+  /* Cream tone on solid — cream border */
+  & [data-slot="button-face"][data-mode="solid"][data-color="cream"] {
+    &::after { background: oklch(from var(--color-cream) l c h / 0.25); }
+    &:hover::after { background: oklch(from var(--color-cream) l c h / 0.4); }
+    &:active::after { background: var(--color-cream); }
+    &[data-state="selected"]::after { background: var(--color-cream); }
+  }
+
+  /* White tone on solid — white border */
+  & [data-slot="button-face"][data-mode="solid"][data-color="white"] {
+    &::after { background: oklch(from var(--color-pure-white) l c h / 0.25); }
+    &:hover::after { background: oklch(from var(--color-pure-white) l c h / 0.4); }
+    &:active::after { background: var(--color-pure-white); }
+    &[data-state="selected"]::after { background: var(--color-pure-white); }
+  }
+
+  /* Tinted tone on solid — accent-soft border */
+  & [data-slot="button-face"][data-mode="solid"][data-color="tinted"] {
+    &::after { background: oklch(from var(--color-accent-soft) l c h / 0.3); }
+    &:hover::after { background: oklch(from var(--color-accent-soft) l c h / 0.5); }
+    &:active::after { background: var(--color-accent-soft); }
+    &[data-state="selected"]::after { background: var(--color-accent-soft); }
+  }
+
+  /* ============================================
+     QUIET MODIFIER — Transparent at rest, re-applies fill on hover.
+     ============================================ */
+
+  & [data-slot="button-face"][data-quiet] {
+    background-color: transparent;
+    background-image: none;
+    transition: background 150ms ease-out, translate 150ms ease-out;
+    box-shadow: none;
+
+    &::after { background: transparent; transition: background 150ms ease-out; }
+
+    &[data-state="selected"] {
+      background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 15%);
+      background-image:
+        linear-gradient(to bottom, oklch(from var(--btn-tint) l c h / 0.1) 0px, transparent 1px),
+        linear-gradient(to right, oklch(from var(--btn-tint) l c h / 0.1) 0px, transparent 1px),
+        linear-gradient(to top, oklch(0 0 0 / 0.2) 0px, transparent 1px),
+        linear-gradient(to left, oklch(0 0 0 / 0.2) 0px, transparent 1px);
+      color: var(--btn-tint);
+      &::after { background: var(--color-rule); }
+    }
+
+    &:hover {
+      background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 20%) !important;
+      background-image:
+        linear-gradient(to bottom, oklch(from var(--btn-tint) l c h / 0.15) 0px, transparent 1px),
+        linear-gradient(to right, oklch(from var(--btn-tint) l c h / 0.15) 0px, transparent 1px),
+        linear-gradient(to top, oklch(0 0 0 / 0.3) 0px, transparent 1px),
+        linear-gradient(to left, oklch(0 0 0 / 0.3) 0px, transparent 1px);
+      color: var(--btn-tint);
+      &::after { background: var(--color-line-hover); }
+    }
+
+    &:active {
+      background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 25%) !important;
+      background-image:
+        linear-gradient(to bottom, oklch(0 0 0 / 0.3) 0px, transparent 1px),
+        linear-gradient(to right, oklch(0 0 0 / 0.3) 0px, transparent 1px),
+        linear-gradient(to top, oklch(from var(--btn-tint) l c h / 0.15) 0px, transparent 1px),
+        linear-gradient(to left, oklch(from var(--btn-tint) l c h / 0.15) 0px, transparent 1px);
+      color: var(--btn-tint);
+      &::after { background: var(--color-focus); }
+    }
+  }
+
+  /* Flat+quiet — no bevel on hover */
+  & [data-slot="button-face"][data-mode="flat"][data-quiet] {
+    &:hover, &:active { background-image: none; }
+  }
+
+  /* ============================================
+     FLAT BUTTON — Moon Mode
+     Hover: subtle tint (glow on root handles the visual pop)
+     Press: cream bg, ink text
+     ============================================ */
+
+  & [data-slot="button-face"][data-mode="flat"] {
+    &:hover {
+      background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 10%) !important;
+      background-image: none;
+      color: var(--btn-tint);
+    }
+
+    &:active {
+      background-color: var(--color-cream) !important;
+      background-image: none;
+      color: var(--color-ink);
+    }
+  }
+
+
+  /* ============================================
+     OUTLINE BUTTON — Transparent, glow on hover
+     ============================================ */
+
+  & [data-slot="button-face"][data-mode="pattern"] {
+    background-color: transparent;
+    background-image: none;
+    transition: translate 150ms ease-out;
+
+    &::after { background: var(--color-rule); transition: background 150ms ease-out; }
+
+    &:hover {
+      background-color: transparent !important;
+      background-image: none;
+      &::after { background: var(--color-line-hover); }
+    }
+
+    &:active {
+      background-color: transparent !important;
+      background-image: none;
+      &::after { background: var(--color-focus); }
+    }
+
+    &[data-state="selected"] {
+      background-color: transparent !important;
+      background-image: none;
+      &::after { background: var(--color-focus); }
+    }
+  }
+
+  /* ============================================
+     TEXT BUTTON — No border ever, glow only
+     ============================================ */
+
+  & [data-slot="button-face"][data-mode="text"] {
+    background: transparent;
+    border: none !important;
+    box-shadow: none;
+    transition: color 150ms ease-out;
+
+    &:hover {
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none;
+    }
+
+    &:active {
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none;
+    }
+
+    &[data-state="selected"] {
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none;
+    }
+  }
+
+  /* ============================================
+     BADGE STATUS — Ink text on light status backgrounds
+     Status backgrounds (mint, yellow, red, blue) don't
+     flip in dark mode — text must stay dark for contrast.
+     ============================================ */
+
+  & [data-slot="badge"][data-variant="success"],
+  & [data-slot="badge"][data-variant="warning"],
+  & [data-slot="badge"][data-variant="error"],
+  & [data-slot="badge"][data-variant="info"] {
+    color: var(--color-ink);
+  }
+
+  /* ============================================
+     ACCORDION — Glow on trigger hover
+     ============================================ */
+
+  & [data-slot="accordion-item"][data-variant="accordion"] {
+    transition: box-shadow 150ms ease-out, border-color 150ms ease-out;
+
+    &:has(button:hover) {
+      border-color: var(--color-line-hover);
+      box-shadow:
+        0 0 4px var(--glow-cream-hover),
+        0 0 10px var(--glow-sun-yellow-subtle);
+    }
+  }
+
+  /* ============================================
+     ALERT — Status variants flip in dark mode
+     Light: solid status bg fill + ink shadow
+     Dark:  dark bg + colored border + soft glow
+     ============================================ */
+
+  /* Glow on shadow wrapper (not clipped by inner clip-path) */
+  & [data-rdna="alert"][data-variant="success"] {
+    filter: drop-shadow(0 0 12px var(--color-success));
+  }
+  & [data-rdna="alert"][data-variant="warning"] {
+    filter: drop-shadow(0 0 12px var(--color-warning));
+  }
+  & [data-rdna="alert"][data-variant="error"] {
+    filter: drop-shadow(0 0 12px var(--color-danger));
+  }
+  & [data-rdna="alert"][data-variant="info"] {
+    filter: drop-shadow(0 0 12px var(--color-link));
+  }
+
+  /* Colors on inner element (inside clip-path) */
+  & [data-rdna="alert"][data-variant="success"] > [role="alert"] {
+    background-color: var(--color-page);
+    border-color: var(--color-success);
+  }
+  & [data-rdna="alert"][data-variant="warning"] > [role="alert"] {
+    background-color: var(--color-page);
+    border-color: var(--color-warning);
+  }
+  & [data-rdna="alert"][data-variant="error"] > [role="alert"] {
+    background-color: var(--color-page);
+    border-color: var(--color-danger);
+  }
+  & [data-rdna="alert"][data-variant="info"] > [role="alert"] {
+    background-color: var(--color-page);
+    border-color: var(--color-link);
+  }
+
+  /* ============================================
+     CARD — Moon Mode
+     Dark surface with warm cream bevels.
+     ============================================ */
+
+  & [data-slot="card"][data-variant="default"],
+  & [data-slot="card"][data-variant="raised"] {
+    background-color: var(--color-card);
+    background-image:
+      linear-gradient(to bottom, oklch(0.9780 0.0295 94.34 / 0.06) 0px, transparent 1px),
+      linear-gradient(to right, oklch(0.9780 0.0295 94.34 / 0.06) 0px, transparent 1px),
+      linear-gradient(to top, oklch(0 0 0 / 0.25) 0px, transparent 1px),
+      linear-gradient(to left, oklch(0 0 0 / 0.25) 0px, transparent 1px);
+    box-shadow:
+      inset 1px 1px 0 0 oklch(0.9780 0.0295 94.34 / 0.04),
+      inset -1px -1px 0 0 oklch(0 0 0 / 0.2);
+
+    &::after { background: var(--color-rule); }
+  }
+
+  & [data-slot="card"][data-variant="inverted"] {
+    background-color: var(--color-inv);
+    background-image:
+      linear-gradient(to bottom, oklch(0.9780 0.0295 94.34 / 0.04) 0px, transparent 1px),
+      linear-gradient(to right, oklch(0.9780 0.0295 94.34 / 0.04) 0px, transparent 1px),
+      linear-gradient(to top, oklch(0 0 0 / 0.3) 0px, transparent 1px),
+      linear-gradient(to left, oklch(0 0 0 / 0.3) 0px, transparent 1px);
+    box-shadow:
+      inset 1px 1px 0 0 oklch(0.9780 0.0295 94.34 / 0.03),
+      inset -1px -1px 0 0 oklch(0 0 0 / 0.25);
+
+    &::after { background: var(--color-rule); }
+  }
+
+  /* Moon Mode: kill inset bevel highlights (glow replaces directional bevel) */
+  & [data-slot="button-face"][data-mode="solid"],
+  & [data-slot="button-face"][data-mode="pattern"] {
+    box-shadow: none;
+    &:active { box-shadow: none; }
+  }
+
+  /* Keep Moon Mode buttons flat: glow replaces directional lift. */
+  & [data-slot="button-face"][data-mode="solid"],
+  & [data-slot="button-face"][data-mode="pattern"],
+  & [data-slot="button-face"][data-mode="flat"],
+  & [data-slot="button-face"][data-quiet],
+  & [data-slot="button-face"][data-mode="text"] {
+    &:hover,
+    &:active,
+    &[data-state="selected"] {
+      translate: 0 0 !important;
+      transform: none !important;
+    }
+  }
+
+  /* ============================================
+     BUTTON GLOW — On root wrapper (outside clip-path)
+     Tone-aware: accent (default), danger, success, neutral,
+     info, cream, white, tinted.
+     !important needed to override high-specificity base.css
+     hover/active selectors (6x :not() pseudo-classes).
+     ============================================ */
+
+  & [data-slot="button-root"] {
+    transition: filter 150ms ease-out;
+
+    &:hover {
+      filter:
+        drop-shadow(0 0 4px var(--glow-cream-hover))
+        drop-shadow(0 0 10px var(--glow-sun-yellow-subtle)) !important;
+    }
+
+    &:active {
+      filter:
+        drop-shadow(0 0 6px var(--glow-cream-active))
+        drop-shadow(0 0 14px var(--glow-sun-yellow)) !important;
+    }
+
+    &[data-state="selected"] {
+      filter:
+        drop-shadow(0 0 4px var(--glow-cream-hover))
+        drop-shadow(0 0 10px var(--glow-sun-yellow-subtle)) !important;
+    }
+  }
+
+  /* Danger tone — red glow */
+  & [data-slot="button-root"][data-color="danger"] {
+    &:hover {
+      filter:
+        drop-shadow(0 0 4px oklch(0.7429 0.1568 21.43 / 0.3))
+        drop-shadow(0 0 10px var(--glow-sun-red)) !important;
+    }
+
+    &:active {
+      filter:
+        drop-shadow(0 0 6px oklch(0.7429 0.1568 21.43 / 0.4))
+        drop-shadow(0 0 14px var(--glow-sun-red)) !important;
+    }
+
+    &[data-state="selected"] {
+      filter:
+        drop-shadow(0 0 4px oklch(0.7429 0.1568 21.43 / 0.3))
+        drop-shadow(0 0 10px var(--glow-sun-red)) !important;
+    }
+  }
+
+  /* Success tone — mint glow */
+  & [data-slot="button-root"][data-color="success"] {
+    &:hover {
+      filter:
+        drop-shadow(0 0 4px oklch(0.9312 0.0702 142.51 / 0.3))
+        drop-shadow(0 0 10px var(--glow-mint)) !important;
+    }
+
+    &:active {
+      filter:
+        drop-shadow(0 0 6px oklch(0.9312 0.0702 142.51 / 0.4))
+        drop-shadow(0 0 14px var(--glow-mint)) !important;
+    }
+
+    &[data-state="selected"] {
+      filter:
+        drop-shadow(0 0 4px oklch(0.9312 0.0702 142.51 / 0.3))
+        drop-shadow(0 0 10px var(--glow-mint)) !important;
+    }
+  }
+
+  /* Info tone — blue glow */
+  & [data-slot="button-root"][data-color="info"] {
+    &:hover {
+      filter:
+        drop-shadow(0 0 4px oklch(0.7701 0.0527 236.81 / 0.3))
+        drop-shadow(0 0 10px var(--glow-sky-blue)) !important;
+    }
+
+    &:active {
+      filter:
+        drop-shadow(0 0 6px oklch(0.7701 0.0527 236.81 / 0.4))
+        drop-shadow(0 0 14px var(--glow-sky-blue)) !important;
+    }
+
+    &[data-state="selected"] {
+      filter:
+        drop-shadow(0 0 4px oklch(0.7701 0.0527 236.81 / 0.3))
+        drop-shadow(0 0 10px var(--glow-sky-blue)) !important;
+    }
+  }
+
+  /* Neutral tone — dimmer cream glow */
+  & [data-slot="button-root"][data-color="neutral"] {
+    &:hover {
+      filter:
+        drop-shadow(0 0 3px oklch(0.9126 0.1170 93.68 / 0.15))
+        drop-shadow(0 0 8px oklch(0.9126 0.1170 93.68 / 0.08)) !important;
+    }
+
+    &:active {
+      filter:
+        drop-shadow(0 0 4px oklch(0.9126 0.1170 93.68 / 0.2))
+        drop-shadow(0 0 10px oklch(0.9126 0.1170 93.68 / 0.12)) !important;
+    }
+
+    &[data-state="selected"] {
+      filter:
+        drop-shadow(0 0 3px oklch(0.9126 0.1170 93.68 / 0.15))
+        drop-shadow(0 0 8px oklch(0.9126 0.1170 93.68 / 0.08)) !important;
+    }
+  }
+
+  /* Cream tone — warm cream glow */
+  & [data-slot="button-root"][data-color="cream"] {
+    &:hover {
+      filter:
+        drop-shadow(0 0 4px var(--glow-cream-hover))
+        drop-shadow(0 0 10px var(--glow-cream-hover)) !important;
+    }
+
+    &:active {
+      filter:
+        drop-shadow(0 0 6px var(--glow-cream-active))
+        drop-shadow(0 0 14px var(--glow-cream-active)) !important;
+    }
+
+    &[data-state="selected"] {
+      filter:
+        drop-shadow(0 0 4px var(--glow-cream-hover))
+        drop-shadow(0 0 10px var(--glow-cream-hover)) !important;
+    }
+  }
+
+  /* White tone — bright white glow */
+  & [data-slot="button-root"][data-color="white"] {
+    &:hover {
+      filter:
+        drop-shadow(0 0 4px oklch(1.0 0 0 / 0.25))
+        drop-shadow(0 0 10px oklch(1.0 0 0 / 0.12)) !important;
+    }
+
+    &:active {
+      filter:
+        drop-shadow(0 0 6px oklch(1.0 0 0 / 0.35))
+        drop-shadow(0 0 14px oklch(1.0 0 0 / 0.18)) !important;
+    }
+
+    &[data-state="selected"] {
+      filter:
+        drop-shadow(0 0 4px oklch(1.0 0 0 / 0.25))
+        drop-shadow(0 0 10px oklch(1.0 0 0 / 0.12)) !important;
+    }
+  }
+
+  /* Tinted tone — warm sunset glow */
+  & [data-slot="button-root"][data-color="tinted"] {
+    &:hover {
+      filter:
+        drop-shadow(0 0 4px var(--glow-sun-yellow-subtle))
+        drop-shadow(0 0 10px var(--glow-sun-yellow-subtle)) !important;
+    }
+
+    &:active {
+      filter:
+        drop-shadow(0 0 6px var(--glow-sun-yellow))
+        drop-shadow(0 0 14px var(--glow-sun-yellow-subtle)) !important;
+    }
+
+    &[data-state="selected"] {
+      filter:
+        drop-shadow(0 0 4px var(--glow-sun-yellow-subtle))
+        drop-shadow(0 0 10px var(--glow-sun-yellow-subtle)) !important;
+    }
+  }
+
+  /* ============================================
+     FORCED PREVIEW STATES — keep preview wrappers aligned with dark theme
+     ============================================ */
+
+  & [data-force-state="hover"] [data-slot="button-face"][data-mode="solid"]:not([data-state="selected"]) {
+    background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 20%) !important;
+    background-image: none;
+
+    &::after { background: var(--color-line-hover); }
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-face"][data-mode="solid"]:not([data-state="selected"]) {
+    background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 25%) !important;
+    background-image: none;
+
+    &::before { background: var(--btn-tint); }
+    &::after { background: var(--color-focus); }
+  }
+
+  & [data-force-state="hover"] [data-slot="button-face"][data-mode="solid"][data-color="danger"]:not([data-state="selected"])::after {
+    background: oklch(0.7429 0.1568 21.43 / 0.4);
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-face"][data-mode="solid"][data-color="danger"]:not([data-state="selected"])::after {
+    background: var(--color-sun-red);
+  }
+
+  & [data-force-state="hover"] [data-slot="button-face"][data-quiet]:not([data-state="selected"]) {
+    background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 20%) !important;
+    background-image:
+      linear-gradient(to bottom, oklch(from var(--btn-tint) l c h / 0.15) 0px, transparent 1px),
+      linear-gradient(to right, oklch(from var(--btn-tint) l c h / 0.15) 0px, transparent 1px),
+      linear-gradient(to top, oklch(0 0 0 / 0.3) 0px, transparent 1px),
+      linear-gradient(to left, oklch(0 0 0 / 0.3) 0px, transparent 1px);
+    color: var(--btn-tint);
+
+    &::after { background: var(--color-line-hover); }
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-face"][data-quiet]:not([data-state="selected"]) {
+    background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 25%) !important;
+    background-image:
+      linear-gradient(to bottom, oklch(0 0 0 / 0.3) 0px, transparent 1px),
+      linear-gradient(to right, oklch(0 0 0 / 0.3) 0px, transparent 1px),
+      linear-gradient(to top, oklch(from var(--btn-tint) l c h / 0.15) 0px, transparent 1px),
+      linear-gradient(to left, oklch(from var(--btn-tint) l c h / 0.15) 0px, transparent 1px);
+    color: var(--btn-tint);
+
+    &::after { background: var(--color-focus); }
+  }
+
+  & [data-force-state="hover"] [data-slot="button-face"][data-mode="flat"]:not([data-state="selected"]) {
+    background-color: color-mix(in oklch, var(--color-ink), var(--btn-tint) 10%) !important;
+    background-image: none;
+    color: var(--btn-tint);
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-face"][data-mode="flat"]:not([data-state="selected"]) {
+    background-color: var(--color-cream) !important;
+    background-image: none;
+    color: var(--color-ink);
+  }
+
+  & [data-force-state="hover"] [data-slot="button-face"][data-mode="pattern"]:not([data-state="selected"]) {
+    background-color: transparent !important;
+    background-image: none;
+
+    &::after { background: var(--color-line-hover); }
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-face"][data-mode="pattern"]:not([data-state="selected"]) {
+    background-color: transparent !important;
+    background-image: none;
+
+    &::after { background: var(--color-focus); }
+  }
+
+  & [data-force-state="hover"] [data-slot="button-face"][data-mode="text"]:not([data-state="selected"]) {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none;
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-face"][data-mode="text"]:not([data-state="selected"]) {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none;
+  }
+
+  & [data-force-state="hover"] [data-slot="button-face"],
+  & [data-force-state="pressed"] [data-slot="button-face"] {
+    translate: 0 0 !important;
+    transform: none !important;
+  }
+
+  & [data-force-state="hover"] [data-slot="button-root"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 4px var(--glow-cream-hover))
+      drop-shadow(0 0 10px var(--glow-sun-yellow-subtle)) !important;
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-root"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 6px var(--glow-cream-active))
+      drop-shadow(0 0 14px var(--glow-sun-yellow)) !important;
+  }
+
+  & [data-force-state="hover"] [data-slot="button-root"][data-color="danger"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 4px oklch(0.7429 0.1568 21.43 / 0.3))
+      drop-shadow(0 0 10px var(--glow-sun-red)) !important;
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-root"][data-color="danger"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 6px oklch(0.7429 0.1568 21.43 / 0.4))
+      drop-shadow(0 0 14px var(--glow-sun-red)) !important;
+  }
+
+  & [data-force-state="hover"] [data-slot="button-root"][data-color="success"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 4px oklch(0.9312 0.0702 142.51 / 0.3))
+      drop-shadow(0 0 10px var(--glow-mint)) !important;
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-root"][data-color="success"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 6px oklch(0.9312 0.0702 142.51 / 0.4))
+      drop-shadow(0 0 14px var(--glow-mint)) !important;
+  }
+
+  & [data-force-state="hover"] [data-slot="button-root"][data-color="info"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 4px oklch(0.7701 0.0527 236.81 / 0.3))
+      drop-shadow(0 0 10px var(--glow-sky-blue)) !important;
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-root"][data-color="info"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 6px oklch(0.7701 0.0527 236.81 / 0.4))
+      drop-shadow(0 0 14px var(--glow-sky-blue)) !important;
+  }
+
+  & [data-force-state="hover"] [data-slot="button-root"][data-color="neutral"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 3px oklch(0.9126 0.1170 93.68 / 0.15))
+      drop-shadow(0 0 8px oklch(0.9126 0.1170 93.68 / 0.08)) !important;
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-root"][data-color="neutral"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 4px oklch(0.9126 0.1170 93.68 / 0.2))
+      drop-shadow(0 0 10px oklch(0.9126 0.1170 93.68 / 0.12)) !important;
+  }
+
+  & [data-force-state="hover"] [data-slot="button-root"][data-color="cream"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 4px var(--glow-cream-hover))
+      drop-shadow(0 0 10px var(--glow-cream-hover)) !important;
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-root"][data-color="cream"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 6px var(--glow-cream-active))
+      drop-shadow(0 0 14px var(--glow-cream-active)) !important;
   }
+
+  & [data-force-state="hover"] [data-slot="button-root"][data-color="white"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 4px oklch(1 0 0 / 0.25))
+      drop-shadow(0 0 10px oklch(1 0 0 / 0.12)) !important;
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-root"][data-color="white"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 6px oklch(1 0 0 / 0.35))
+      drop-shadow(0 0 14px oklch(1 0 0 / 0.18)) !important;
+  }
+
+  & [data-force-state="hover"] [data-slot="button-root"][data-color="tinted"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 4px var(--glow-sun-yellow-subtle))
+      drop-shadow(0 0 10px var(--glow-sun-yellow-subtle)) !important;
+  }
+
+  & [data-force-state="pressed"] [data-slot="button-root"][data-color="tinted"]:not([data-state="selected"]) {
+    filter:
+      drop-shadow(0 0 6px var(--glow-sun-yellow))
+      drop-shadow(0 0 14px var(--glow-sun-yellow-subtle)) !important;
+  }
+
+  & [data-force-state="hover"] [data-slot="button-root"]:not([data-mode="text"]):not([data-state="selected"]),
+  & [data-force-state="pressed"] [data-slot="button-root"]:not([data-mode="text"]):not([data-state="selected"]) {
+    transform: none !important;
+    translate: 0 0 !important;
+  }
+
+  /* ============================================
+     SWITCH — Moon Mode overrides
+     Track: ink bg at rest, glow on hover
+     Thumb: flat, glow + yellow border on hover
+     ============================================ */
+
+  & [data-slot="switch-track"][data-variant="switch"] {
+    background: var(--color-ink);
+    border-color: var(--color-rule);
+    box-shadow: none;
+    transition: filter 150ms ease-out, border-color 150ms ease-out;
+  }
+
+  & [data-slot="switch-track"][data-variant="switch"][data-checked] {
+    background: var(--color-accent);
+    border-color: var(--color-focus);
+  }
+
+  & [data-slot="switch-thumb"] {
+    background: var(--color-inv);
+    border-color: var(--color-rule);
+  }
+
+  & [data-slot="switch-track"][data-variant="switch"]:hover {
+    border-color: var(--color-line-hover);
+    filter:
+      drop-shadow(0 0 4px var(--glow-cream-hover))
+      drop-shadow(0 0 10px var(--glow-sun-yellow-subtle));
+  }
+
+  & [data-slot="switch-track"][data-variant="switch"]:hover [data-slot="switch-thumb"] {
+    --tw-translate-y: 0 !important;
+    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+    border-color: var(--color-focus);
+    filter:
+      drop-shadow(0 0 6px var(--glow-sun-yellow-subtle));
+  }
+
+  & [data-slot="switch-track"][data-variant="switch"]:active {
+    border-color: var(--color-focus);
+    filter:
+      drop-shadow(0 0 6px var(--glow-cream-active))
+      drop-shadow(0 0 14px var(--glow-sun-yellow));
+  }
+
+
+  /* ============================================
+     SELECT — Moon Mode overrides
+     Ghost-style trigger: flat at rest, glow on hover/open
+     ============================================ */
+
+  & [data-slot="select-trigger"][data-variant="select"] {
+    background: transparent;
+    border-color: var(--color-rule);
+    box-shadow: none;
+    transition: filter 150ms ease-out, border-color 150ms ease-out;
+
+    &:hover {
+      translate: 0 0;
+      border-color: var(--color-line-hover);
+      filter:
+        drop-shadow(0 0 4px var(--glow-cream-hover))
+        drop-shadow(0 0 10px var(--glow-sun-yellow-subtle));
+    }
+  }
+
+  & [data-slot="select-trigger"][data-variant="select"][data-open="true"] {
+    translate: 0 0;
+    background: transparent;
+    border-color: var(--color-focus);
+    filter:
+      drop-shadow(0 0 6px var(--glow-cream-active))
+      drop-shadow(0 0 14px var(--glow-sun-yellow));
+  }
+
+  /* ============================================
+     PILL TABS (WindowTabs) — [role="tab"] overrides
+     ============================================ */
+
+  & [role="tab"] {
+    background: transparent;
+    color: var(--color-sun-yellow);
+    border-color: var(--color-rule);
+    transition: filter 150ms ease-out, border-color 150ms ease-out;
+  }
+
+  & [role="tab"]:hover {
+    background: transparent;
+    border-color: var(--color-line-hover);
+    filter:
+      drop-shadow(0 0 4px var(--glow-cream-hover))
+      drop-shadow(0 0 10px var(--glow-sun-yellow-subtle));
+  }
+
+  & [role="tab"][aria-selected="true"] {
+    background: var(--color-accent);
+    color: var(--color-ink);
+    border-color: var(--color-line);
+    box-shadow: none;
+    translate: 0 0;
+  }
+
+  /* ============================================
+     DOT PATTERN - Invert for dark backgrounds
+     Slider tracks use filter, scrollbar uses swapped SVG
+     ============================================ */
+
+  --dot-pattern-filter: invert(1);
+  --scrollbar-track-bg: url('./assets/scrollbar-background-dark.svg');
+
+  /* ============================================
+     SCROLLBAR THUMB — Matches primary button pattern:
+     Ink bg, muted border, glow + yellow on hover
+     ============================================ */
+
+  &::-webkit-scrollbar-thumb,
+  & *::-webkit-scrollbar-thumb {
+    background: var(--color-ink);
+    border: 0.375rem solid transparent;
+    border-radius: 0.5rem;
+    background-clip: padding-box;
+    box-shadow: inset 0 0 0 1px var(--color-rule);
+    transition: box-shadow 150ms ease-out, background 150ms ease-out;
+  }
+
+  &::-webkit-scrollbar-thumb:hover,
+  & *::-webkit-scrollbar-thumb:hover {
+    background: var(--color-sun-yellow);
+    border: 0.375rem solid transparent;
+    background-clip: padding-box;
+    box-shadow:
+      inset 0 0 0 1px var(--color-edge-hover),
+      0 0 4px var(--glow-cream-hover),
+      0 0 10px var(--glow-sun-yellow-subtle);
+  }
+
+
+  /* Button — no translate in dark mode (glow replaces lift for all modes) */
+  & [data-slot="button-root"]:hover,
+  & [data-slot="button-root"]:active {
+    transform: none !important;
+    translate: 0 0 !important;
+  }
+
+  /* ============================================
+     LOGO GLOW — SVG wordmark + icon phosphor halo
+     Applied via .dark-glow-logo class
+     ============================================ */
+
+  & .dark-glow-logo {
+    filter:
+      drop-shadow(0 0 13px var(--glow-sun-yellow))
+      drop-shadow(0 0 80px oklch(0.9126 0.1170 93.68 / 0.2));
+  }
+
+  /* ============================================
+     TEXT GLOW — Kill on status badges/toggles
+     where text sits on colored backgrounds
+     ============================================ */
+
+  & [data-slot="badge"][data-variant="success"],
+  & [data-slot="badge"][data-variant="warning"],
+  & [data-slot="badge"][data-variant="error"],
+  & [data-slot="badge"][data-variant="info"] {
+    text-shadow: none;
+  }
+}
+
+/* =============================================================================
+   Dark Mode Pattern Glow — Mouse Follower
+   Patterns use mask-image on background-color. In dark mode, swap to a radial
+   gradient centered on the cursor so pattern dots glow warm near the mouse.
+   JS sets --mouse-x / --mouse-y on the element or a parent container.
+   Without JS (or before first mousemove), patterns render in muted grey.
+   ============================================================================= */
+
+.dark {
+  /* Mouse position — updated by JS, defaults to off-screen */
+  --mouse-x: -9999px;
+  --mouse-y: -9999px;
+
+  /* Glow tuning — override per-instance via inline style */
+  --pat-glow-shape: circle;
+  --pat-glow-color: var(--color-sun-yellow);
+  --pat-glow-mid: oklch(0.6 0.04 85);
+  --pat-glow-mid-stop: 40%;
+  --pat-glow-radius: 180px;
+  --pat-glow-base: oklch(0.45 0.01 85);
+}
+
+.dark .rdna-pat {
+  background-color: transparent;
+  background-image: radial-gradient(
+    var(--pat-glow-shape) var(--pat-glow-radius) at var(--mouse-x) var(--mouse-y),
+    var(--pat-glow-color) 0%,
+    var(--pat-glow-mid) var(--pat-glow-mid-stop),
+    var(--pat-glow-base) 100%
+  );
+}
+
+/* Click/active burst — brighter + wider radius */
+.dark [data-pat-active] .rdna-pat,
+.dark .rdna-pat.rdna-pat--active {
+  background-image: radial-gradient(
+    var(--pat-glow-shape) calc(var(--pat-glow-radius) * 1.5) at var(--mouse-x) var(--mouse-y),
+    var(--color-sun-yellow) 0%,
+    oklch(0.75 0.08 85) 30%,
+    var(--pat-glow-base) 100%
+  );
+}
+
+/* Escape hatch: flat color patterns that shouldn't glow */
+.dark .rdna-pat--no-glow {
+  background-image: none;
+  background-color: var(--pat-color, var(--color-main));
 }