:root {
  --color-navy-950: #07111f;
  --color-navy-900: #0b1a2e;
  --color-navy-800: #12263f;
  --color-surface: #f8f9fb;
  --color-surface-2: #f1f3f6;
  --color-white: #ffffff;
  --color-text: #1a1c1e;
  --color-text-muted: #5f6368;
  --color-border: #e8eaed;
  --color-accent: #ff5a1f;
  --color-accent-hover: #e64a12;
  --color-accent-soft: #fff1eb;
  --color-live: #d93025;
  --color-success: #188038;
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --container: 1240px;
  --gutter: 24px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(60, 64, 67, 0.08), 0 1px 3px 1px rgba(60, 64, 67, 0.06);
  --shadow-sm: 0 1px 2px rgba(60, 64, 67, 0.1), 0 2px 6px 2px rgba(60, 64, 67, 0.08);
  --shadow-md: 0 1px 3px rgba(60, 64, 67, 0.12), 0 4px 8px 3px rgba(60, 64, 67, 0.08);
  --shadow-header: 0 1px 2px rgba(60, 64, 67, 0.1), 0 2px 8px rgba(60, 64, 67, 0.1);
  --section-gap: 36px;
  --transition: 160ms cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --section-gap: 32px;
  }
}