:root {
  --color-bg: #ffffff;
  --color-bg-soft: #edebeb;
  --color-surface: #ffffff;
  --color-surface-2: #edebeb;
  --color-text: #111111;
  --color-muted: #4a4f55;
  --color-faint: #6f757c;
  --color-accent: #114a43;
  --color-accent-strong: #0c3833;
  --color-accent-dim: rgba(17, 74, 67, 0.12);
  --color-lime: #d1de6f;
  --color-data: #114a43;
  --color-data-dim: rgba(17, 74, 67, 0.14);
  --color-critical: #c97a6a;
  --color-ok: #3d8a62;
  --color-border: rgba(17, 17, 17, 0.08);
  --color-border-strong: rgba(17, 17, 17, 0.16);
  --color-line: rgba(196, 165, 116, 0.5);
  --color-overlay: rgba(255, 255, 255, 0.58);
  --color-overlay-deep: rgba(17, 17, 17, 0.72);
  --color-white: #ffffff;
  --color-black: #111111;
  --color-focus: #114a43;
  --color-tab-active: #d1de6f;

  --font: "Onest", "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: clamp(1.75rem, 3.4vw, 3.25rem);
  --font-size-display: clamp(2.15rem, 4.2vw + 1rem, 4.6rem);
  --font-size-section: clamp(2rem, 4.4vw, 4rem);
  --letter-display: 0.06em;
  --letter-ui: 0.14em;
  --letter-eyebrow: 0.22em;

  --container: 1320px;
  --container-wide: 1600px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);
  --header-h: 82px;
  --radius: 2px;
  --radius-media: 20px;
  --radius-pill: 999px;

  --shadow-soft: 0 18px 48px rgba(17, 17, 17, 0.08);
  --transition: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 800ms;

  --grid-line: rgba(17, 17, 17, 0.05);
  --z-header: 40;
  --z-nav: 50;
  --z-overlay: 60;
}

@media (min-width: 2560px) {
  :root {
    --container: 1480px;
    --container-wide: 1760px;
    --font-size-display: 4.6rem;
  }
}