/* Material 3-inspired semantic tokens for the public site.
 * Keep these roles independent from component selectors so future light/dark
 * themes and page-specific surfaces can be added without rewriting layout CSS.
 */
:root {
  /* The public editorial system. Component CSS consumes these roles instead
     of baking page, surface, or interaction colors into selectors. */
  --site-color-page: #f6f8fb;
  --site-color-surface: #ffffff;
  --site-color-surface-subtle: #eef2f7;
  --site-color-surface-raised: #ffffff;
  --site-color-text: #172033;
  --site-color-text-muted: #526078;
  --site-color-text-faint: #6d7890;
  --site-color-border: #d8dfeb;
  --site-color-border-strong: #b6c1d2;
  --site-color-accent: #2457a6;
  --site-color-accent-strong: #173f7a;
  --site-color-accent-soft: #e5eefc;
  --site-color-focus: #0b63ce;
  --site-content-width: 76rem;
  --site-reading-width: 70ch;
  --site-radius-sm: 0.3rem;
  --site-radius-md: 0.55rem;
  --site-radius-lg: 0.8rem;
  --site-space-1: 0.35rem;
  --site-space-2: 0.65rem;
  --site-space-3: 1rem;
  --site-space-4: 1.5rem;
  --site-space-5: 2rem;
  --site-space-6: 3rem;
  --site-control-min: 2.75rem;

  --md-sys-color-primary: #2457a6;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e5eefc;
  --md-sys-color-on-primary-container: #173f7a;
  --md-sys-color-secondary: #526078;
  --md-sys-color-secondary-container: #e8edf4;
  --md-sys-color-on-secondary-container: #27344a;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-surface-container-low: #f6f8fb;
  --md-sys-color-surface-container: #eef2f7;
  --md-sys-color-surface-container-high: #e1e7f0;
  --md-sys-color-on-surface: #172033;
  --md-sys-color-on-surface-variant: #526078;
  --md-sys-color-outline: #6d7890;
  --md-sys-color-outline-variant: #d8dfeb;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-shadow: #172033;
  --md-sys-color-inverse-surface: #172033;
  --md-sys-color-on-inverse-surface: #ffffff;
  /* Typography roles stay semantic so a future theme can change type without
     changing component selectors. */
  --md-sys-typescale-body-large: 1.05rem;
  --md-sys-typescale-body-medium: 0.95rem;
  --md-sys-typescale-label-large: 0.85rem;
  --md-sys-typescale-title-large: 1.55rem;
  --md-sys-typescale-display-small: 2.6rem;

  /* Shared layout rhythm for server-rendered pages. */
  --md-sys-spacing-xs: 0.35rem;
  --md-sys-spacing-sm: 0.65rem;
  --md-sys-spacing-md: 1rem;
  --md-sys-spacing-lg: 1.5rem;
  --md-sys-spacing-xl: 2rem;

  /* Elevation is intentionally restrained for the editorial surfaces. */
  --md-sys-elevation-level1: 0 0.2rem 0.8rem color-mix(in srgb, var(--md-sys-color-shadow) 6%, transparent);
  --md-sys-elevation-level2: 0 0.12rem 0.5rem color-mix(in srgb, var(--md-sys-color-shadow) 8%, transparent);
  --md-sys-color-topic: #2457a6;
  --md-sys-color-concept: #c2410c;
  --md-sys-color-entity: #2563eb;
  --md-sys-color-technique: #7c3aed;
  --md-sys-color-article: #64748b;

  --md-ref-typeface-brand: "Syne", "Avenir Next", "Segoe UI", sans-serif;
  --md-ref-typeface-plain: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --md-ref-shape-corner-small: 0.35rem;
  --md-ref-shape-corner-medium: 0.65rem;
  --md-ref-shape-corner-large: 1rem;

  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Reserved for the follow-up theme slice; the public site remains light
       until every page has a dark-theme contrast review. */
    color-scheme: light;
  }
}