@rdna/radiants 0.1.1 → 0.1.3

package/base.css

@@ -1,13 +1,39 @@
 /* =============================================================================
-   @dna/radiants - Base Styles
+   @rdna/radiants - Base Styles
    Box-sizing reset, html/body defaults, selection styles, and scrollbar CSS
    ============================================================================= */
 
+/* ============================================================================
+   Global asset references (usable as CSS vars in JS components)
+   ============================================================================ */
+
+:root {
+  --dot-pattern: url('./assets/scrollbar-background.svg');
+  --dot-pattern-filter: none;
+  --scrollbar-track-bg: url('./assets/scrollbar-background.svg');
+  --touch-target-default: var(--touch-target-comfortable);
+  --density-scale: var(--density-comfortable);
+}
+
+/* Density tiers are attribute-driven so any subtree can opt into a different
+   interaction rhythm without changing component APIs. */
+[data-density="compact"] {
+  --touch-target-default: var(--touch-target-min);
+  --density-scale: var(--density-compact);
+}
+
+[data-density="comfortable"] {
+  --touch-target-default: var(--touch-target-comfortable);
+  --density-scale: var(--density-comfortable);
+}
+
 /* ============================================================================
    Box-Sizing Reset
    ============================================================================ */
 
-* {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -15,6 +41,10 @@
    HTML/Body Base Styles
    ============================================================================ */
 
+html {
+  font-size: clamp(14px, 0.25vw + 12px, 18px);
+}
+
 html,
 body {
   margin: 0;
@@ -24,10 +54,9 @@ body {
 }
 
 body {
-  font-family: 'Joystix Monospace', monospace;
-  font-size: clamp(1rem, 1vw, 1.125rem);
+  font-family: var(--font-heading);
   background-color: var(--color-sun-yellow);
-  color: var(--color-black);
+  color: var(--color-ink);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -38,12 +67,12 @@ body {
 
 ::selection {
   background: var(--color-sun-yellow);
-  color: var(--color-black);
+  color: var(--color-ink);
 }
 
 ::-moz-selection {
   background: var(--color-sun-yellow);
-  color: var(--color-black);
+  color: var(--color-ink);
 }
 
 /* ============================================================================
@@ -68,7 +97,7 @@ body {
 
 /* Track - narrow and centered within wider scrollbar */
 ::-webkit-scrollbar-track {
-  background: url('./assets/scrollbar-background.svg') center center / 0.5rem auto repeat-y;
+  background: var(--scrollbar-track-bg) center center / 0.5rem auto repeat-y;
   background-position: bottom;
   background-size: 45%;
   -webkit-appearance: none;
@@ -80,14 +109,16 @@ body {
 
 /* Thumb - using border/background-clip method for inset effect */
 ::-webkit-scrollbar-thumb {
-  background: var(--color-warm-cloud);
-  border: 0.375rem solid transparent; /* Transparent border creates padding */
-  border-radius: var(--radius-md);
+  background:
+    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAD0lEQVR42mNgYGD4zzAKAAQTAQCUZZylAAAAAElFTkSuQmCC") repeat 0 0 / 4px 4px,
+    var(--color-cream);
+  border: 0.375rem solid transparent;
+  border-radius: 0.5rem;
   -webkit-appearance: none;
   min-height: 2.25rem;
-  background-clip: padding-box; /* This is the magic - clips background to content area only */
-  /* Add outline around the green area using inset box-shadow */
-  box-shadow: inset 0 0 0 1px var(--color-black);
+  background-clip: padding-box;
+  box-shadow: inset 0 0 0 1px var(--color-ink);
+  image-rendering: pixelated;
 }
 
 /* Thumb hover state */
@@ -95,7 +126,7 @@ body {
   background: var(--color-sun-yellow);
   border: 0.375rem solid transparent;
   background-clip: padding-box;
-  box-shadow: inset 0 0 0 1px var(--color-black);
+  box-shadow: inset 0 0 0 1px var(--color-ink);
 }
 
 /* Thumb active state */
@@ -103,7 +134,7 @@ body {
   background: var(--color-sun-yellow);
   border: 0.375rem solid transparent;
   background-clip: padding-box;
-  box-shadow: inset 0 0 0 1px var(--color-black);
+  box-shadow: inset 0 0 0 1px var(--color-ink);
 }
 
 /* Scrollbar buttons (arrows) - Hide all buttons */
@@ -118,6 +149,26 @@ body {
   display: none !important; /* Hide the corner completely */
 }
 
+/* ============================================================================
+   Slider Track — mask-image pattern, recolorable via semantic tokens
+   ============================================================================ */
+
+.slider-track::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  -webkit-mask-image: var(--pat-checkerboard);
+  mask-image: var(--pat-checkerboard);
+  -webkit-mask-size: 16px 16px;
+  mask-size: 16px 16px;
+  -webkit-mask-repeat: repeat;
+  mask-repeat: repeat;
+  image-rendering: pixelated;
+  background-color: var(--color-rule);
+  pointer-events: none;
+}
+
 /* ============================================================================
    Scrollable Container Utility Classes
 
@@ -126,19 +177,762 @@ body {
 
 .custom-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: var(--color-warm-cloud) var(--color-sun-yellow);
+  scrollbar-color: var(--color-cream) var(--color-sun-yellow);
+}
+
+/* ============================================================================
+   Button Tone — Custom properties set by data-color attribute
+   ============================================================================ */
+
+[data-slot="button-face"] {
+  --btn-fill: var(--color-accent);
+  --btn-text: var(--color-ink);
+  --btn-tint: var(--color-accent);
+}
+
+[data-slot="button-face"][data-color="danger"] {
+  --btn-fill: var(--color-danger);
+  --btn-text: var(--color-ink);
+  --btn-tint: var(--color-danger);
+}
+
+[data-slot="button-face"][data-color="success"] {
+  --btn-fill: var(--color-success);
+  --btn-text: var(--color-ink);
+  --btn-tint: var(--color-success);
+}
+
+[data-slot="button-face"][data-color="neutral"] {
+  --btn-fill: var(--color-inv);
+  --btn-text: var(--color-flip);
+  --btn-tint: var(--color-main);
+}
+
+[data-slot="button-face"][data-color="cream"] {
+  --btn-fill: var(--color-cream);
+  --btn-text: var(--color-ink);
+  --btn-tint: var(--color-cream);
+}
+
+[data-slot="button-face"][data-color="white"] {
+  --btn-fill: var(--color-pure-white);
+  --btn-text: var(--color-ink);
+  --btn-tint: var(--color-pure-white);
+}
+
+[data-slot="button-face"][data-color="info"] {
+  --btn-fill: var(--color-sky-blue);
+  --btn-text: var(--color-ink);
+  --btn-tint: var(--color-sky-blue);
+}
+
+[data-slot="button-face"][data-color="tinted"] {
+  --btn-fill: var(--color-accent-soft);
+  --btn-text: var(--color-ink);
+  --btn-tint: var(--color-accent-soft);
+}
+
+/* Disabled — no bg, pressed position, diagonal-right pattern overlay */
+[data-slot="button-root"][disabled],
+[data-slot="button-root"][aria-disabled="true"],
+[data-slot="button-root"][data-disabled] {
+  cursor: not-allowed !important;
+}
+
+[data-slot="button-root"][disabled] [data-slot="button-face"],
+[data-slot="button-root"][aria-disabled="true"] [data-slot="button-face"],
+[data-slot="button-root"][data-disabled] [data-slot="button-face"] {
+  position: relative;
+  background-color: transparent !important;
+  background-image: none !important;
+  box-shadow: none !important;
+  pointer-events: none;
+  padding-top: 1px;
+  padding-bottom: 0px;
+}
+
+[data-slot="button-root"][disabled] [data-slot="button-face"]::before,
+[data-slot="button-root"][aria-disabled="true"] [data-slot="button-face"]::before,
+[data-slot="button-root"][data-disabled] [data-slot="button-face"]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  background-color: var(--color-main);
+  -webkit-mask-image: var(--pat-diagonal-right);
+  mask-image: var(--pat-diagonal-right);
+  -webkit-mask-size: 4px 4px;
+  mask-size: 4px 4px;
+  image-rendering: pixelated;
+}
+
+/* Hover — lifts 1px, 1px shadow */
+[data-slot="button-root"]:not([data-mode="text"]):not([data-mode="pattern"]):not([data-mode="flat"]):not([disabled]):not([aria-disabled="true"]):not([data-disabled]):hover {
+  transform: translateY(-1px);
+  filter: drop-shadow(0 1px 0 var(--color-ink));
+}
+
+/* Press — drops 1px, top shadow */
+[data-slot="button-root"]:not([data-mode="text"]):not([data-mode="pattern"]):not([data-mode="flat"]):not([disabled]):not([aria-disabled="true"]):not([data-disabled]):active {
+  transform: translateY(1px);
+  filter: drop-shadow(0 -1px 0 var(--color-ink));
+}
+
+
+
+
+[data-slot="button-root"][disabled],
+[data-slot="button-root"][aria-disabled="true"],
+[data-slot="button-root"][data-disabled],
+[data-slot="button-root"][disabled]:hover,
+[data-slot="button-root"][aria-disabled="true"]:hover,
+[data-slot="button-root"][data-disabled]:hover,
+[data-slot="button-root"][disabled]:active,
+[data-slot="button-root"][aria-disabled="true"]:active,
+[data-slot="button-root"][data-disabled]:active {
+  filter: none;
+  transform: none;
+}
+
+
+/* Selected (toggled/active) — stay pinned, no lift or press transform */
+[data-slot="button-root"][data-state="selected"]:hover,
+[data-slot="button-root"][data-state="selected"]:active {
+  transform: none;
+  filter: none;
+}
+
+/* Disable press shift inside accordion tabs */
+[data-tabs-accordion] [data-slot="button-face"]:active {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* ============================================================================
+   Tab Trigger — Visual states via data attributes
+   ============================================================================ */
+
+/* Pill mode — inactive */
+[data-slot="tab-trigger"][data-mode="pill"][data-state="default"] {
+  background-color: transparent;
+  color: var(--color-head);
+}
+[data-slot="tab-trigger"][data-mode="pill"][data-state="default"]:hover {
+  background-color: var(--color-inv);
+  color: var(--color-accent);
+}
+
+/* Pill mode — active */
+[data-slot="tab-trigger"][data-mode="pill"][data-state="selected"] {
+  background-color: var(--color-accent);
+  color: var(--color-accent-inv);
+}
+
+/* Line mode — inactive */
+[data-slot="tab-trigger"][data-mode="line"][data-state="default"] {
+  background-color: transparent;
+  border-radius: 0;
+}
+[data-slot="tab-trigger"][data-mode="line"][data-state="default"]:hover {
+  background-color: var(--color-inv);
+  color: var(--color-accent);
+}
+
+/* Line mode — active */
+[data-slot="tab-trigger"][data-mode="line"][data-state="selected"] {
+  background-color: var(--color-page);
+  border-top: 1px solid var(--color-line);
+  border-left: 1px solid var(--color-line);
+  border-right: 1px solid var(--color-line);
+  border-bottom: none;
+  border-radius: 0;
+  z-index: 10;
+}
+
+/* Capsule mode — inactive */
+[data-slot="tab-trigger"][data-mode="capsule"][data-state="default"] {
+  background-color: transparent;
+  color: var(--color-mute);
+}
+[data-slot="tab-trigger"][data-mode="capsule"][data-state="default"]:hover {
+  background-color: var(--color-inv);
+  color: var(--color-accent);
+}
+
+/* Capsule mode — active */
+[data-slot="tab-trigger"][data-mode="capsule"][data-state="selected"] {
+  background-color: var(--color-accent);
+  color: var(--color-accent-inv);
+}
+
+/* Sidebar mode — inactive */
+[data-slot="tab-trigger"][data-mode="sidebar"][data-state="default"] {
+  background-color: transparent;
+  color: var(--color-main);
+}
+[data-slot="tab-trigger"][data-mode="sidebar"][data-state="default"]:hover {
+  background-color: var(--color-inv);
+  color: var(--color-accent);
+}
+
+/* Sidebar mode — active */
+[data-slot="tab-trigger"][data-mode="sidebar"][data-state="selected"] {
+  background-color: var(--color-page);
+  color: var(--color-head);
+}
+
+/* ============================================================================
+   Button Variants — Sun Mode
+   Layout stays in the component; theme-owned colors and state live here.
+   ============================================================================ */
+
+[data-slot="button-face"][data-mode="solid"] {
+  position: relative;
+  background-color: var(--btn-fill);
+  color: var(--btn-text);
+}
+
+[data-slot="button-face"][data-mode="solid"] > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Pattern overlay — mist on hover, spray-grid on press */
+[data-slot="button-face"][data-mode="solid"]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+
+[data-slot="button-face"][data-mode="solid"]:active::before {
+  background: var(--color-main);
+  -webkit-mask-size: 8px 8px;
+  mask-size: 8px 8px;
+  image-rendering: pixelated;
+  -webkit-mask-image: var(--pat-diagonal-dots);
+  mask-image: var(--pat-diagonal-dots);
+}
+
+[data-slot="button-face"][data-mode="pattern"] {
+  position: relative;
+  background: transparent;
+  color: var(--color-main);
+  border-radius: 4px;
+}
+
+/* Pattern children sit above the ::before overlay so text stays visible */
+[data-slot="button-face"][data-mode="pattern"] > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Pattern overlay — uses ::before so the mask only affects the background layer,
+   not the text content. Color uses semantic border token (--color-line). */
+[data-slot="button-face"][data-mode="pattern"]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+[data-slot="button-face"][data-mode="pattern"]:hover::before {
+  background-color: var(--color-line);
+  -webkit-mask-image: var(--pat-mist);
+  mask-image: var(--pat-mist);
+  -webkit-mask-size: 4px 4px;
+  mask-size: 4px 4px;
+  image-rendering: pixelated;
+}
+
+[data-slot="button-face"][data-mode="pattern"]:active::before {
+  background-color: var(--color-line);
+  -webkit-mask-image: var(--pat-spray-grid);
+  mask-image: var(--pat-spray-grid);
+  -webkit-mask-size: 4px 4px;
+  mask-size: 4px 4px;
+  image-rendering: pixelated;
+}
+
+/* Flat mode — filled like solid rest, no motion */
+[data-slot="button-face"][data-mode="flat"] {
+  background-color: var(--btn-fill);
+  background-image: none;
+  color: var(--btn-text);
+}
+
+/* Flat hover — ink bg, cream text (matches dropdown hover pattern) */
+[data-slot="button-face"][data-mode="flat"]:hover {
+  background-color: var(--color-inv);
+  background-image: none;
+  color: var(--color-flip);
+}
+
+/* Flat press — ink bg, white text (brighter than hover) */
+[data-slot="button-face"][data-mode="flat"]:active {
+  background-color: var(--color-inv);
+  background-image: none;
+  color: var(--color-pure-white);
+}
+
+[data-slot="button-root"][data-mode="flat"]:hover,
+[data-slot="button-root"][data-mode="flat"]:active {
+  transform: none;
+  filter: none;
+}
+
+/* flush prop — negative margins so content aligns with surrounding text */
+[data-slot="button-face"][data-flush][data-size="sm"] { margin-inline: -0.375rem; }
+[data-slot="button-face"][data-flush][data-size="md"] { margin-inline: -0.5rem; }
+[data-slot="button-face"][data-flush][data-size="lg"] { margin-inline: -0.75rem; }
+
+/* Quiet modifier — transparent at rest, re-applies fill on hover/active/selected.
+   Placed last so rest-state transparent overrides any mode's rest fill. */
+[data-slot="button-face"][data-quiet] {
+  background-color: transparent;
+  background-image: none;
+  color: var(--color-head);
+  transition: none;
+}
+
+[data-slot="button-face"][data-quiet]::after {
+  background: transparent;
+}
+
+[data-slot="button-face"][data-quiet][data-state="selected"] {
+  background-color: var(--btn-fill);
+  background-image:
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-flip) 50%, transparent) 0px, transparent 1px),
+    linear-gradient(to right, color-mix(in srgb, var(--color-flip) 50%, transparent) 0px, transparent 1px),
+    linear-gradient(to top, color-mix(in srgb, var(--color-inv) 25%, transparent) 0px, transparent 1px),
+    linear-gradient(to left, color-mix(in srgb, var(--color-inv) 25%, transparent) 0px, transparent 1px);
+  color: var(--btn-text);
+}
+
+[data-slot="button-face"][data-quiet][data-state="selected"]::after {
+  background: var(--color-line);
+}
+
+[data-slot="button-face"][data-quiet]:hover {
+  background-color: var(--btn-fill);
+  background-image:
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-flip) 50%, transparent) 0px, transparent 1px),
+    linear-gradient(to right, color-mix(in srgb, var(--color-flip) 50%, transparent) 0px, transparent 1px),
+    linear-gradient(to top, color-mix(in srgb, var(--color-inv) 25%, transparent) 0px, transparent 1px),
+    linear-gradient(to left, color-mix(in srgb, var(--color-inv) 25%, transparent) 0px, transparent 1px);
+  color: var(--btn-text);
 }
 
+[data-slot="button-face"][data-quiet]:hover::after {
+  background: var(--color-line);
+}
+
+[data-slot="button-face"][data-quiet]:active {
+  background-color: var(--btn-fill);
+  background-image:
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-inv) 25%, transparent) 0px, transparent 1px),
+    linear-gradient(to right, color-mix(in srgb, var(--color-inv) 25%, transparent) 0px, transparent 1px),
+    linear-gradient(to top, color-mix(in srgb, var(--color-flip) 50%, transparent) 0px, transparent 1px),
+    linear-gradient(to left, color-mix(in srgb, var(--color-flip) 50%, transparent) 0px, transparent 1px);
+  color: var(--btn-text);
+}
+
+[data-slot="button-face"][data-quiet]:active::after {
+  background: var(--color-line);
+}
+
+/* Flat+quiet — no bevel on hover (flat stays visually static) */
+[data-slot="button-face"][data-mode="flat"][data-quiet]:hover,
+[data-slot="button-face"][data-mode="flat"][data-quiet]:active {
+  background-image: none;
+}
+
+[data-slot="button-face"][data-mode="text"] {
+  background: transparent;
+  color: var(--color-main);
+  border: none;
+}
+
+[data-slot="button-face"][data-mode="text"]:hover {
+  background: var(--color-inv);
+  border: none;
+  color: var(--btn-tint);
+}
+
+[data-slot="button-face"][data-mode="text"]:active {
+  background: var(--color-inv);
+  border: none;
+  color: var(--color-ink);
+}
+
+[data-slot="button-face"][data-mode="text"][data-state="selected"] {
+  background: var(--color-inv);
+  border: none;
+  color: var(--color-ink);
+}
+
+
+/* ============================================================================
+   Button Selected State — Sun Mode
+   Mirrors :active — bevel inverted, mist overlay, no translate.
+   Driven by Button.active prop and (soon) Toggle.pressed.
+   ============================================================================ */
+
+[data-slot="button-face"][data-mode="solid"][data-state="selected"]::after {
+  background: var(--color-line);
+}
+
+[data-slot="button-face"][data-mode="solid"][data-state="selected"]::before {
+  background: var(--color-ink);
+  -webkit-mask-size: 8px 8px;
+  mask-size: 8px 8px;
+  image-rendering: pixelated;
+  -webkit-mask-image: var(--pat-mist);
+  mask-image: var(--pat-mist);
+}
+
+/* Pattern selected — overlay via ::before so text remains visible */
+[data-slot="button-face"][data-mode="pattern"][data-state="selected"] {
+  box-shadow: none;
+}
+
+[data-slot="button-face"][data-mode="pattern"][data-state="selected"]::before {
+  background-color: var(--color-line);
+  -webkit-mask-image: var(--pat-spray-grid);
+  mask-image: var(--pat-spray-grid);
+  -webkit-mask-size: 4px 4px;
+  mask-size: 4px 4px;
+  image-rendering: pixelated;
+}
+
+/* ============================================================================
+   Forced Preview States — canonical wrapper-driven inspection
+   Mirrors interactive button and field states without a separate preview sheet.
+   ============================================================================ */
+
+[data-force-state="hover"] [data-slot="button-root"]:not([data-mode="text"]):not([data-mode="pattern"]):not([data-mode="flat"]):not([disabled]):not([aria-disabled="true"]):not([data-disabled]):not([data-state="selected"]) {
+  transform: translateY(-1px);
+  filter: drop-shadow(0 1px 0 var(--color-ink));
+}
+
+[data-force-state="pressed"] [data-slot="button-root"]:not([data-mode="text"]):not([data-mode="pattern"]):not([data-mode="flat"]):not([disabled]):not([aria-disabled="true"]):not([data-disabled]):not([data-state="selected"]) {
+  transform: translateY(1px);
+  filter: drop-shadow(0 -1px 0 var(--color-ink));
+}
+
+[data-force-state="pressed"] [data-slot="button-face"][data-mode="solid"]:not([data-state="selected"])::before {
+  background: var(--color-main);
+  -webkit-mask-size: 8px 8px;
+  mask-size: 8px 8px;
+  image-rendering: pixelated;
+  -webkit-mask-image: var(--pat-diagonal-dots);
+  mask-image: var(--pat-diagonal-dots);
+}
+
+[data-force-state="hover"] [data-slot="button-face"][data-mode="pattern"]:not([data-state="selected"])::before {
+  background-color: var(--color-line);
+  -webkit-mask-image: var(--pat-mist);
+  mask-image: var(--pat-mist);
+  -webkit-mask-size: 4px 4px;
+  mask-size: 4px 4px;
+  image-rendering: pixelated;
+}
+
+[data-force-state="pressed"] [data-slot="button-face"][data-mode="pattern"]:not([data-state="selected"])::before {
+  background-color: var(--color-line);
+  -webkit-mask-image: var(--pat-spray-grid);
+  mask-image: var(--pat-spray-grid);
+  -webkit-mask-size: 4px 4px;
+  mask-size: 4px 4px;
+  image-rendering: pixelated;
+}
+
+[data-force-state="hover"] [data-slot="button-face"][data-quiet]:not([data-state="selected"]) {
+  background-color: var(--btn-fill);
+  background-image:
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-flip) 50%, transparent) 0px, transparent 1px),
+    linear-gradient(to right, color-mix(in srgb, var(--color-flip) 50%, transparent) 0px, transparent 1px),
+    linear-gradient(to top, color-mix(in srgb, var(--color-inv) 25%, transparent) 0px, transparent 1px),
+    linear-gradient(to left, color-mix(in srgb, var(--color-inv) 25%, transparent) 0px, transparent 1px);
+  color: var(--btn-text);
+}
+
+[data-force-state="hover"] [data-slot="button-face"][data-quiet]:not([data-state="selected"])::after {
+  background: var(--color-line);
+}
+
+[data-force-state="pressed"] [data-slot="button-face"][data-quiet]:not([data-state="selected"]) {
+  background-color: var(--btn-fill);
+  background-image:
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-inv) 25%, transparent) 0px, transparent 1px),
+    linear-gradient(to right, color-mix(in srgb, var(--color-inv) 25%, transparent) 0px, transparent 1px),
+    linear-gradient(to top, color-mix(in srgb, var(--color-flip) 50%, transparent) 0px, transparent 1px),
+    linear-gradient(to left, color-mix(in srgb, var(--color-flip) 50%, transparent) 0px, transparent 1px);
+  color: var(--btn-text);
+}
+
+[data-force-state="pressed"] [data-slot="button-face"][data-quiet]:not([data-state="selected"])::after {
+  background: var(--color-line);
+}
+
+[data-force-state="hover"] [data-slot="button-face"][data-mode="flat"]:not([data-state="selected"]) {
+  background-color: var(--color-inv);
+  background-image: none;
+  color: var(--color-flip);
+}
+
+[data-force-state="pressed"] [data-slot="button-face"][data-mode="flat"]:not([data-state="selected"]) {
+  background-color: var(--color-inv);
+  background-image: none;
+  color: var(--color-pure-white);
+}
+
+[data-force-state="hover"] [data-slot="button-face"][data-mode="flat"][data-quiet]:not([data-state="selected"]),
+[data-force-state="pressed"] [data-slot="button-face"][data-mode="flat"][data-quiet]:not([data-state="selected"]) {
+  background-image: none;
+}
+
+[data-force-state="hover"] [data-slot="button-face"][data-mode="text"]:not([data-state="selected"]) {
+  background: var(--color-inv);
+  border: none;
+  color: var(--btn-tint);
+}
+
+[data-force-state="pressed"] [data-slot="button-face"][data-mode="text"]:not([data-state="selected"]) {
+  background: var(--color-inv);
+  border: none;
+  color: var(--color-ink);
+}
+
+[data-force-state="focus"] [data-slot="button-root"] {
+  outline: none !important;
+  box-shadow: var(--shadow-focused);
+}
+
+[data-force-state="focus"] button,
+[data-force-state="focus"] input,
+[data-force-state="focus"] textarea,
+[data-force-state="focus"] select,
+[data-force-state="focus"] [role="button"],
+[data-force-state="focus"] [role="checkbox"],
+[data-force-state="focus"] [role="combobox"],
+[data-force-state="focus"] [role="switch"],
+[data-force-state="focus"] [role="slider"],
+[data-force-state="focus"] [tabindex="0"] {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 1px;
+}
+
+[data-force-state="disabled"] button,
+[data-force-state="disabled"] input,
+[data-force-state="disabled"] textarea,
+[data-force-state="disabled"] select,
+[data-force-state="disabled"] [role="button"],
+[data-force-state="disabled"] [role="checkbox"],
+[data-force-state="disabled"] [role="combobox"],
+[data-force-state="disabled"] [role="radio"],
+[data-force-state="disabled"] [role="switch"],
+[data-force-state="disabled"] [role="slider"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+[data-force-state="error"] input,
+[data-force-state="error"] textarea,
+[data-force-state="error"] [role="combobox"],
+[data-force-state="error"] select {
+  border-color: var(--color-danger);
+  box-shadow: 0 0 0 1px var(--color-danger);
+}
+
+[data-force-state="error"] [data-slot="field-root"] {
+  --field-error: 1;
+}
+
+[data-force-state="error"] label {
+  color: var(--color-danger);
+}
+
+/* Switch thumb bevel */
+.switch-thumb {
+  box-shadow:
+    inset 1px 1px 0 0 color-mix(in srgb, var(--color-flip) 30%, transparent),
+    inset -1px -1px 0 0 color-mix(in srgb, var(--color-inv) 12%, transparent);
+}
+
+.group:active .switch-thumb {
+  box-shadow:
+    inset -1px -1px 0 0 color-mix(in srgb, var(--color-flip) 30%, transparent),
+    inset 1px 1px 0 0 color-mix(in srgb, var(--color-inv) 12%, transparent);
+}
+
+/* Card bevel — lighter than Button (passive container, not interactive) */
+[data-slot="card"][data-variant="default"],
+[data-slot="card"][data-variant="raised"] {
+  box-shadow:
+    inset 1px 1px 0 0 color-mix(in srgb, var(--color-flip) 20%, transparent),
+    inset -1px -1px 0 0 color-mix(in srgb, var(--color-inv) 8%, transparent);
+}
+
+[data-slot="card"][data-variant="inverted"] {
+  box-shadow:
+    inset 1px 1px 0 0 color-mix(in srgb, var(--color-flip) 6%, transparent),
+    inset -1px -1px 0 0 color-mix(in srgb, var(--color-inv) 25%, transparent);
+}
+
+/* ============================================================================
+   Card — Sun Mode
+   Colors and bevels owned by the theme, not CVA.
+   ============================================================================ */
+
+[data-slot="card"][data-variant="default"],
+[data-slot="card"][data-variant="raised"] {
+  background-color: var(--color-card);
+  background-image:
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-flip) 25%, transparent) 0px, transparent 1px),
+    linear-gradient(to right, color-mix(in srgb, var(--color-flip) 25%, transparent) 0px, transparent 1px),
+    linear-gradient(to top, color-mix(in srgb, var(--color-inv) 12%, transparent) 0px, transparent 1px),
+    linear-gradient(to left, color-mix(in srgb, var(--color-inv) 12%, transparent) 0px, transparent 1px);
+  color: var(--color-main);
+}
+
+[data-slot="card"][data-variant="inverted"] {
+  background-color: var(--color-inv);
+  background-image:
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-flip) 6%, transparent) 0px, transparent 1px),
+    linear-gradient(to right, color-mix(in srgb, var(--color-flip) 6%, transparent) 0px, transparent 1px),
+    linear-gradient(to top, color-mix(in srgb, var(--color-inv) 30%, transparent) 0px, transparent 1px),
+    linear-gradient(to left, color-mix(in srgb, var(--color-inv) 30%, transparent) 0px, transparent 1px);
+  color: var(--color-flip);
+}
+
+/* Inverted card: light border for contrast against dark surface */
+[data-slot="card"][data-variant="inverted"]::after {
+  background: color-mix(in srgb, var(--color-flip) 10%, transparent);
+}
+
+[data-slot="select-trigger"][data-variant="select"] {
+  background: var(--color-page);
+  color: var(--color-main);
+}
+
+[data-slot="select-trigger"][data-variant="select"][data-invalid="true"]::after {
+  background: var(--color-danger);
+}
+
+[data-slot="select-trigger"][data-variant="select"][data-open="true"] {
+  background: var(--color-accent);
+}
+
+[data-slot="switch-track"][data-variant="switch"] {
+  background: var(--color-inv);
+}
+
+[data-slot="switch-track"][data-variant="switch"][data-checked] {
+  background: var(--color-accent);
+}
+
+[data-slot="switch-thumb"] {
+  background: var(--color-page);
+}
+
+[data-slot="accordion-item"][data-variant="accordion"] {
+  background: var(--color-page);
+}
+
+
 /* For elements that need a dark-themed scrollbar */
 .custom-scrollbar-dark::-webkit-scrollbar-track {
-  background: var(--color-black);
+  background: var(--color-ink);
 }
 
 .custom-scrollbar-dark::-webkit-scrollbar-thumb {
-  background: var(--color-warm-cloud);
+  background: var(--color-cream);
   box-shadow: inset 0 0 0 1px var(--color-sun-yellow);
 }
 
 .custom-scrollbar-dark::-webkit-scrollbar-thumb:hover {
   background: var(--color-sun-yellow);
 }
+
+/* ============================================================================
+   Theme Force — Override semantic tokens on any element
+   Usage: <div data-theme="dark"> or <div data-theme="light">
+   Forces dark/light tokens regardless of global theme.
+   Pair with bg-page for the correct background.
+   ============================================================================ */
+
+[data-theme="dark"] {
+  --color-page: var(--color-ink);
+  --color-inv: var(--color-ink);
+  --color-tinted: oklch(0.3129 0.0389 73.57);
+  --color-card: var(--color-pure-black);
+  --color-depth: oklch(0.22 0.0100 84.59);
+  --color-hover: oklch(0.9126 0.1170 93.68 / 0.08);
+  --color-active: oklch(0.9126 0.1170 93.68 / 0.12);
+
+  --color-main: var(--color-cream);
+  --color-head: var(--color-pure-white);
+  --color-sub: oklch(0.9780 0.0295 94.34 / 0.85);
+  --color-flip: var(--color-cream);
+  --color-mute: oklch(0.9780 0.0295 94.34 / 0.6);
+  --color-link: var(--color-sky-blue);
+
+  --color-line: oklch(0.9780 0.0295 94.34 / 0.2);
+  --color-rule: oklch(0.9780 0.0295 94.34 / 0.12);
+  --color-line-hover: oklch(0.9780 0.0295 94.34 / 0.35);
+  --color-focus: var(--color-sun-yellow);
+
+  --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);
+}
+
+[data-theme="light"] {
+  --color-page: var(--color-cream);
+  --color-inv: var(--color-ink);
+  --color-tinted: var(--color-sunset-fuzz);
+  --color-card: var(--color-pure-white);
+  --color-depth: var(--color-cream);
+  --color-hover: var(--color-sun-yellow);
+  --color-active: var(--color-sun-yellow);
+
+  --color-main: var(--color-ink);
+  --color-head: var(--color-ink);
+  --color-sub: oklch(0.1641 0.0044 84.59 / 0.85);
+  --color-flip: var(--color-cream);
+  --color-mute: oklch(0.1641 0.0044 84.59 / 0.6);
+  --color-link: var(--color-sky-blue);
+
+  --color-line: var(--color-ink);
+  --color-rule: oklch(0.1641 0.0044 84.59 / 0.2);
+  --color-line-hover: oklch(0.1641 0.0044 84.59 / 0.3);
+  --color-focus: var(--color-sun-yellow);
+
+  --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);
+}
+
+/* =============================================================================
+   Focus Ring — Global Override
+   Soft yellow glow replaces the thick ring on all interactive elements.
+   Placed outside any @layer so it wins over Tailwind's @layer utilities ring classes.
+   ============================================================================= */
+
+:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focused);
+}