/* ============================================================
   INVERSA design tokens — Lata Panoura portfolio
   Dark topographic field terminal. No shadows, single accent,
   radius ≤ 3.6px, body text ≥ 18px.
   ============================================================ */

:root {
  /* Colors */
  --color-obsidian-loam: #13140e;   /* page canvas, near-black with olive cast */
  --color-bone-vellum: #f4f3e8;     /* primary text, warm off-white */
  --color-iron-filings: #404040;    /* hairline borders, dividers */
  --color-drift-ash: #84837b;       /* muted secondary text, placeholders */
  --color-lime-surveyor: #ebfc72;   /* sole chromatic accent */
  --color-marsh-olive: #bacd31;     /* gradient transition stop for lime */

  /* Typography — font families */
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Typography — scale */
  --text-caption: 13px;
  --leading-caption: 1.2;
  --tracking-caption: 0px;

  --text-body: 18px;
  --leading-body: 1.62;
  --tracking-body: -0.54px;

  --text-subheading: 29px;
  --leading-subheading: 1.28;
  --tracking-subheading: 0px;

  --text-heading: 58px;
  --leading-heading: 1.06;
  --tracking-heading: -1.74px;

  --text-display: 72px;
  --leading-display: 0.9;
  --tracking-display: -2.16px;

  /* Typography — weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-7: 7px;
  --spacing-14: 14px;
  --spacing-18: 18px;
  --spacing-21: 21px;
  --spacing-29: 29px;
  --spacing-59: 59px;
  --spacing-86: 86px;
  --spacing-104: 104px;
  --spacing-119: 119px;

  /* Layout */
  --page-max-width: 1200px;

  /* Border radius — cards 0px, interactive 3.6px max */
  --radius: 3.6px;
}

/* ============================================================
   Minimal base layer
   ============================================================ */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  background: #13140e;
  color: #f4f3e8;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}