:root {
  --accent-hue: 225;
  --accent-chroma: 0.055;
  --accent-soft-chroma: 0.03;
  --accent-l: 0.58;
  --header-overlay-opacity: 0.58;
  --gutter-inline: clamp(0.95rem, 3vw, 2.1rem);

  --font-family-display: 'Avenir Next', 'Segoe UI Variable', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-family-body: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-family-ui: 'Inter', 'Avenir Next', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-scale: clamp(0.98rem, 0.22vw + 0.93rem, 1.12rem);
  --spacing-scale: clamp(0.92rem, 0.35vw + 0.84rem, 1.22rem);
  --detail-text-scale: 1;
  --print-scale: 0.96;

  --color-bg: oklch(0.965 0.012 250);
  --color-surface: oklch(0.993 0.005 250);
  --color-surface-2: oklch(0.978 0.008 250);
  --color-fg: oklch(0.22 0.02 255);
  --color-fg-muted: oklch(0.46 0.02 255);
  --color-border: oklch(0.84 0.02 250);
  --color-accent: oklch(0.58 var(--accent-chroma) var(--accent-hue));
  --color-accent-soft: oklch(0.93 var(--accent-soft-chroma) var(--accent-hue));
  --color-emphasis: oklch(0.42 calc(var(--accent-chroma) * 0.68) var(--accent-hue));

  /* Title gradient tokens — mode-adaptive lightness and boosted chroma.
   * Hue offsets in the gradient stops create analogous color variation;
   * chroma floors ensure visible saturation even for the neutral general accent.
   * See: docs/GRADIENT_REDUCED_MOTION_GUIDE.md */
  --t-l-peak: 0.50;
  --t-l-mid: 0.44;
  --t-l-base: 0.36;
  --t-chroma: clamp(0.15, calc(var(--accent-chroma) * 1.3), 0.24);
  --t-chroma-soft: clamp(0.10, calc(var(--accent-chroma) * 0.9), 0.18);

  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.4rem;

  --shadow-soft: 0 1rem 2rem -1.25rem rgb(5 9 26 / 0.35);
  --shadow-card: 0 1.5rem 2.5rem -1.5rem rgb(5 9 26 / 0.4);

  --max-width: 84rem;
  --section-gap: clamp(1rem, 0.6vw + 0.85rem, 1.8rem);
  --focus-ring: 0 0 0 0.2rem color-mix(in oklab, var(--color-accent) 32%, white);

  --text-relief: 0 1px 1px color-mix(in oklab, var(--color-surface) 72%, transparent);
  --text-relief-subtle: 0 1px 0 color-mix(in oklab, var(--color-surface) 56%, transparent);
}

@media screen and (min-width: 90rem) {
  :root {
    /* Keep generous gutters at HD so the content doesn't feel stretched
     * edge-to-edge — gives ~160-180px+ of white-space per side at 1440px. */
    --max-width: 72rem;
    --gutter-inline: clamp(2rem, 5vw, 5rem);
    --font-scale: clamp(1.02rem, 0.28vw + 0.95rem, 1.32rem);
    --spacing-scale: clamp(0.98rem, 0.35vw + 0.88rem, 1.48rem);
    --detail-text-scale: 1.02;
  }
}

@media screen and (min-width: 120rem) {
  :root {
    --max-width: 116rem;
    /* Increased from 1.28rem to 1.52rem for better UHD readability */
    --font-scale: clamp(1.08rem, 0.32vw + 0.98rem, 1.52rem);
    --spacing-scale: clamp(1.08rem, 0.38vw + 0.94rem, 1.72rem);
    --detail-text-scale: 1.08;
  }
}

@media screen and (min-width: 160rem) {
  :root {
    --max-width: 156rem;
    /* Increased from 1.42rem to 1.78rem for UHD viewing distance */
    --font-scale: clamp(1.14rem, 0.36vw + 1.04rem, 1.78rem);
    --spacing-scale: clamp(1.12rem, 0.42vw + 1rem, 2.04rem);
    --detail-text-scale: 1.28;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --accent-l: 0.72;
    --color-bg: oklch(0.22 0.012 255);
    --color-surface: oklch(0.26 0.012 255);
    --color-surface-2: oklch(0.30 0.012 255);
    --color-fg: oklch(0.92 0.01 250);
    --color-fg-muted: oklch(0.72 0.015 250);
    --color-border: oklch(0.38 0.015 252);
    --color-accent: oklch(0.72 var(--accent-chroma) var(--accent-hue));
    --color-accent-soft: oklch(0.34 var(--accent-soft-chroma) var(--accent-hue));
    --color-emphasis: oklch(0.86 calc(var(--accent-chroma) * 0.6) var(--accent-hue));
    --shadow-soft: 0 1rem 2rem -1.2rem rgb(0 0 0 / 0.5);
    --shadow-card: 0 1.6rem 2.8rem -1.5rem rgb(0 0 0 / 0.55);
    --focus-ring: 0 0 0 0.2rem color-mix(in oklab, var(--color-accent) 34%, black);
    --text-relief: 0 1px 2px rgb(0 0 0 / 0.28);
    --text-relief-subtle: 0 1px 1px rgb(0 0 0 / 0.24);

    --t-l-peak: 0.70;
    --t-l-mid: 0.64;
    --t-l-base: 0.58;
    --t-chroma: clamp(0.12, calc(var(--accent-chroma) * 1.2), 0.22);
    --t-chroma-soft: clamp(0.08, calc(var(--accent-chroma) * 0.85), 0.16);
  }
}

html[data-theme='dark'] {
  --accent-l: 0.72;
  --color-bg: oklch(0.22 0.012 255);
  --color-surface: oklch(0.26 0.012 255);
  --color-surface-2: oklch(0.30 0.012 255);
  --color-fg: oklch(0.92 0.01 250);
  --color-fg-muted: oklch(0.72 0.015 250);
  --color-border: oklch(0.38 0.015 252);
  --color-accent: oklch(0.72 var(--accent-chroma) var(--accent-hue));
  --color-accent-soft: oklch(0.34 var(--accent-soft-chroma) var(--accent-hue));
  --color-emphasis: oklch(0.86 calc(var(--accent-chroma) * 0.6) var(--accent-hue));
  --shadow-soft: 0 1rem 2rem -1.2rem rgb(0 0 0 / 0.5);
  --shadow-card: 0 1.6rem 2.8rem -1.5rem rgb(0 0 0 / 0.55);
  --focus-ring: 0 0 0 0.2rem color-mix(in oklab, var(--color-accent) 34%, black);
  --text-relief: 0 1px 2px rgb(0 0 0 / 0.35);
  --text-relief-subtle: 0 1px 1px rgb(0 0 0 / 0.24);
  --header-overlay-opacity: 0.72;

  --t-l-peak: 0.70;
  --t-l-mid: 0.64;
  --t-l-base: 0.58;
  --t-chroma: clamp(0.12, calc(var(--accent-chroma) * 1.2), 0.22);
  --t-chroma-soft: clamp(0.08, calc(var(--accent-chroma) * 0.85), 0.16);
}

html[data-theme='light'] {
  --accent-l: 0.58;
  --color-bg: oklch(0.965 0.012 250);
  --color-surface: oklch(0.993 0.005 250);
  --color-surface-2: oklch(0.978 0.008 250);
  --color-fg: oklch(0.22 0.02 255);
  --color-fg-muted: oklch(0.46 0.02 255);
  --color-border: oklch(0.84 0.02 250);
  --color-accent: oklch(0.58 var(--accent-chroma) var(--accent-hue));
  --color-accent-soft: oklch(0.93 var(--accent-soft-chroma) var(--accent-hue));
  --color-emphasis: oklch(0.42 calc(var(--accent-chroma) * 0.68) var(--accent-hue));
  --shadow-soft: 0 1rem 2rem -1.25rem rgb(5 9 26 / 0.35);
  --shadow-card: 0 1.5rem 2.5rem -1.5rem rgb(5 9 26 / 0.4);
  --focus-ring: 0 0 0 0.2rem color-mix(in oklab, var(--color-accent) 32%, white);
  --text-relief: 0 1px 1px color-mix(in oklab, var(--color-surface) 72%, transparent);
  --text-relief-subtle: 0 1px 0 color-mix(in oklab, var(--color-surface) 56%, transparent);
  --header-overlay-opacity: 0.58;

  --t-l-peak: 0.50;
  --t-l-mid: 0.44;
  --t-l-base: 0.36;
  --t-chroma: clamp(0.15, calc(var(--accent-chroma) * 1.3), 0.24);
  --t-chroma-soft: clamp(0.10, calc(var(--accent-chroma) * 0.9), 0.18);
}

/* Progressive HDR: ~15% chroma boost for P3 wide-gamut displays */
@media (color-gamut: p3) {
  :root {
    --p3-chroma-boost: 1.15;
  }
}

/* Progressive HDR: ~20% chroma boost for full HDR displays */
@media (dynamic-range: high) {
  :root {
    --p3-chroma-boost: 1.2;
  }
}