:root {
  interpolate-size: allow-keywords;

  /* Type families */
  --font-sans: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;

  /* Neutral palette values. Components consume semantic --color-* roles below. */
  --palette-1: #252528;
  --palette-2: #343438;
  --palette-3: #171719;
  --palette-4: #d0cdc5;
  --palette-5: #bdb9b0;
  --palette-6: #9f9da0;
  --palette-7: #b99138;
  --palette-8: #ddbd78;
  --palette-9: #ece9e1;
  --palette-10: #f4f1e9;
  --palette-11: #d7d2c7;
  --palette-12: #32343a;
  --palette-13: #53545a;
  --palette-14: #73757b;
  --palette-15: #9b7423;
  --palette-16: #b88d35;

  /* Default semantic context: graphite. */
  --color-bg: var(--palette-1);
  --color-surface: var(--palette-2);
  --color-surface-raised: color-mix(in srgb, var(--palette-2), var(--palette-4) 4%);
  --color-shadow: var(--palette-3);
  --color-text: var(--palette-4);
  --color-body: var(--palette-5);
  --color-muted: var(--palette-6);
  --color-accent: var(--palette-7);
  --color-accent-soft: var(--palette-8);
  --color-border: color-mix(in srgb, var(--color-text), transparent 84%);
  --color-border-strong: color-mix(in srgb, var(--color-text), transparent 70%);

  /* Fluid type scale for regular sections and UI. Hero display type remains art-directed. */
  --text-xs: clamp(.72rem, .69rem + .08vw, .78rem);
  --text-sm: clamp(.82rem, .78rem + .13vw, .92rem);
  --text-body: clamp(.98rem, .93rem + .16vw, 1.1rem);
  --text-lead: clamp(1.08rem, .99rem + .3vw, 1.3rem);
  --text-h6: clamp(.92rem, .87rem + .16vw, 1.04rem);
  --text-h5: clamp(1.08rem, .99rem + .3vw, 1.3rem);
  --text-h4: clamp(1.55rem, 1.25rem + .9vw, 2.35rem);
  --text-h3: clamp(1.8rem, 1.42rem + .95vw, 2.55rem);
  --text-h2: clamp(2.15rem, 1.58rem + 1.8vw, 3.55rem);
  --text-h1: clamp(3rem, 2.08rem + 2.9vw, 5.65rem);

  --leading-solid: 1;
  --leading-tight: 1.08;
  --leading-heading: 1.16;
  --leading-ui: 1.25;
  --leading-body: 1.65;
  --leading-relaxed: 1.75;

  /* Fluid spatial rhythm. Component-internal padding may additionally use em. */
  --space-2xs: clamp(.35rem, .32rem + .08vw, .45rem);
  --space-xs: clamp(.55rem, .48rem + .2vw, .75rem);
  --space-sm: clamp(.8rem, .7rem + .3vw, 1.05rem);
  --space-md: clamp(1.1rem, .92rem + .55vw, 1.55rem);
  --space-lg: clamp(1.55rem, 1.22rem + 1vw, 2.4rem);
  --space-xl: clamp(2.25rem, 1.62rem + 2vw, 3.9rem);
  --space-2xl: clamp(3.25rem, 2.2rem + 3.2vw, 5.9rem);
  --space-3xl: clamp(4.6rem, 3.25rem + 4.2vw, 8rem);
  --section-space: clamp(5rem, 3.15rem + 5.8vw, 9.75rem);

  /* Layout */
  --container-main: 90rem;
  --container-wide: 105rem;
  --measure-copy: 68ch;
  --measure-heading: 22ch;
  --gutter: clamp(1.25rem, 3.2vw, 4rem);

  /* Shape */
  --radius-control: .55rem;
  --radius-card: 1.15rem;
  --radius-panel: 1.75rem;
  --radius-round: 999px;

  /* Elevation and focus */
  --shadow-sm: 0 .5rem 1.5rem color-mix(in srgb, var(--color-shadow), transparent 82%);
  --shadow-md: 0 1.25rem 3.5rem color-mix(in srgb, var(--color-shadow), transparent 76%);
  --shadow-lg: 0 2.25rem 6rem color-mix(in srgb, var(--color-shadow), transparent 68%);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent-soft), transparent 44%);

  /* Motion */
  --duration-fast: 160ms;
  --duration-normal: 250ms;
  --duration-slow: 460ms;
  --ease-standard: cubic-bezier(.2, .75, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Hero-only interaction controls retained as tokens for its local script. */
  --spot-size: 390px;
  --spot-strength: .88;

  /* Compatibility aliases for the accepted hero and existing components. */
  --palette-bg: var(--color-bg);
  --palette-surface: var(--color-surface);
  --palette-shadow: var(--color-shadow);
  --palette-text: var(--color-text);
  --palette-body: var(--color-body);
  --palette-muted: var(--color-muted);
  --palette-accent: var(--color-accent);
  --palette-accent-soft: var(--color-accent-soft);
  --radius-ui: var(--radius-control);

  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
}

html[data-theme="graphite"],
.surface--dark,
[data-surface="dark"] {
  --color-bg: var(--palette-1);
  --color-surface: var(--palette-2);
  --color-surface-raised: color-mix(in srgb, var(--palette-2), var(--palette-4) 4%);
  --color-shadow: var(--palette-3);
  --color-text: var(--palette-4);
  --color-body: var(--palette-5);
  --color-muted: var(--palette-6);
  --color-accent: var(--palette-7);
  --color-accent-soft: var(--palette-8);
  color-scheme: dark;
}

html[data-theme="ivory"],
.surface--light,
[data-surface="light"] {
  --color-bg: var(--palette-9);
  --color-surface: var(--palette-10);
  --color-surface-raised: color-mix(in srgb, var(--palette-10), white 28%);
  --color-shadow: var(--palette-11);
  --color-text: var(--palette-12);
  --color-body: var(--palette-13);
  --color-muted: var(--palette-14);
  --color-accent: var(--palette-15);
  --color-accent-soft: var(--palette-16);
  color-scheme: light;
}