/* =========================================================================
   KOMAPE — Design tokens
   ========================================================================= */
:root{
  --font-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --bg: #060a10;
  --bg-soft: #0a0f17;
  --bg-elev: #0e141d;

  --surface: rgba(255,255,255,.045);
  --surface-strong: rgba(255,255,255,.08);
  --surface-hover: rgba(255,255,255,.1);

  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.18);

  --text: #f4f7f6;
  --text-muted: rgba(244,247,246,.68);
  --text-faint: rgba(244,247,246,.42);

  --green: #17e08a;
  --green-2: #06c199;
  --green-soft: rgba(23,224,138,.14);
  --green-glow: rgba(23,224,138,.45);

  --red: #ff5470;
  --red-2: #ff2e63;
  --red-soft: rgba(255,84,112,.13);
  --red-glow: rgba(255,84,112,.4);

  --amber: #ffb703;
  --amber-2: #fb8500;
  --amber-soft: rgba(255,183,3,.14);
  --amber-glow: rgba(255,183,3,.45);

  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 24px;
  --radius-xl: 32px;

  --ease: cubic-bezier(.16,.8,.24,1);
  --ease-out-back: cubic-bezier(.2,1.1,.3,1);

  --container: 1240px;
  --pad: clamp(20px, 5vw, 64px);

  --shadow-1: 0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-2: 0 30px 80px -24px rgba(0,0,0,.7);

  --fs-hero: clamp(2.6rem, 3.2vw + 1.6rem, 5.4rem);
  --fs-h2: clamp(1.9rem, 1.6vw + 1.4rem, 3rem);
  --fs-lead: clamp(1.05rem, .3vw + .95rem, 1.3rem);
  --fs-body: clamp(1rem, .15vw + .93rem, 1.08rem);
}