@ponti-studios/ui 0.1.2

package/src/styles.css

@@ -0,0 +1,1052 @@
+@import "tailwindcss";
+@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);
+}
+
+: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;
+}
+
+@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);
+    -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);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !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;
+}