@ponti-studios/ui 0.1.2 → 0.3.0

package/src/styles.css

@@ -1,1052 +1,88 @@
 @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. */
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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
-    );
-  }
-}
-
-.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);
-}
-
+/* Keep generated token names isolated from Tailwind's standard role names. */
 :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;
-  }
-}
-@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;
-}
+  --ponti-primary: var(--color-accent);
+  --ponti-primary-foreground: var(--color-text-on-accent);
+  --ponti-destructive: var(--color-destructive);
+  --ponti-destructive-foreground: var(--color-text-on-destructive);
+  --ponti-foreground: var(--color-text-primary);
+  --ponti-muted-foreground: var(--color-text-secondary);
+  --ponti-border: var(--color-border-default);
+  --ponti-ring: var(--color-ring-focus);
+}
+
+/* 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(--color-surface-canvas);
+  --color-foreground: var(--ponti-foreground);
+  --color-card: var(--color-surface-panel);
+  --color-card-foreground: var(--color-text-primary);
+  --color-popover: var(--color-surface-raised);
+  --color-popover-foreground: var(--color-text-primary);
+  --color-primary: var(--ponti-primary);
+  --color-primary-foreground: var(--ponti-primary-foreground);
+  --color-secondary: var(--color-surface-panel);
+  --color-secondary-foreground: var(--color-text-primary);
+  --color-muted: var(--color-surface-inset);
+  --color-muted-foreground: var(--ponti-muted-foreground);
+  --color-accent-foreground: var(--color-text-primary);
+  --color-destructive-foreground: var(--ponti-destructive-foreground);
+  --color-border: var(--ponti-border);
+  --color-input: var(--ponti-border);
+  --color-ring: var(--ponti-ring);
+  --color-chart-1: var(--color-border-focus);
+  --color-chart-2: var(--color-chart-positive);
+  --color-chart-3: var(--color-border-focus);
+  --color-chart-4: var(--color-text-warning);
+  --color-chart-5: var(--color-border-strong);
+}
+
+@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 relative isolate flex shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-card 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 flex flex-col gap-4 border-b border-border 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; }
 
 @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);
+  :root { color-scheme: light; }
+  @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
+  html, body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-
-  *:focus {
-    outline: none;
-  }
-
-  *:focus-visible {
-    outline: 2px solid var(--color-ring-focus);
-    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);
-  }
-
+  * { border-color: var(--color-border, currentColor); }
+  *:focus { outline: none; }
+  *:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; border-radius: inherit; }
+  button { cursor: pointer; font-family: inherit; }
+  h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-tight); }
   @media (prefers-reduced-motion: reduce) {
-    * {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-    }
+    *, ::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;
-}