/* =========================================================
   MetaWorks — Design Tokens
   Sourced from Figma (file lwLRfhEy8qApurwml9Nah7)
   ========================================================= */
:root {
  /* ---- Color: surfaces ---- */
  --color-bg: #151515;        /* Black/400 — page background */
  --color-surface-1: #1f1f1f; /* Black/200 */
  --color-surface-2: #171717; /* Black/300 */
  --color-surface-3: #101010; /* Black/500 — CTA / inset blocks */
  --color-line: #2e2e2e;      /* Black/100 — borders / grid lines */

  /* ---- Color: content ---- */
  --color-text: #e7eadd;      /* White/100 — primary text */
  --color-muted: #969696;     /* Grey/100 — secondary text */
  --color-primary: #00ffe1;   /* Primary/100 — accent (cyan) */
  --color-on-primary: #101010;/* text on a primary fill */

  /* ---- Typography: families ---- */
  --font-heading: "Ovo", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-brand: "Manrope", "Instrument Sans", ui-sans-serif, system-ui, sans-serif; /* wordmark in logo / branding */

  /* ---- Typography: scale (size / line-height) ---- */
  --h1: 64px;  --h1-lh: 1.2;
  --h2: 40px;  --h2-lh: 1.2;   /* Headings/H03 */
  --h4: 28px;  --h4-lh: 1.2;   /* Headings/H04 */
  --h5: 20px;  --h5-lh: 1;     /* Headings/H06 */
  --heading-tracking: -0.03em; /* ≈ -1.92 @ 64 */

  --body-lg: 24px; --body-lg-lh: 1.3;  /* Body/B02 */
  --body-md: 18px; --body-md-lh: 1.4;  /* Body/B04 */
  --body: 16px;    --body-lh: 1.4;     /* Body/B05 */
  --body-sm: 14px; --body-sm-lh: 1.4;  /* Body/B06 */

  --label: 16px;   --label-lh: 1;      /* Label/L01 (JetBrains Mono) */
  --label-sm: 14px;                    /* Label/L02 */

  /* ---- Layout ---- */
  --content-max: 1400px;
  --gutter: 32px;
  --nav-h: 80px;

  /* ---- Spacing scale ---- */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 150px;

  /* Section vertical rhythm — scales with viewport, caps at 150px */
  --section-pad: clamp(64px, 10vw, 150px);

  /* ---- Misc ---- */
  --radius: 8px;
  --radius-sm: 4px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.25s var(--ease);
}