/* Xtreme Origin design tokens. Layout and colour language follow the Overtake reference (see REFERENCE.md). */
:root {
  /* Surfaces */
  --white: #ffffff;
  --light: #f0f0f0;
  --light-2: #f7f7f7;
  --ink: #0b0b0c;
  --ink-2: #171718;
  --ink-3: #232325;
  --green: #122020;
  --green-2: #1e2b2b;

  /* Text */
  --text: #0b0b0c;
  --text-muted: #6a6e6e;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #b7bcbc;

  /* Accents */
  --lime: #9efc65;
  --pink: #ffbcfc;
  --butter: #fde589;

  /* Lines */
  --hairline-light: rgba(11, 11, 12, 0.1);
  --hairline-dark: rgba(255, 255, 255, 0.1);
  --guide-light: rgba(11, 11, 12, 0.05);
  --guide-dark: rgba(255, 255, 255, 0.06);

  /* Glass */
  --glass-light-bg: rgba(255, 255, 255, 0.55);
  --glass-light-border: rgba(255, 255, 255, 0.85);
  --glass-dark-bg: rgba(18, 32, 32, 0.45);
  --glass-dark-border: rgba(255, 255, 255, 0.16);
  --glass-blur: blur(18px) saturate(140%);

  /* Type */
  --font-sans: "Switzer", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-display: clamp(44px, 6.2vw, 92px);
  --fs-h1: clamp(42px, 5.7vw, 84px);
  --fs-h2: clamp(34px, 3.7vw, 54px);
  --fs-h3: clamp(24px, 2.2vw, 34px);
  --fs-lead: clamp(24px, 2.6vw, 38px);
  --fs-body: clamp(16px, 1.15vw, 18px);
  --fs-small: 14px;
  --fs-tag: 12px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --track-tight: -0.03em;
  --track-snug: -0.02em;

  /* Shape */
  --r-pill: 100px;
  --r-slab: 30px;
  --r-card: 26px;
  --r-media: 20px;
  --r-chip: 12px;

  /* Depth */
  --shadow-btn: 0 5px 14px rgba(11, 11, 12, 0.45), 0 14px 50px rgba(11, 11, 12, 0.45);
  --shadow-lime: 0 5px 14px rgba(158, 252, 101, 0.5), 0 14px 50px rgba(158, 252, 101, 0.5);
  --shadow-card: 0 30px 70px rgba(11, 11, 12, 0.14);
  --shadow-soft: 0 2px 4px rgba(5, 8, 12, 0.08);

  /* Layout */
  --inset: 30px;
  --container: 1180px;
  --gutter: 24px;
  --header-h: 80px;
  --section-gap: clamp(90px, 11vw, 160px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 810px) {
  :root {
    --inset: 12px;
    --gutter: 18px;
    --r-slab: 24px;
    --r-card: 22px;
    --header-h: 68px;
  }
}