/* ==========================================================
   Design tokens — change the brand look from here.
   ========================================================== */
:root {
  /* Colors */
  --color-bg: #0e0e10;
  --color-surface: #17171b;
  --color-surface-2: #1f1f25;
  --color-border: #2a2a31;
  --color-text: #f4f2ee;
  --color-muted: #9a98a3;
  --color-accent: #c6ff3d;      /* signature lime */
  --color-accent-ink: #0e0e10;  /* text on accent */
  --color-accent-2: #ff5e3a;    /* secondary pop */
  /* Typography */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: clamp(1.05rem, 0.9rem + 0.5vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  --fs-h2: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
  --fs-h1: clamp(2.3rem, 1rem + 6vw, 6.5rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: clamp(4rem, 3rem + 5vw, 8rem);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --radius: 18px;
  --radius-lg: 28px;
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}