@ponti-studios/ui 0.1.2 → 0.4.0

package/src/styles.css

@@ -1,1052 +1,178 @@
 @import "tailwindcss";
+@import "./tokens/generated/foundations.css";
+@import "./tokens/generated/light.css";
+@import "./tokens/generated/dark.css" (prefers-color-scheme: dark);
 @import "./animations.css";
 
-/* Shared page and content rhythm primitives. These are CSS-only layout
- * patterns so feature pages can compose them without adding component APIs. */
+/* shadcn New York semantic contract. Values are generated from the DTCG
+ * source; this file only names the roles consumed by web components. */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--text-primary);
+  --color-card: var(--card);
+  --color-card-foreground: var(--text-primary);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--text-primary);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--card);
+  --color-secondary-foreground: var(--text-primary);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--text-secondary);
+  --color-accent: var(--primary);
+  --color-accent-foreground: var(--primary-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-border: var(--border-default);
+  --color-input: var(--border-default);
+  --color-ring: var(--focus-ring);
+}
+
+@utility display-1 {
+  font-size: clamp(2.5rem, 5vw, 6rem);
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.1;
+  letter-spacing: var(--tracking-tight);
+}
+@utility display-2 {
+  font-size: clamp(2rem, 3vw, 3.5rem);
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.15;
+  letter-spacing: var(--tracking-tight);
+}
+@utility ref-tag {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--tertiary);
+  letter-spacing: var(--tracking-wide);
+}
+/* Quiet state-change "settle" — used on state-bearing indicators
+ * (Badge, StatusBadge, FilterChip) when their represented value changes. */
+@utility state-settle {
+  transition:
+    transform 120ms ease-out,
+    opacity 120ms ease-out;
+}
+@utility pb-safe-area-inset-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+@utility mb-safe-area-inset-bottom {
+  margin-bottom: env(safe-area-inset-bottom);
+}
+@utility min-h-screen {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+@utility min-h-screen-dynamic {
+  min-height: 100dvh;
+}
+@utility h-screen {
+  height: 100vh;
+  height: 100dvh;
+}
+
+/* Shared layout rhythm. Product components own their layout; this does not
+ * define visual component families. */
 .page-shell {
   @apply relative mx-auto flex w-full flex-col gap-12 px-4 py-16 md:gap-16 md:px-6 md:py-20;
 }
-
 .page-shell-detail {
   @apply relative mx-auto flex w-full flex-col gap-10 px-4 py-16 md:gap-12 md:px-6 md:py-20;
 }
-
 .page-bleed {
   @apply flex w-full flex-col;
 }
-
 .layout-stack {
   @apply flex flex-col gap-4;
 }
-
 .list-row {
   @apply flex gap-4 px-0 py-6 md:gap-6 md:py-8;
 }
-
 .list-media {
-  @apply border-subtle bg-panel relative isolate flex shrink-0 items-center justify-center overflow-hidden rounded-md border p-2 shadow-none;
+  @apply border-border bg-card relative isolate flex shrink-0 items-center justify-center overflow-hidden rounded-md border p-2 shadow-none;
 }
-
 .list-media-wide {
   @apply h-14 w-32;
 }
-
 .list-media-square {
   @apply size-10 sm:size-12;
 }
-
 .list-media-placeholder {
   @apply pointer-events-none absolute inset-0 flex items-center justify-center gap-1.5 transition-opacity duration-150;
 }
-
 .section {
-  @apply border-subtle flex flex-col gap-4 border-b px-4 py-12 md:px-6 md:py-16;
+  @apply border-border flex flex-col gap-4 border-b px-4 py-12 md:px-6 md:py-16;
 }
-
 .section-hero {
   @apply gap-6 py-16 md:py-20;
 }
-
 .detail-hero {
   @apply gap-4 py-10 md:gap-6 md:py-16;
 }
-
 .section-compact {
   @apply gap-4 py-8 md:py-12;
 }
-
 .detail-navigation {
   @apply flex flex-col gap-6 sm:flex-row sm:justify-between;
 }
-
 .detail-navigation-link {
-  @apply flex min-h-11 flex-col justify-center gap-1;
-}
-
-.navigation-shell {
-  @apply bg-canvas/80 border-subtle sticky top-0 z-50 flex w-full justify-center border-b px-4 backdrop-blur-sm backdrop-saturate-150;
+  @apply flex min-h-9 flex-col justify-center gap-1;
 }
 
-.navigation {
-  @apply w-full max-w-7xl;
-}
-
-.navigation-inner {
-  @apply flex min-h-14 items-center justify-between gap-6;
-}
-
-.navigation-start,
-.navigation-end,
-.navigation-mobile {
-  @apply flex items-center;
-}
-
-.navigation-start {
-  @apply min-w-0;
-}
-
-.navigation-end {
-  @apply ml-auto hidden min-w-0 gap-1 sm:flex;
-}
-
-.navigation-mobile {
-  @apply sm:hidden;
-}
-
-.navigation-panel-links {
-  @apply mt-8 flex flex-1 flex-col gap-1;
-}
-
-.navigation-panel-end {
-  @apply border-default flex flex-col gap-4 border-t pt-4;
-}
-
-.navigation-panel-content {
-  @apply flex items-center gap-3;
-}
-
-.navigation-link {
-  @apply inline-flex min-h-11 shrink-0 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1.5 text-sm leading-5 font-medium whitespace-nowrap transition-colors duration-150;
-}
-
-.navigation-link:hover {
-  @apply bg-surface-hover text-primary;
-}
-
-.navigation-link:active {
-  @apply bg-surface-pressed;
-}
-
-.navigation-link[aria-current="page"] {
-  @apply bg-panel text-primary;
-}
-
-.navigation-link[aria-current="page"]:hover {
-  @apply bg-surface-hover;
-}
-
-.navigation-brand {
-  @apply border-transparent bg-transparent px-2;
-}
-
-.navigation-cta {
-  @apply inline-flex min-h-11 shrink-0 items-center justify-center gap-1.5 rounded-md border px-3 py-1.5 text-sm leading-5 font-medium whitespace-nowrap transition-colors duration-150;
-}
-
-.navigation-end > .navigation-cta {
-  @apply ml-2;
-}
-
-.navigation-panel-links .navigation-link,
-.navigation-panel-links .navigation-cta,
-.navigation-panel-end .navigation-cta {
-  @apply w-full justify-start;
-}
-
-.navigation-cta[data-variant="outline"] {
-  @apply border-default text-primary bg-transparent;
-}
-
-.navigation-cta[data-variant="outline"]:hover {
-  @apply bg-surface-hover;
-}
-
-.navigation-cta[data-variant="outline"]:active {
-  @apply bg-surface-pressed;
-}
-
-.navigation-cta:not([data-variant="outline"]) {
-  @apply bg-accent text-on-accent border-transparent;
-}
-
-.navigation-cta:not([data-variant="outline"]):hover {
-  @apply bg-accent-hover;
-}
-
-.navigation-cta:not([data-variant="outline"]):active {
-  @apply bg-accent-pressed;
-}
-
-/* Overlay material: an intentional surface, not a raw token name in markup. */
-.overlay-backdrop {
-  background: var(--color-overlay-scrim);
-  backdrop-filter: blur(8px) saturate(85%);
-}
-
-.sheet-edge-left::before,
-.sheet-edge-right::before {
-  top: 0;
-  bottom: 0;
-  width: 9rem;
-  background: radial-gradient(
-    ellipse at center,
-    color-mix(in srgb, var(--color-accent) 14%, transparent),
-    transparent 70%
-  );
-}
-
-.sheet-edge-left::before {
-  left: -5rem;
-}
-
-.sheet-edge-right::before {
-  right: -5rem;
-}
-
-.sheet-edge-top::before,
-.sheet-edge-bottom::before {
-  right: 0;
-  left: 0;
-  height: 9rem;
-  background: radial-gradient(
-    ellipse at center,
-    color-mix(in srgb, var(--color-accent) 14%, transparent),
-    transparent 70%
-  );
-}
-
-.sheet-edge-top::before {
-  top: -5rem;
-}
-
-.sheet-edge-bottom::before {
-  bottom: -5rem;
-}
-
-.sheet-edge-top::after,
-.sheet-edge-bottom::after {
-  right: 8%;
-  left: 8%;
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(in srgb, var(--color-text-primary) 24%, transparent) 32%,
-    color-mix(in srgb, var(--color-accent) 40%, transparent) 50%,
-    color-mix(in srgb, var(--color-text-primary) 24%, transparent) 68%,
-    transparent
-  );
-}
-
-.sheet-edge-top::after {
-  top: 0;
-}
-
-.sheet-edge-bottom::after {
-  bottom: 0;
-}
-
-.sheet-edge-left::after,
-.sheet-edge-right::after {
-  top: 8%;
-  bottom: 8%;
-  width: 1px;
-  background: linear-gradient(
-    180deg,
-    transparent,
-    color-mix(in srgb, var(--color-text-primary) 24%, transparent) 32%,
-    color-mix(in srgb, var(--color-accent) 40%, transparent) 50%,
-    color-mix(in srgb, var(--color-text-primary) 24%, transparent) 68%,
-    transparent
-  );
-}
-
-.sheet-edge-left::after {
-  left: 0;
-}
-
-.sheet-edge-right::after {
-  right: 0;
-}
-
-.sheet-edge-responsive::before {
-  top: -5rem;
-  right: 0;
-  left: 0;
-  height: 9rem;
-  background: radial-gradient(
-    ellipse at center,
-    color-mix(in srgb, var(--color-accent) 14%, transparent),
-    transparent 70%
-  );
-}
-
-.sheet-edge-responsive::after {
-  top: 0;
-  right: 8%;
-  left: 8%;
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    color-mix(in srgb, var(--color-text-primary) 24%, transparent) 32%,
-    color-mix(in srgb, var(--color-accent) 40%, transparent) 50%,
-    color-mix(in srgb, var(--color-text-primary) 24%, transparent) 68%,
-    transparent
-  );
-}
-
-@media (min-width: 768px) {
-  .sheet-edge-responsive::before {
-    top: 0;
-    right: -5rem;
-    bottom: 0;
-    left: auto;
-    width: 9rem;
-    height: auto;
-  }
-
-  .sheet-edge-responsive::after {
-    top: 8%;
-    right: 0;
-    bottom: 8%;
-    left: auto;
-    width: 1px;
-    height: auto;
-    background: linear-gradient(
-      180deg,
-      transparent,
-      color-mix(in srgb, var(--color-text-primary) 24%, transparent) 32%,
-      color-mix(in srgb, var(--color-accent) 40%, transparent) 50%,
-      color-mix(in srgb, var(--color-text-primary) 24%, transparent) 68%,
-      transparent
-    );
+@layer base {
+  :root {
+    color-scheme: light;
   }
-}
-
-.sheet-glass-control {
-  background: color-mix(in srgb, var(--color-surface-raised) 62%, transparent);
-  backdrop-filter: blur(12px);
-}
-
-@theme {
-  --font-family-primary: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-  --font-family-mono: ui-monospace, monospace;
-
-  /* Public utility names for the canonical surface roles. */
-  --color-canvas: var(--color-surface-canvas);
-  --color-panel: var(--color-surface-panel);
-  --color-raised: var(--color-surface-raised);
-  --color-inset: var(--color-surface-inset);
-  --color-focus: var(--color-ring-focus);
-
-  --font-size-large-title: 34px;
-  --font-size-title-1: 28px;
-  --font-size-title-2: 22px;
-  --font-size-title-3: 20px;
-  --font-size-headline: 17px;
-  --font-size-body: 17px;
-  --font-size-callout: 16px;
-  --font-size-subhead: 15px;
-  --font-size-footnote: 13px;
-  --font-size-caption-1: 12px;
-  --font-size-caption-2: 11px;
-
-  --font-size-xs: 12px;
-  --font-size-sm: 14px;
-  --font-size-md: 16px;
-  --font-size-lg: 18px;
-  --font-size-xl: 20px;
-  --font-size-display: 34px;
-
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  --line-height-tight: 1.2;
-  --line-height-normal: 1.4;
-  --line-height-relaxed: 1.6;
-
-  --letter-spacing-tight: -0.025em;
-  --letter-spacing-normal: 0;
-  --letter-spacing-relaxed: 0.01em;
-
-  /* Canonical Ponti light fallback values used for utility generation. */
-  --color-surface-canvas: #ffffff;
-  --color-surface-panel: #f6f8fa;
-  --color-surface-raised: #ffffff;
-  --color-surface-inset: color-mix(
-    in srgb,
-    var(--color-surface-canvas) 94%,
-    var(--color-text-primary) 6%
-  );
-  --color-overlay-scrim: rgba(31, 35, 40, 0.18);
-
-  --color-text-primary: #25292e;
-  --color-text-secondary: #59636e;
-  --color-text-tertiary: #818b98;
-  --color-text-disabled: #9ea7b3;
-  --color-text-accent: var(--color-accent);
-  --color-text-destructive: var(--color-destructive);
-  --color-text-success: var(--color-success);
-  --color-text-warning: var(--color-warning);
-  --color-text-on-success: #ffffff;
-  --color-text-on-warning: #1c1c1e;
-
-  --color-border-default: #d1d9e0;
-  --color-border-subtle: rgba(129, 139, 152, 0.2);
-  --color-border-strong: #8c959f;
-  --color-border-focus: #0969da;
-  --color-border-accent: var(--color-accent);
-  --color-border-destructive: var(--color-destructive);
-
-  --color-success: #1f883d;
-  --color-warning: #9a6700;
-  --color-destructive: #cf222e;
-  --color-destructive-hover: color-mix(in srgb, var(--color-destructive) 88%, white 12%);
-  --color-destructive-pressed: color-mix(in srgb, var(--color-destructive) 78%, black 22%);
-  --color-destructive-subtle: color-mix(in srgb, var(--color-destructive) 14%, transparent);
-
-  --color-accent: #0969da;
-  --color-text-on-accent: #ffffff;
-  --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, white 12%);
-  --color-accent-pressed: color-mix(in srgb, var(--color-accent) 78%, black 22%);
-  --color-accent-subtle: color-mix(in srgb, var(--color-accent) 14%, transparent);
-
-  --color-text-on-destructive: #ffffff;
-  --color-ring-focus: #0969da;
-
-  --color-chart-1: #0969da;
-  --color-chart-2: #1a7f37;
-  --color-chart-3: #8250df;
-  --color-chart-4: #bc4c00;
-  --color-chart-5: #59636e;
-  --color-chart-positive: #1a7f37;
-  --color-chart-negative: #cf222e;
-  --color-chart-neutral: #59636e;
-
-  --color-surface-hover: color-mix(
-    in srgb,
-    var(--color-surface-panel) 88%,
-    var(--color-text-primary) 12%
-  );
-  --color-surface-pressed: color-mix(
-    in srgb,
-    var(--color-surface-panel) 78%,
-    var(--color-text-primary) 22%
-  );
-  --color-surface-selected: var(--color-accent-subtle);
-  --color-surface-disabled: var(--color-surface-inset);
-
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 24px;
-  --spacing-6: 32px;
-  --spacing-7: 48px;
-  --spacing-8: 64px;
-
-  --content-width-bubble: 36rem;
-  --content-width-transcript: 44rem;
-  --content-width-note-preview: 32ch;
-
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-icon: 22%;
-  --radius: 4px;
-
-  --shadow-low: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12);
-  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.12);
-  --shadow-high: 0 16px 48px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.18);
-
-  --duration-fast: 120ms;
-  --duration-default: 200ms;
-  --duration-slow: 320ms;
-  --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-}
-
-:root {
-  color-scheme: light dark;
-  --color-surface-canvas: #ffffff;
-  --color-surface-panel: #f6f8fa;
-  --color-surface-raised: #ffffff;
-  --color-overlay-scrim: rgba(31, 35, 40, 0.42);
-  --color-text-primary: #25292e;
-  --color-text-secondary: #59636e;
-  --color-text-tertiary: #818b98;
-  --color-text-disabled: #9ea7b3;
-  --color-border-default: #d1d9e0;
-  --color-border-subtle: rgba(129, 139, 152, 0.2);
-  --color-border-strong: #8c959f;
-  --color-border-focus: #0969da;
-  --color-border-accent: #0969da;
-  --color-border-destructive: #cf222e;
-  --color-text-accent: #0969da;
-  --color-text-destructive: #cf222e;
-  --color-text-success: #1f883d;
-  --color-text-warning: #9a6700;
-  --color-text-on-accent: #ffffff;
-  --color-text-on-destructive: #ffffff;
-  --color-text-on-success: #ffffff;
-  --color-text-on-warning: #1c1c1e;
-  --color-success: #1f883d;
-  --color-success-subtle: rgba(31, 136, 61, 0.12);
-  --color-warning: #9a6700;
-  --color-warning-subtle: rgba(154, 103, 0, 0.12);
-  --color-destructive: #cf222e;
-  --color-destructive-hover: #a40e26;
-  --color-destructive-pressed: #82071e;
-  --color-destructive-subtle: rgba(207, 34, 46, 0.12);
-  --color-accent: #0969da;
-  --color-accent-hover: #0550ae;
-  --color-accent-pressed: #033d8b;
-  --color-accent-subtle: rgba(9, 105, 218, 0.1);
-  --color-ring-focus: #0969da;
-  --color-chart-1: #0969da;
-  --color-chart-2: #1a7f37;
-  --color-chart-3: #8250df;
-  --color-chart-4: #bc4c00;
-  --color-chart-5: #59636e;
-  --color-chart-positive: #1a7f37;
-  --color-chart-negative: #cf222e;
-  --color-chart-neutral: #59636e;
-}
-
-:root[data-color-mode="dark"] {
-  color-scheme: dark;
-  --color-surface-canvas: #0d1117;
-  --color-surface-panel: #161b22;
-  --color-surface-raised: #21262d;
-  --color-overlay-scrim: rgba(1, 4, 9, 0.78);
-  --color-text-primary: #f0f6fc;
-  --color-text-secondary: #8b949e;
-  --color-text-tertiary: #6e7681;
-  --color-text-disabled: #484f58;
-  --color-border-default: #30363d;
-  --color-border-subtle: rgba(240, 246, 252, 0.14);
-  --color-border-strong: #6e7681;
-  --color-border-focus: #2f81f7;
-  --color-border-accent: #2f81f7;
-  --color-border-destructive: #da3633;
-  --color-text-accent: #58a6ff;
-  --color-text-destructive: #ff7b72;
-  --color-text-success: #3fb950;
-  --color-text-warning: #d29922;
-  --color-text-on-warning: #0d1117;
-  --color-success: #238636;
-  --color-success-subtle: rgba(35, 134, 54, 0.18);
-  --color-warning: #9e6a03;
-  --color-warning-subtle: rgba(158, 106, 3, 0.18);
-  --color-destructive: #da3633;
-  --color-destructive-hover: #f85149;
-  --color-destructive-pressed: #b62324;
-  --color-destructive-subtle: rgba(218, 54, 51, 0.18);
-  --color-accent: #2f81f7;
-  --color-accent-hover: #58a6ff;
-  --color-accent-pressed: #1f6feb;
-  --color-accent-subtle: rgba(47, 129, 247, 0.18);
-  --color-ring-focus: #2f81f7;
-  --color-chart-1: #2f81f7;
-  --color-chart-2: #3fb950;
-  --color-chart-3: #a371f7;
-  --color-chart-4: #d29922;
-  --color-chart-5: #8b949e;
-  --color-chart-positive: #3fb950;
-  --color-chart-negative: #f85149;
-  --color-chart-neutral: #8b949e;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-color-mode]) {
-    color-scheme: dark;
-    --color-surface-canvas: #0d1117;
-    --color-surface-panel: #161b22;
-    --color-surface-raised: #21262d;
-    --color-overlay-scrim: rgba(1, 4, 9, 0.78);
-    --color-text-primary: #f0f6fc;
-    --color-text-secondary: #8b949e;
-    --color-text-tertiary: #6e7681;
-    --color-text-disabled: #484f58;
-    --color-border-default: #30363d;
-    --color-border-subtle: rgba(240, 246, 252, 0.14);
-    --color-border-strong: #6e7681;
-    --color-border-focus: #2f81f7;
-    --color-border-accent: #2f81f7;
-    --color-border-destructive: #da3633;
-    --color-text-accent: #58a6ff;
-    --color-text-destructive: #ff7b72;
-    --color-text-success: #3fb950;
-    --color-text-warning: #d29922;
-    --color-text-on-warning: #0d1117;
-    --color-success: #238636;
-    --color-success-subtle: rgba(35, 134, 54, 0.18);
-    --color-warning: #9e6a03;
-    --color-warning-subtle: rgba(158, 106, 3, 0.18);
-    --color-destructive: #da3633;
-    --color-destructive-hover: #f85149;
-    --color-destructive-pressed: #b62324;
-    --color-destructive-subtle: rgba(218, 54, 51, 0.18);
-    --color-accent: #2f81f7;
-    --color-accent-hover: #58a6ff;
-    --color-accent-pressed: #1f6feb;
-    --color-accent-subtle: rgba(47, 129, 247, 0.18);
-    --color-ring-focus: #2f81f7;
-    --color-chart-1: #2f81f7;
-    --color-chart-2: #3fb950;
-    --color-chart-3: #a371f7;
-    --color-chart-4: #d29922;
-    --color-chart-5: #8b949e;
-    --color-chart-positive: #3fb950;
-    --color-chart-negative: #f85149;
-    --color-chart-neutral: #8b949e;
+  @media (prefers-color-scheme: dark) {
+    :root {
+      color-scheme: dark;
+    }
   }
-}
-@utility pb-safe-area-inset-bottom {
-  padding-bottom: env(safe-area-inset-bottom);
-}
-
-@utility mb-safe-area-inset-bottom {
-  margin-bottom: env(safe-area-inset-bottom);
-}
-
-@utility min-h-screen {
-  min-height: 100vh;
-  min-height: 100dvh;
-}
-
-@utility min-h-screen-dynamic {
-  min-height: 100dvh;
-}
-
-@utility h-screen {
-  height: 100vh;
-  height: 100dvh;
-}
-
-@layer base {
   html,
   body {
-    font-family: var(--font-family-primary);
-    color-scheme: light dark;
-    background-color: var(--color-surface-canvas);
-    color: var(--color-text-primary);
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-
+  * {
+    border-color: var(--color-border, currentColor);
+  }
   *:focus {
     outline: none;
   }
-
   *:focus-visible {
-    outline: 2px solid var(--color-ring-focus);
+    outline: 2px solid var(--color-ring);
     outline-offset: 2px;
     border-radius: inherit;
   }
-
-  * {
-    transition: none;
-  }
-
-  *:is(button, a, input, select, textarea, [role="button"], [role="link"]) {
-    transition-property: background-color, color, border-color, opacity;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-default);
-  }
-
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-border-default, currentColor);
-  }
-
   button {
     cursor: pointer;
     font-family: inherit;
   }
-
-  [data-radix-portal] {
-    z-index: 9999;
-  }
-
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
-    font-family: var(--font-family-primary);
-    font-weight: var(--font-weight-semibold);
-    letter-spacing: var(--letter-spacing-tight);
+    font-family: var(--font-sans);
+    font-weight: 600;
+    letter-spacing: var(--tracking-tight);
   }
-
   @media (prefers-reduced-motion: reduce) {
-    * {
+    *,
+    ::before,
+    ::after {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
     }
   }
 }
-
-@utility bg-canvas {
-  background-color: var(--color-surface-canvas);
-}
-
-@utility bg-panel {
-  background-color: var(--color-surface-panel);
-}
-
-@utility bg-raised {
-  background-color: var(--color-surface-raised);
-}
-
-@utility bg-inset {
-  background-color: var(--color-surface-inset);
-}
-
-@utility bg-overlay-scrim {
-  background-color: var(--color-overlay-scrim);
-}
-
-@utility text-primary {
-  color: var(--color-text-primary);
-}
-
-@utility text-secondary {
-  color: var(--color-text-secondary);
-}
-
-@utility text-tertiary {
-  color: var(--color-text-tertiary);
-}
-
-@utility text-disabled {
-  color: var(--color-text-disabled);
-}
-
-@utility text-on-accent {
-  color: var(--color-text-on-accent);
-}
-
-@utility text-on-destructive {
-  color: var(--color-text-on-destructive);
-}
-
-@utility ring-focus {
-  --tw-ring-color: var(--color-ring-focus);
-}
-
-@utility border-default {
-  border-color: var(--color-border-default);
-}
-
-@utility border-subtle {
-  border-color: var(--color-border-subtle);
-}
-
-@utility border-focus {
-  border-color: var(--color-border-focus);
-}
-
-@utility display-1 {
-  font-size: clamp(2.5rem, 5vw, 6rem);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-bold);
-  line-height: 1.1;
-  letter-spacing: var(--letter-spacing-tight);
-}
-
-@utility display-2 {
-  font-size: clamp(2rem, 3vw, 3.5rem);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-bold);
-  line-height: 1.15;
-  letter-spacing: var(--letter-spacing-tight);
-}
-
-@utility heading-1 {
-  font-size: clamp(2rem, 3vw, 2.75rem);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-semibold);
-  line-height: 1.2;
-  letter-spacing: var(--letter-spacing-tight);
-}
-
-@utility heading-2 {
-  font-size: clamp(1.375rem, 2vw, 1.75rem);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-semibold);
-  line-height: 1.25;
-  letter-spacing: -0.02em;
-}
-
-@utility heading-3 {
-  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-semibold);
-  line-height: 1.3;
-  letter-spacing: -0.015em;
-}
-
-@utility heading-4 {
-  font-size: clamp(1rem, 1.25vw, 1.125rem);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-semibold);
-  line-height: 1.4;
-  letter-spacing: -0.01em;
-}
-
-@utility largeTitle {
-  font-size: var(--font-size-large-title);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-bold);
-  line-height: 1.1;
-  letter-spacing: var(--letter-spacing-tight);
-}
-
-@utility title1 {
-  font-size: var(--font-size-title-1);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-bold);
-  line-height: 1.2;
-  letter-spacing: var(--letter-spacing-tight);
-}
-
-@utility headline {
-  font-size: var(--font-size-headline);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-semibold);
-  line-height: 1.3;
-  letter-spacing: -0.01em;
-}
-
-@utility body {
-  font-size: var(--font-size-body);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
-  line-height: 1.4;
-  letter-spacing: var(--letter-spacing-normal);
-}
-
-@utility callout {
-  font-size: var(--font-size-callout);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
-  line-height: 1.38;
-  letter-spacing: var(--letter-spacing-normal);
-}
-
-@utility subhead {
-  font-size: var(--font-size-subhead);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
-  line-height: 1.33;
-  letter-spacing: var(--letter-spacing-normal);
-}
-
-@utility footnote {
-  font-size: var(--font-size-footnote);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
-  line-height: 1.38;
-  letter-spacing: var(--letter-spacing-normal);
-}
-
-@utility caption1 {
-  font-size: var(--font-size-caption-1);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
-  line-height: 1.33;
-  letter-spacing: var(--letter-spacing-normal);
-}
-
-@utility caption2 {
-  font-size: var(--font-size-caption-2);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-  line-height: 1.27;
-  letter-spacing: var(--letter-spacing-normal);
-}
-
-@utility mono {
-  font-size: var(--font-size-caption-1);
-  font-family: var(--font-family-mono);
-  font-weight: var(--font-weight-regular);
-  line-height: 1.33;
-  letter-spacing: var(--letter-spacing-normal);
-}
-
-@utility body-1 {
-  font-size: clamp(1rem, 1.25vw, 1.0625rem);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
-  line-height: 1.6;
-  letter-spacing: var(--letter-spacing-normal);
-}
-
-@utility body-2 {
-  font-size: clamp(0.875rem, 1vw, 1rem);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
-  line-height: 1.5;
-  letter-spacing: var(--letter-spacing-normal);
-}
-
-@utility body-3 {
-  font-size: 0.9375rem;
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
-  line-height: 1.47;
-  letter-spacing: -0.015em;
-}
-
-@utility body-4 {
-  font-size: 0.8125rem;
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-regular);
-  line-height: 1.38;
-  letter-spacing: -0.005em;
-}
-
-@utility subheading-1 {
-  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-  line-height: 1.35;
-  letter-spacing: -0.02em;
-}
-
-@utility subheading-2 {
-  font-size: clamp(1rem, 1.25vw, 1.25rem);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-  line-height: 1.4;
-  letter-spacing: -0.015em;
-}
-
-@utility subheading-3 {
-  font-size: 1rem;
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-  line-height: 1.33;
-  letter-spacing: -0.01em;
-}
-
-@utility subheading-4 {
-  font-size: 0.9375rem;
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-medium);
-  line-height: 1.33;
-  letter-spacing: -0.008em;
-}
-
-@utility hover-surface {
-  transition-property: background-color, color, border-color, opacity;
-  transition-duration: var(--duration-fast);
-  transition-timing-function: var(--ease-default);
-
-  @media (hover: hover) {
-    &:not(:disabled):not([data-disabled]):hover {
-      background-color: var(--color-surface-hover);
-      border-color: var(--color-border-default);
-      color: var(--color-text-primary);
-    }
-  }
-}
-
-@utility list-row {
-  display: flex;
-  align-items: stretch;
-
-  & > * {
-    display: flex;
-    align-items: center;
-  }
-}
-
-@utility content-width-bubble {
-  max-inline-size: var(--content-width-bubble);
-}
-
-@utility content-width-transcript {
-  max-inline-size: var(--content-width-transcript);
-}
-
-@utility content-width-note-preview {
-  max-inline-size: var(--content-width-note-preview);
-}
-
-@utility ui-eyebrow {
-  font-size: var(--font-size-caption-1);
-  font-weight: var(--font-weight-medium);
-  text-transform: uppercase;
-  letter-spacing: 0.16em;
-  color: var(--color-text-secondary);
-}
-
-@utility ui-plain-card {
-  border: 1px solid var(--color-border-default);
-  padding: 1.75rem;
-}
-
-@utility ui-flat-card {
-  border: 1px solid var(--color-border-default);
-  background-color: var(--color-surface-panel);
-  border-radius: var(--radius-md);
-  padding: 1rem;
-}
-
-@utility ui-data-value {
-  font-size: 1.5rem;
-  font-weight: var(--font-weight-regular);
-  font-variant-numeric: tabular-nums;
-  color: var(--color-text-primary);
-}
-
-@utility ui-data-label {
-  font-size: var(--font-size-caption-1);
-  font-weight: var(--font-weight-medium);
-  text-transform: uppercase;
-  letter-spacing: 0.16em;
-  color: var(--color-text-secondary);
-}
-
-@utility ui-dash-list-item {
-  display: flex;
-  gap: 0.5rem;
-  font-size: var(--font-size-sm);
-  line-height: 1.5rem;
-  color: var(--color-text-primary);
-}
-
-@utility ui-dash-marker {
-  margin-top: 0.125rem;
-  flex-shrink: 0;
-  color: var(--color-text-secondary);
-}
-
-@utility scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-@layer utilities {
-  .container {
-    width: 100%;
-    padding-inline: 1rem;
-    margin-inline: auto;
-  }
-
-  @media (min-width: 640px) {
-    .container {
-      padding-inline: 1.5rem;
-    }
-  }
-}
-
-/* Links share one focus language; individual links should not need to opt in. */
-a:focus-visible {
-  @apply ring-focus ring-2 ring-offset-2 outline-none;
-}