/**
 * Design Tokens — Single Source of Truth.
 *
 * Everything visual lives here: edit a value and Vite hot-swaps the
 * stylesheet instantly — no dev-server restart, no runtime injection.
 *
 * Structure:
 *   :root          — canonical CSS variables (dark = default mode)
 *   .light         — light-mode overrides (ThemeMode provider toggles the class)
 *   @theme inline  — maps variables to Tailwind utilities (bg-*, text-*, h-*, …)
 *   @utility       — named utilities Tailwind has no theme namespace for
 *
 * Consumers:
 *   - Tailwind classes (preferred): bg-surface-hover, text-body3, h-input-md
 *   - CSS / charts / MUI shim: var(--surface-hover), cssVar("--risk-high")
 *
 * Feature components compose these utilities and semantic component styles.
 * Additional data/chart tokens live in their component stylesheets.
 */

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant light (&:where(.light, .light *));

/* ------------------------------------------------------------------ */
/* Canonical variables — dark mode (default)                           */
/* ------------------------------------------------------------------ */

:root {
  /* Structural separators; focus indicators and state markers retain explicit widths. */
  --ds-rule-width: 0.5px;
  /* Runtime component sizes; override these to change all matching controls. */
  --ds-size-input-sm: 28px;
  --ds-size-input-md: 36px;
  --ds-size-input-lg: 44px;
  --ds-size-button-sm: 28px;
  --ds-size-button-md: 36px;
  --ds-size-button-lg: 44px;
  --ds-size-chip-sm: 20px;
  --ds-size-chip-md: 24px;
  --ds-size-row-compact: 32px;
  --ds-size-row-default: 40px;
  --ds-size-row-spacious: 60px;
  --ds-size-drawer-sm: 320px;
  --ds-size-drawer-md: 420px;
  --ds-size-drawer-lg: 560px;
  --ds-size-pricing-column: 160px;
  --ds-size-intro-role-card: 142px;
  --ds-size-recency-card: 82px;
  --ds-size-timeline-track: 20px;
  --ds-size-search-listbox: 485px;
  --ds-size-search-listbox-lg: 540px;
  --ds-size-composer: 112px;

  /* Canonical runtime typography, shared by utilities and modules. */
  --ds-text-h1: 1.75rem;
  --ds-text-h1--line-height: 1.3;
  --ds-text-h2: 1.375rem;
  --ds-text-h2--line-height: 1.35;
  --ds-text-h3: 1.125rem;
  --ds-text-h3--line-height: 1.4;
  --ds-text-h4: 1rem;
  --ds-text-h4--line-height: 1.5;
  --ds-text-h5: 0.875rem;
  --ds-text-h5--line-height: 1.5;
  --ds-text-h6: 0.75rem;
  --ds-text-h6--line-height: 1.5;
  --ds-text-body1: 1rem;
  --ds-text-body1--line-height: 1.6;
  --ds-text-body2: 0.875rem;
  --ds-text-body2--line-height: 1.6;
  --ds-text-body3: 0.75rem;
  --ds-text-body3--line-height: 1.5;
  --ds-text-caption: 0.75rem;
  --ds-text-caption--line-height: 1.5;
  --ds-text-overline: 0.6875rem;
  --ds-text-overline--line-height: 1.5;
  --ds-text-bodyXXS: 0.625rem;
  --ds-text-bodyXXS--line-height: 1.2;
  --ds-text-display: 3rem;
  --ds-text-display--line-height: 1.1;

  /* Portable module foundations. Spacing preserves the supplied Artemis scale. */
  --ds-space-0: 0px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 64px;
  --ds-space-8: 72px;
  --ds-space-9: 128px;
  --action-bg: #8b80b8;
  --action-hover: #9b91c5;
  --action-fg: #101010;
  --status-success: #5cc9a7;
  --status-warning: #d4a24e;
  --status-error: #e07878;
  --status-info: #85b3d8;
  --ds-content-width: 1200px;
  --ds-page-padding: 32px;
  --ds-control-radius: 0px;

  /* Backgrounds & surfaces */
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #101010;
  --bg-elevated: #181818;
  --surface-default: #000000;
  --surface-hover: #262626;
  --surface-active: #2e2e2e;
  --surface-border: #343434;
  --surface-border-subtle: #282828;
  --surface-border-strong: #3a3a3a;
  --surface-border-emphasis: #4f4f4f;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #a6a6a6;
  --text-tertiary: #7a7a7a;
  --text-disabled: #5c5c5c;

  /* Accent */
  --accent-primary: #8b80b8;
  --accent-primary-hover: #9b91c5;
  --accent-primary-dark: #7b70a6;
  --accent-secondary: #9c8aad;
  --accent-registrational: #9c8aad;
  --accent-registrational-dark: #8a789c;
  --accent-primary-05: rgba(139, 128, 184, 0.05);
  --accent-primary-10: rgba(139, 128, 184, 0.1);
  --accent-primary-15: rgba(139, 128, 184, 0.15);
  --accent-primary-25: rgba(139, 128, 184, 0.25);

  /* Scrollbar */
  --scrollbar-track: transparent;
  --scrollbar-thumb: #343434;
  --scrollbar-thumb-hover: #3a3a3a;

  /* Shadcn/Radix HSL triples (consumed as hsl(var(--x))) */
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --card: 0 0% 9.4%;
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 0%;
  --popover-foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --primary-foreground: 0 0% 6.3%;
  --secondary: 0 0% 9.4%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 0%;
  --muted-foreground: 0 0% 100%;
  --accent: 0 0% 9.4%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 47.2% 54.7%;
  --destructive-foreground: 0 0% 98%;
  --warning: 37 51.6% 50.6%;
  --warning-foreground: 21 91.7% 14.1%;
  --border: 0 0% 20.4%;
  --input: 0 0% 20.4%;
  --ring: 0 0% 65.1%;
  --radius: 0rem;
  --sidebar: 0 0% 3.9%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-border: 0 0% 20.4%;
  --link: 252 31% 67.1%;

  /* Semantic */
  --success: #5cc9a7;
  --success-dark: #48b896;
  --success-light: #72d8b8;
  --success-lightest: #edfaf5;
  --warning-main: #d4a24e;
  --warning-dark: #c29040;
  --warning-light: #e0b35e;
  --warning-lightest: #fcf4e4;
  --error: #d46a6a;
  --error-dark: #c25555;
  --error-light: #e07878;
  --error-lightest: #fbeded;
  --info: #6a9fcc;
  --info-dark: #5889b5;
  --info-light: #85b3d8;
  --info-lightest: #ecf3f9;

  /* Neutral scale */
  --neutral-black: #000000;
  --neutral-white: #ffffff;
  --neutral-01: #262626;
  --neutral-02: #555555;
  --neutral-03: #7b7b7b;
  --neutral-04: #9d9d9d;
  --neutral-05: #c4c4c4;
  --neutral-06: #d9d9d9;
  --neutral-07: #ededed;
  --neutral-08: #f4f4f4;
  --neutral-09: #fafafa;

  /* Color families */
  --gold-main: #c9a355;
  --gold-01: #d4b06a;
  --gold-02: #dfc48a;
  --gold-03: #e9d5aa;
  --gold-04: #f2e6ca;
  --gold-05: #faf4e8;
  --gold-06: #c9a3551a;
  --gold-main-rgb: 201, 163, 85;
  --gold-01-rgb: 212, 176, 106;
  --violet-main: #9c8aad;
  --violet-01: #ae9bbe;
  --violet-02: #c0b0cf;
  --violet-03: #d2c5df;
  --violet-04: #e2daed;
  --violet-05: #f0ecf5;
  --amber-main: #d4a24e;
  --amber-01: #e0b35e;
  --amber-02: #e8c47e;
  --amber-03: #f0d6a0;
  --amber-04: #f6e6c2;
  --amber-05: #fcf4e4;
  --mint-main: #5cc9a7;
  --mint-01: #72d8b8;
  --mint-02: #92e2c8;
  --mint-03: #b5ecd9;
  --mint-04: #d4f4ea;
  --mint-05: #edfaf5;
  --coral-main: #d46a6a;
  --coral-01: #e07878;
  --coral-02: #e89898;
  --coral-03: #f0b8b8;
  --coral-04: #f6d4d4;
  --coral-05: #fbeded;
  --pink-main: #d46a9c;
  --pink-01: #e07caa;
  --pink-02: #e89cbf;
  --pink-03: #f0b8d2;
  --pink-04: #f6d4e4;
  --pink-05: #fbedf3;
  --sky-main: #6a9fcc;
  --sky-01: #85b3d8;
  --sky-02: #a0c5e2;
  --sky-03: #bbd7ec;
  --sky-04: #d6e9f5;
  --sky-05: #ecf3f9;

  /* Onboarding */
  --onboarding-primary: #402af5;
  --onboarding-primary-light: #7b6af5;

  /* Risk spectrum */
  --risk-stable: #5cc9a7;
  --risk-low: #c9a355;
  --risk-medium: #d4a24e;
  --risk-elevated: #d48a3e;
  --risk-high: #d46a6a;
  --risk-critical: #c25555;
  --risk-unknown: #9c8aad;

  /* Trend */
  --trend-up: #5cc9a7;
  --trend-down: #d46a6a;
  --trend-flat: #c9a355;

  /* Charts (recharts/SVG consumers read these via cssVar()) */
  --chart-enrollment-needed: #c9a355;
  --chart-enrollment-enrolled: #6a9fcc;
  --chart-recruitment-not-yet: #d4a24e;
  --chart-recruitment-recruiting: #5cc9a7;
  --chart-recruitment-active: #6a9fcc;
  --chart-activity: #6a9fcc;
  --chart-risk-1: #5cc9a7;
  --chart-risk-2: #c9a355;
  --chart-risk-3: #d4a24e;
  --chart-risk-4: #d46a6a;
  --chart-risk-5: #c25555;
  --chart-gradient-gold-1: #d4b06a;
  --chart-gradient-gold-2: #c9a355;
  --chart-gradient-gold-3: #a68840;
  --chart-gradient-sky-1: #85b3d8;
  --chart-gradient-sky-2: #6a9fcc;
  --chart-gradient-sky-3: #5889b5;
  --chart-gradient-mint-1: #72d8b8;
  --chart-gradient-mint-2: #5cc9a7;
  --chart-gradient-mint-3: #48b896;
  --chart-gradient-coral-1: #e07878;
  --chart-gradient-coral-2: #d46a6a;
  --chart-gradient-coral-3: #c25555;
  --chart-gradient-amber-1: #e0b35e;
  --chart-gradient-amber-2: #d4a24e;
  --chart-gradient-amber-3: #c29040;
  --chart-gradient-violet-1: #ae9bbe;
  --chart-gradient-violet-2: #9c8aad;
  --chart-gradient-violet-3: #8a789c;
  --chart-arm-endpoints: #3fa0d4;
  --chart-arm-schedule: #3f6390;
  --chart-arm-completes: #6a4fc9;
  --chart-arm-clinsig: #9e68c2;
  --chart-arm-regulatory: #c56aa2;

  /* Discover / homepage redesign palette (brighter than the house palette) */
  --discover-teal: #1fe3a6;
  --discover-teal-fill: rgba(20, 220, 160, 0.18);
  --discover-stage-endpoint: #10e0b0;
  --discover-stage-completes: #549bff;
  --discover-stage-clinsig: #9d7cff;
  --discover-stage-regulatory: #ff5ba0;
  --discover-slate: #62a6f5;
  --discover-coral: #ff7048;
  --discover-coral-fill: rgba(255, 90, 40, 0.2);
  --discover-amber: #ffba33;
  --discover-amber-fill: rgba(255, 180, 40, 0.2);

  /* Kalshi partnership (brand green, same in both modes) */
  --kalshi-green: #00d992;
  --kalshi-green-hover: #00c281;

  /* Gradients */
  --gradient-briefing: linear-gradient(
    180deg,
    rgba(139, 128, 184, 0.1) 0%,
    rgba(212, 106, 106, 0.05) 100%
  );
  --gradient-paywall:
    radial-gradient(
      57.15% 40.66% at 50% 0%,
      rgba(139, 128, 184, 0.3) 0%,
      rgba(24, 24, 24, 0.3) 100%
    ),
    #181818;
  --gradient-stepper-active: linear-gradient(
    170deg,
    rgba(139, 128, 184, 0.01) 0%,
    rgba(156, 138, 173, 0.1) 100%
  );
  --gradient-stepper-disabled: linear-gradient(
    170deg,
    rgba(156, 163, 175, 0.01) 0%,
    rgba(156, 163, 175, 0.1) 100%
  );

  /* Misc surfaces */
  --progress-track: #d2c5df;
  --progress-fill: #8b80b8;
  --tooltip-bg: #000000;

  /* Artwork generator (admin-generated article images; canvas-only via
     cssVar, mode-independent — the artwork is always dark). Values must stay
     6-digit hex: the renderer appends 2-digit alpha suffixes. */
  --artwork-bg: #06080c;
  --artwork-white: #ffffff;
  --artwork-black: #000000;
  --artwork-teal-dark: #0a3828;
  --artwork-teal-mid: #10604a;
  --artwork-teal-bright: #00e8b0;
  --artwork-teal-glow: #60ffd8;
  --artwork-ocean-dark: #0a2038;
  --artwork-ocean-mid: #103a78;
  --artwork-ocean-bright: #2888e0;
  --artwork-ocean-glow: #60b8ff;
  --artwork-ember-dark: #281008;
  --artwork-ember-mid: #682010;
  --artwork-ember-bright: #e04818;
  --artwork-ember-glow: #ff9040;
  --artwork-violet-dark: #180c30;
  --artwork-violet-mid: #382060;
  --artwork-violet-bright: #7850c0;
  --artwork-violet-glow: #b888ff;
  --artwork-gold-dark: #1e1808;
  --artwork-gold-mid: #4a3410;
  --artwork-gold-bright: #d8a010;
  --artwork-gold-glow: #ffe050;
  --artwork-rose-dark: #201018;
  --artwork-rose-mid: #581838;
  --artwork-rose-bright: #e03878;
  --artwork-rose-glow: #ff70b8;
  --artwork-ice-dark: #0c1420;
  --artwork-ice-mid: #1e3448;
  --artwork-ice-bright: #5890c8;
  --artwork-ice-glow: #98d0ff;
  --artwork-mono-dark: #141414;
  --artwork-mono-mid: #282828;
  --artwork-mono-bright: #505050;
  --artwork-mono-glow: #909090;

  /* Radii (consumed via var(); Tailwind rounded-* is sharp by design) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  /* Upward-casting shadow, for bars anchored to the bottom of the viewport */
  --shadow-up: 0 -2px 8px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Motion */
  --motion-fast: 100ms;
  --motion-default: 150ms;
  --motion-slow: 200ms;
  --motion-slower: 300ms;
  --motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-enter: cubic-bezier(0.2, 0, 0, 1);
  --motion-loading: 1600ms;

  /* z-index scale */
  --z-base: 0;
  --z-content: 1;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-overlay: 1100;
  --z-drawer: 1200;
  --z-modal: 1300;
  --z-popover: 1400;
  --z-tooltip: 1500;
  --z-toast: 1600;
  --z-critical: 1700;
}

/* ------------------------------------------------------------------ */
/* Light-mode overrides                                                */
/* ------------------------------------------------------------------ */

.light {
  --action-bg: #66578f;
  --action-hover: #564878;
  --action-fg: #ffffff;
  --status-success: #16755b;
  --status-warning: #89601c;
  --status-error: #ad3e3e;
  --status-info: #326b98;

  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-tertiary: #f5f5f5;
  --bg-elevated: #ffffff;
  --surface-default: #ffffff;
  --surface-hover: #f9fafb;
  --surface-active: #f3f4f6;
  --surface-border: #e5e7eb;
  --surface-border-subtle: #f3f4f6;
  --surface-border-strong: #d1d5db;
  --surface-border-emphasis: #d1d5db;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-disabled: #d1d5db;
  --scrollbar-thumb: #e5e7eb;
  --scrollbar-thumb-hover: #d1d5db;

  --background: 0 0% 100%;
  --foreground: 221 39.3% 11%;
  --card: 0 0% 100%;
  --card-foreground: 221 39.3% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 221 39.3% 11%;
  --primary: 0 0% 14.9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 95.7%;
  --secondary-foreground: 0 0% 14.9%;
  --muted: 0 0% 95.7%;
  --muted-foreground: 0 0% 14.9%;
  --accent: 0 0% 95.7%;
  --accent-foreground: 0 0% 14.9%;
  --destructive: 0 55.2% 62.4%;
  --warning: 38 60.9% 56.9%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 221 39.3% 11%;
  --sidebar: 0 0% 98%;
  --sidebar-foreground: 0 0% 14.9%;
  --sidebar-border: 220 13% 91%;
  --link: 252 28.3% 61.2%;

  --gradient-paywall:
    radial-gradient(
      57.15% 40.66% at 50% 0%,
      rgba(139, 128, 184, 0.3) 0%,
      rgba(244, 244, 244, 0.3) 100%
    ),
    #f4f4f4;
  --tooltip-bg: rgba(97, 97, 97, 1);

  --discover-teal: #019e6e;
  --discover-teal-fill: #dbf5eb;
  --discover-stage-endpoint: #04c39a;
  --discover-stage-completes: #2f7bf2;
  --discover-stage-clinsig: #7a51f2;
  --discover-stage-regulatory: #e8327f;
  --discover-slate: #2f6fc9;
  --discover-coral: #e2451c;
  --discover-coral-fill: #fce4dc;
  --discover-amber: #cf8400;
  --discover-amber-fill: #fdedcf;
}

/* ------------------------------------------------------------------ */
/* Tailwind theme — generates utilities from the variables above       */
/* ------------------------------------------------------------------ */

/* Resolve derived states at theme and presentation boundaries, including nested previews. */
:root,
.light,
[data-system="appliedxl"],
.ds-presentation {
  /* Neutral interface states; semantic status and chart colors remain independent. */
  --selection-bg: color-mix(
    in srgb,
    var(--text-primary) 12%,
    var(--bg-primary)
  );
  --selection-border: color-mix(
    in srgb,
    var(--text-primary) 48%,
    var(--bg-primary)
  );
  --selection-fg: var(--text-primary);
  --control-checked-bg: var(--text-primary);
  --control-checked-fg: var(--bg-primary);
  --focus-ring: var(--text-secondary);
  --skeleton-base: color-mix(
    in srgb,
    var(--text-primary) 10%,
    var(--bg-primary)
  );
  --skeleton-highlight: color-mix(
    in srgb,
    var(--text-primary) 17%,
    var(--bg-primary)
  );
}

@theme inline {
  --color-action: var(--action-bg);
  --color-action-hover: var(--action-hover);
  --color-action-foreground: var(--action-fg);
  /* Typography */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Legacy font utilities keep the single interface family. */
  --font-mono: var(--font-sans);
  --font-serif: var(--font-sans);

  /* Canonical text styles */
  --text-h1: var(--ds-text-h1);
  --text-h1--line-height: var(--ds-text-h1--line-height);
  --text-h2: var(--ds-text-h2);
  --text-h2--line-height: var(--ds-text-h2--line-height);
  --text-h3: var(--ds-text-h3);
  --text-h3--line-height: var(--ds-text-h3--line-height);
  --text-h4: var(--ds-text-h4);
  --text-h4--line-height: var(--ds-text-h4--line-height);
  --text-h5: var(--ds-text-h5);
  --text-h5--line-height: var(--ds-text-h5--line-height);
  --text-h6: var(--ds-text-h6);
  --text-h6--line-height: var(--ds-text-h6--line-height);
  --text-body1: var(--ds-text-body1);
  --text-body1--line-height: var(--ds-text-body1--line-height);
  --text-body2: var(--ds-text-body2);
  --text-body2--line-height: var(--ds-text-body2--line-height);
  --text-body3: var(--ds-text-body3);
  --text-body3--line-height: var(--ds-text-body3--line-height);
  --text-caption: var(--ds-text-caption);
  --text-caption--line-height: var(--ds-text-caption--line-height);
  --text-overline: var(--ds-text-overline);
  --text-overline--line-height: var(--ds-text-overline--line-height);
  --text-bodyXXS: var(--ds-text-bodyXXS);
  --text-bodyXXS--line-height: var(--ds-text-bodyXXS--line-height);
  --text-display: var(--ds-text-display);
  --text-display--line-height: var(--ds-text-display--line-height);

  /* Legacy size aliases (token-backed; sizes diverge from Tailwind defaults) */
  --text-xs: var(--ds-text-overline);
  --text-xs--line-height: var(--ds-text-overline--line-height);
  --text-sm: var(--ds-text-body3);
  --text-sm--line-height: var(--ds-text-body3--line-height);
  --text-base: var(--ds-text-body2);
  --text-base--line-height: var(--ds-text-body2--line-height);
  --text-md: var(--ds-text-body1);
  --text-md--line-height: var(--ds-text-body1--line-height);
  --text-lg: var(--ds-text-h3);
  --text-lg--line-height: var(--ds-text-h3--line-height);
  --text-xl: var(--ds-text-h2);
  --text-xl--line-height: var(--ds-text-h2--line-height);
  --text-2xl: var(--ds-text-h1);
  --text-2xl--line-height: var(--ds-text-h1--line-height);
  --text-4xl: var(--ds-text-display);
  --text-4xl--line-height: var(--ds-text-display--line-height);

  /* Breakpoints */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1200px;
  --breakpoint-lg: 1440px;
  --breakpoint-xl: 1920px;
  --breakpoint-2xl: 2548px;

  /* Spacing — index scale (0,4,8,12,16,24,32,64,72,128).
     Dynamic base (0.25rem) covers half-steps and indices ≥ 10. */
  --spacing: 0.25rem;
  --spacing-0: var(--ds-space-0);
  --spacing-1: var(--ds-space-1);
  --spacing-2: var(--ds-space-2);
  --spacing-3: var(--ds-space-3);
  --spacing-4: var(--ds-space-4);
  --spacing-5: var(--ds-space-5);
  --spacing-6: var(--ds-space-6);
  --spacing-7: var(--ds-space-7);
  --spacing-8: var(--ds-space-8);
  --spacing-9: var(--ds-space-9);

  /* Component sizes (h-input-md, w-drawer-lg, h-row-default, …) */
  --spacing-input-sm: var(--ds-size-input-sm);
  --spacing-input-md: var(--ds-size-input-md);
  --spacing-input-lg: var(--ds-size-input-lg);
  --spacing-button-sm: var(--ds-size-button-sm);
  --spacing-button-md: var(--ds-size-button-md);
  --spacing-button-lg: var(--ds-size-button-lg);
  --spacing-chip-sm: var(--ds-size-chip-sm);
  --spacing-chip-md: var(--ds-size-chip-md);
  --spacing-row-compact: var(--ds-size-row-compact);
  --spacing-row-default: var(--ds-size-row-default);
  --spacing-row-spacious: var(--ds-size-row-spacious);
  --spacing-drawer-sm: var(--ds-size-drawer-sm);
  --spacing-drawer-md: var(--ds-size-drawer-md);
  --spacing-drawer-lg: var(--ds-size-drawer-lg);
  --spacing-pricing-column: var(--ds-size-pricing-column);
  --spacing-intro-role-card: var(--ds-size-intro-role-card);
  --spacing-recency-card: var(--ds-size-recency-card);
  --spacing-timeline-track: var(--ds-size-timeline-track);
  --spacing-search-listbox: var(--ds-size-search-listbox);
  --spacing-search-listbox-lg: var(--ds-size-search-listbox-lg);
  --spacing-composer: var(--ds-size-composer);

  /* Named max/min widths (max-w-editor, min-w-pricing-comparison, …) */
  --container-research-modules: 780px;
  --container-editor-narrow: 580px;
  --container-editor: 780px;
  --container-about-tab: 640px;
  --container-trial: 900px;
  --container-pricing-comparison: 720px;
  --container-wide: 1400px;

  /* Radii — sharp corners by design; explicit token-* names opt in to softness */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-full: 9999px;
  --radius-token-sm: 4px;
  --radius-token-md: 8px;
  --radius-token-lg: 12px;
  --radius-token-xl: 16px;

  /* Shadows — md/lg/xl match Tailwind defaults; sm keeps the v3 subtle value
     (v4 renamed it to shadow-xs). Mirror of the :root vars above. */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  /* Motion defaults for transition-* utilities */
  --default-transition-duration: var(--motion-fast);
  --default-transition-timing-function: var(--motion-easing);

  /* Animations */
  --animate-accordion-down: accordion-down var(--motion-default)
    var(--motion-easing);
  --animate-accordion-up: accordion-up var(--motion-default)
    var(--motion-easing);
  --animate-collapsible-down: collapsible-down var(--motion-default)
    var(--motion-easing);
  --animate-collapsible-up: collapsible-up var(--motion-default)
    var(--motion-easing);
  --animate-glow-pulse: glow-pulse 4s ease-in-out infinite;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
  @keyframes collapsible-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
    }
  }
  @keyframes collapsible-up {
    from {
      height: var(--radix-collapsible-content-height);
    }
    to {
      height: 0;
    }
  }
  @keyframes glow-pulse {
    0%,
    100% {
      opacity: 0.12;
    }
    50% {
      opacity: 0.22;
    }
  }

  /* Compatibility utilities share the same semantic palette as all modules. */
  --color-border: var(--surface-border);
  --color-input: var(--surface-border);
  --color-ring: var(--action-bg);
  --color-background: var(--bg-primary);
  --color-foreground: var(--text-primary);
  --color-primary: var(--action-bg);
  --color-primary-foreground: var(--action-fg);
  --color-secondary: var(--bg-secondary);
  --color-secondary-foreground: var(--text-primary);
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-muted: var(--bg-tertiary);
  --color-muted-foreground: var(--text-secondary);
  --color-accent: var(--surface-hover);
  --color-accent-foreground: var(--text-primary);
  --color-popover: var(--bg-elevated);
  --color-popover-foreground: var(--text-primary);
  --color-card: var(--bg-secondary);
  --color-card-foreground: var(--text-primary);
  --color-sidebar: var(--bg-secondary);
  --color-sidebar-foreground: var(--text-primary);
  --color-sidebar-border: var(--surface-border-subtle);

  /* Colors — semantic surfaces & text */
  --color-background-primary: var(--bg-primary);
  --color-background-secondary: var(--bg-secondary);
  --color-background-tertiary: var(--bg-tertiary);
  --color-background-elevated: var(--bg-elevated);
  --color-surface: var(--surface-default);
  --color-surface-hover: var(--surface-hover);
  --color-surface-active: var(--surface-active);
  --color-surface-border: var(--surface-border);
  --color-surface-border-subtle: var(--surface-border-subtle);
  --color-surface-border-strong: var(--surface-border-strong);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text-disabled: var(--text-disabled);

  /* Colors — accent */
  --color-accent-primary: var(--accent-primary);
  --color-accent-primary-hover: var(--accent-primary-hover);
  --color-accent-primary-dark: var(--accent-primary-dark);
  --color-accent-primary-05: var(--accent-primary-05);
  --color-accent-primary-10: var(--accent-primary-10);
  --color-accent-primary-15: var(--accent-primary-15);
  --color-accent-primary-25: var(--accent-primary-25);
  --color-accent-secondary: var(--accent-secondary);

  /* Colors — semantic states */
  --color-success: var(--success);
  --color-success-dark: var(--success-dark);
  --color-success-light: var(--success-light);
  --color-success-lightest: var(--success-lightest);
  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));
  --color-warning-dark: var(--warning-dark);
  --color-warning-light: var(--warning-light);
  --color-warning-lightest: var(--warning-lightest);
  --color-error: var(--error);
  --color-error-dark: var(--error-dark);
  --color-error-light: var(--error-light);
  --color-error-lightest: var(--error-lightest);
  --color-info: var(--info);
  --color-info-dark: var(--info-dark);
  --color-info-light: var(--info-light);
  --color-info-lightest: var(--info-lightest);

  /* Colors — neutral scale + aliases */
  --color-neutral-black: var(--neutral-black);
  --color-neutral-white: var(--neutral-white);
  --color-neutral-01: var(--neutral-01);
  --color-neutral-02: var(--neutral-02);
  --color-neutral-03: var(--neutral-03);
  --color-neutral-04: var(--neutral-04);
  --color-neutral-05: var(--neutral-05);
  --color-neutral-06: var(--neutral-06);
  --color-neutral-07: var(--neutral-07);
  --color-neutral-08: var(--neutral-08);
  --color-neutral-09: var(--neutral-09);
  --color-neutral-darkest: var(--neutral-01);
  --color-neutral-darker: var(--neutral-02);
  --color-neutral-dark: var(--neutral-03);
  --color-neutral-darkGrey: var(--neutral-04);
  --color-neutral-grey: var(--neutral-05);
  --color-neutral-lightGrey: var(--neutral-06);
  --color-neutral-light: var(--neutral-07);
  --color-neutral-lighter: var(--neutral-08);
  --color-neutral-lightest: var(--neutral-09);
  --color-common-black: var(--neutral-black);
  --color-common-white: var(--neutral-white);

  /* Colors — families */
  --color-gold-main: var(--gold-main);
  --color-gold-01: var(--gold-01);
  --color-gold-02: var(--gold-02);
  --color-gold-03: var(--gold-03);
  --color-gold-04: var(--gold-04);
  --color-gold-05: var(--gold-05);
  --color-pink-main: var(--pink-main);
  --color-pink-01: var(--pink-01);
  --color-pink-02: var(--pink-02);
  --color-pink-03: var(--pink-03);
  --color-pink-04: var(--pink-04);
  --color-pink-05: var(--pink-05);

  /* Colors — risk / trend / onboarding */
  --color-risk-stable: var(--risk-stable);
  --color-risk-low: var(--risk-low);
  --color-risk-medium: var(--risk-medium);
  --color-risk-elevated: var(--risk-elevated);
  --color-risk-high: var(--risk-high);
  --color-risk-critical: var(--risk-critical);
  --color-risk-unknown: var(--risk-unknown);
  --color-trend-up: var(--trend-up);
  --color-trend-down: var(--trend-down);
  --color-trend-flat: var(--trend-flat);
  --color-onboarding-primary: var(--onboarding-primary);
  --color-onboarding-primary-light: var(--onboarding-primary-light);

  /* Colors — discover palette (mode-aware) */
  --color-discover-teal: var(--discover-teal);
  --color-discover-teal-fill: var(--discover-teal-fill);
  --color-discover-stage-endpoint: var(--discover-stage-endpoint);
  --color-discover-stage-completes: var(--discover-stage-completes);
  --color-discover-stage-clinsig: var(--discover-stage-clinsig);
  --color-discover-stage-regulatory: var(--discover-stage-regulatory);
  --color-discover-slate: var(--discover-slate);
  --color-discover-coral: var(--discover-coral);
  --color-discover-coral-fill: var(--discover-coral-fill);
  --color-discover-amber: var(--discover-amber);
  --color-discover-amber-fill: var(--discover-amber-fill);

  /* Colors — Kalshi partnership */
  --color-kalshi-green: var(--kalshi-green);
  --color-kalshi-green-hover: var(--kalshi-green-hover);
}

/* ------------------------------------------------------------------ */
/* Named utilities without a Tailwind theme namespace                  */
/* ------------------------------------------------------------------ */

/* z-index scale */
@utility z-base {
  z-index: var(--z-base);
}
@utility z-content {
  z-index: var(--z-content);
}
@utility z-sticky {
  z-index: var(--z-sticky);
}
@utility z-dropdown {
  z-index: var(--z-dropdown);
}
@utility z-overlay {
  z-index: var(--z-overlay);
}
@utility z-drawer {
  z-index: var(--z-drawer);
}
@utility z-modal {
  z-index: var(--z-modal);
}
@utility z-popover {
  z-index: var(--z-popover);
}
@utility z-tooltip {
  z-index: var(--z-tooltip);
}
@utility z-toast {
  z-index: var(--z-toast);
}
@utility z-critical {
  z-index: var(--z-critical);
}

/* Motion durations */
@utility duration-fast {
  transition-duration: var(--motion-fast);
}
@utility duration-default {
  transition-duration: var(--motion-default);
}
@utility duration-slow {
  transition-duration: var(--motion-slow);
}
@utility duration-slower {
  transition-duration: var(--motion-slower);
}
@utility duration-motion-instant {
  transition-duration: 0ms;
}

/* 0.5px hairline from the Discover mockup (system default `border` = 1px) */
@utility border-hairline-fine {
  border-width: 0.5px;
}

/* Viewport-relative composer height */
@utility min-h-welcome-viewport {
  min-height: calc(100vh - 96px);
}

/* Responsive card grids */
@utility grid-cols-responsive-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
@utility grid-cols-pricing-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}