:root {
  --font-heading: "Play", sans-serif;
  --font-body: "Arial", "Helvetica Neue", sans-serif;
  --font-scale: 1;

  --color-bg: #00162b;
  --color-bg-soft: #041e35;
  --color-surface: rgba(7, 29, 49, 0.78);
  --color-surface-strong: #0a243d;
  --color-surface-soft: rgba(255, 255, 255, 0.03);
  --color-border: rgba(86, 113, 143, 0.65);
  --color-border-strong: rgba(86, 113, 143, 0.9);
  --color-text: #ffffff;
  --color-text-muted: #56718f;
  --color-accent: #ff7f66;
  --color-accent-soft: rgba(255, 127, 102, 0.16);
  --color-panel: #dde4eb;
  --color-panel-text: #0c1a28;

  --gradient-page:
    radial-gradient(circle at 18% 12%, rgba(92, 111, 170, 0.14), transparent 28%),
    radial-gradient(circle at 82% 9%, rgba(255, 126, 102, 0.1), transparent 20%),
    linear-gradient(180deg, #00162b 0%, #00162b 100%);
  --gradient-card:
    linear-gradient(135deg, rgba(3, 18, 33, 0.74) 0%, rgba(19, 25, 33, 0.35) 100%);
  --gradient-footer:
    linear-gradient(115deg, #00162b 14%, #17273a 56%, #34465b 100%);
  --gradient-button:
    linear-gradient(135deg, rgba(3, 18, 33, 0.78) 0%, rgba(31, 43, 58, 0.52) 100%);

  --shadow-soft: 0 16px 36px rgba(0, 7, 16, 0.22);
  --shadow-card: -3px 4px 18px rgba(2, 18, 33, 0.68);
  --shadow-panel: 0 14px 28px rgba(0, 8, 20, 0.32);

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --container-max: 85rem;
  --container-padding: 2.5rem;
  --header-height: 6rem;
  --header-height-mobile: 5rem;

  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;
}

html[data-font-size="large"] {
  --font-scale: 1.12;
}

html[data-color-mode="mono"] .site-shell {
  filter: grayscale(1);
}

@media (max-width: 64rem) {
  :root {
    --container-padding: 1.25rem;
  }
}