/* ============================================================
   DESIGN TOKENS — Xavier Ninga portfolio
   Obsidian + molten gold (signature) + teal "live" signal.
   Credibility-first: generous space, strong metric type.
   ============================================================ */
:root {
  --obsidian:#0b0d10; --obsidian-2:#0e1115; --panel:#14181e; --panel-2:#1a2028;
  --line:#232b34; --line-2:#313b47;
  --mist:#ece9e1; --fog:#b6bcc4; --slate:#79828e;
  --gold:#d3a34a; --gold-bright:#f2cc7a; --gold-deep:#9c7328; --gold-glow:rgba(211,163,74,.16);
  --signal:#4fb89f; --signal-dim:#29564e; --signal-glow:rgba(79,184,159,.18);

  --f-display:"Space Grotesk",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --step--1:clamp(.8rem,.78rem + .1vw,.86rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.08rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.05rem);
  --step-3:clamp(2.1rem,1.6rem + 2.4vw,3.3rem);
  --step-4:clamp(2.8rem,2rem + 4vw,5.4rem);
  --step-metric:clamp(2.6rem,1.8rem + 3.6vw,4.4rem);

  --gutter:clamp(1.25rem,5vw,6rem);
  --sect-y:clamp(4.5rem,8vw,8.5rem);
  --maxw:1240px;
  --radius:14px; --radius-sm:8px;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 30px 60px -35px rgba(0,0,0,.85);
}