/* Design tokens, custom properties only; rules in docs/design.md. Shared by the registry and
   the stage pages. Breakpoints (literals in component CSS): 40rem, 56.25rem, 75rem. */

:root {
  color-scheme: dark;

  /* Roles: display = DE Sans, UI = DE UI, data = DE Mono (docs/design.md, Typography). */
  --font-sans: "DE Sans", "DE Sans Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-ui: "DE UI", "DE UI Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "DE Mono", "DE Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-wordmark: "Infinity", var(--font-sans);

  /* DE Sans 400, 700; DE UI 400, 500, 600; DE Mono 400, 500. */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-mono: 400;
  --weight-mono-strong: 500;

  /* Fluid type, 360px to 1200px viewport; rem + vw so zoom still applies. */
  --step--2: 0.75rem; /* 12px fixed */
  --step--1: clamp(0.8125rem, 0.7857rem + 0.119vw, 0.875rem); /* 13 to 14px */
  --step-0: clamp(1rem, 0.9732rem + 0.119vw, 1.0625rem); /* 16 to 17px */
  --step-1: clamp(1.125rem, 1.0714rem + 0.2381vw, 1.25rem); /* 18 to 20px */
  --step-2: clamp(1.25rem, 1.1429rem + 0.4762vw, 1.5rem); /* 20 to 24px */
  --step-3: clamp(1.5rem, 1.3393rem + 0.7143vw, 1.875rem); /* 24 to 30px */
  --step-4: clamp(1.75rem, 1.4821rem + 1.1905vw, 2.375rem); /* 28 to 38px */
  --step-5: clamp(2rem, 1.5714rem + 1.9048vw, 3rem); /* 32 to 48px */
  --step-6: clamp(2.25rem, 1.6071rem + 2.8571vw, 3.75rem); /* 36 to 60px */
  --step-7: clamp(2.75rem, 2rem + 3.3333vw, 4.5rem); /* 44 to 72px */

  /* Line heights, unitless; uses per step in docs/design.md, Scale. */
  --leading-display: 1.02;
  --leading-heading: 1.15;
  --leading-snug: 1.4;
  --leading-body: 1.55;
  --leading-relaxed: 1.6;
  --leading-prose: 1.65;
  --leading-label: 1.25;

  /* Tracking: display sizes tighten as they grow; mono caps open up. */
  --tracking-display: -0.03em;
  --tracking-headline: -0.022em;
  --tracking-heading: -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.08em;
  --tracking-label-wide: 0.12em;

  /* Measures */
  --measure-prose: 34rem; /* about 72 characters at 17px */
  --measure-lede: 32rem;
  --measure-headline: 20ch;

  /* Surfaces, darkest first; a layer is never darker than what it sits on. */
  --surface-0: #0e141c;
  --surface-1: #121a24;
  --surface-2: #18222e;
  --surface-3: #1f2a37;
  --surface-header: rgb(14 20 28 / 78%);
  --surface-scrim: rgb(5 8 12 / 72%);

  /* Text, contrast on --surface-0 / --surface-3; all pass 4.5:1 on every surface. */
  --text-primary: #e8edf3; /* 15.7 / 12.4 */
  --text-secondary: #a9b4c2; /* 8.8 / 6.9 */
  --text-tertiary: #8592a3; /* 5.9 / 4.6 */
  --text-disabled: #5c6a7c; /* 3.4: disabled controls only */
  --text-on-accent: #10161e; /* 7.1 on --accent */

  /* The speaker-badge orange, rationed (docs/design.md, Principles). */
  --accent: #f3825c; /* 7.2 on --surface-0 */
  --accent-hover: #f69a7b; /* 8.7; --text-on-accent on it 8.5 */
  --accent-pressed: #e3704a;
  --accent-subtle: rgb(243 130 92 / 12%);
  --accent-border: rgb(243 130 92 / 45%);
  --selection: rgb(243 130 92 / 32%);

  /* Data states: always with an icon and a word; the message stays --text-primary. */
  --success: #3dbfa0; /* 8.1 on --surface-0 */
  --success-subtle: rgb(61 191 160 / 12%);
  --warning: #e8c547; /* 11.0 on --surface-0 */
  --warning-subtle: rgb(232 197 71 / 12%);
  --danger: #e5484d; /* 4.7: icons, borders and marks, not text */
  --danger-subtle: rgb(229 72 77 / 12%);

  /* 13.9:1 on --surface-0, 1.9:1 on --accent: hence the offset. */
  --focus-ring: #ffd7c7;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Hairlines are decoration; --border-strong marks controls (3:1). */
  --border-width: 1px;
  --border-subtle: rgb(169 180 194 / 16%);
  --border-default: rgb(169 180 194 / 30%);
  --border-strong: #5c6a7c; /* 3.4 and 3.2 on --surface-0 and -1 */
  --border-strong-raised: #6b7a8d; /* 3.7 and 3.3 on --surface-2 and -3 */
  --border-accent: var(--accent);

  /* Charts: one accent series, the rest neutral; every mark 3:1 on --surface-1. */
  --chart-neutral: #5c6a7c; /* 3.2 on --surface-1 */
  --chart-neutral-strong: #97a3b3; /* second series, 6.8 */
  --chart-accent: var(--accent); /* 6.8 */
  --chart-accent-muted: #b5523a; /* 3.5 */
  --chart-track: rgb(169 180 194 / 8%);
  --chart-grid: rgb(169 180 194 / 12%);
  --chart-gap: 2px;
  --chart-bar: 8px;
  --chart-line: 2px;

  /* Spacing, 4px base, named by pixel value at a 16px root. */
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;
  --space-128: 8rem;
  --space-section: clamp(4rem, 2.2857rem + 7.619vw, 8rem); /* 64 to 128px */
  --space-stack: clamp(2rem, 1.1429rem + 3.8095vw, 4rem); /* 32 to 64px */

  /* Layout */
  --content-max: 72rem; /* 1152px */
  --gutter: clamp(1rem, 0.5714rem + 1.9048vw, 2rem); /* 16 to 32px */
  --gutter-sm: 1rem;
  --gutter-md: 1.5rem;
  --gutter-lg: 2rem;
  --grid-columns: 12;
  --grid-gap: var(--space-24);
  --header-height: 3.5rem;
  --header-height-md: 4rem;
  --target-min: 2.75rem; /* 44px */
  --control-height: 2.75rem;
  --control-height-lg: 3.25rem;

  /* Radii */
  --radius-2: 0.125rem;
  --radius-4: 0.25rem;
  --radius-8: 0.5rem;
  --radius-12: 0.75rem;
  --radius-20: 1.25rem;
  --radius-pill: 999px;

  /* Elevation: a lighter surface and a top highlight; shadows only for floating layers */
  --highlight-1: inset 0 1px 0 rgb(255 255 255 / 4%);
  --highlight-2: inset 0 1px 0 rgb(255 255 255 / 6%);
  --shadow-overlay: 0 24px 48px -12px rgb(0 0 0 / 60%), 0 0 0 1px rgb(169 180 194 / 16%);
  --shadow-scroll-edge: rgb(5 8 12 / 85%);
  --grain-opacity: 0.12;

  /* Motion: enter ease-out, move ease-in-out, leave ease-in. */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-emphasized: cubic-bezier(0.2, 0.7, 0.1, 1); /* gauge needle and bar growth only */
  --reveal-distance: 12px;
  --reveal-stagger: 60ms;

  /* Stacking */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky-column: 2;
  --z-header: 100;
  --z-menu: 110;
  --z-toast: 300;
  --z-grain: 500;
  --z-skip-link: 600;
}