/* NUDO — design tokens
   Single source of truth for colors, type scale, spacing, motion.
   Edit values here; every other stylesheet consumes these vars. */

:root {
  /* ── color: brand ───────────────────────────────────────────── */
  --c-ink:        #0a0a0a;   /* near-black: primary background */
  --c-ink-soft:   #141414;   /* elevated surfaces, cards */
  --c-line:       #1f1f1f;   /* borders on dark */
  --c-line-soft:  #2a2a2a;
  --c-paper:      #ffffff;   /* primary text on dark */
  --c-paper-dim:  #b4b4b4;   /* secondary text */
  --c-paper-mute: #6e6e6e;   /* tertiary */

  /* ── color: purple gradient (dark → light, left → right) ───── */
  --c-purple-deep:   #3D0B92;
  --c-purple-core:   #7A07D9;
  --c-purple-bright: #8B47FF;

  --grad-purple: linear-gradient(
    90deg,
    var(--c-purple-deep) 0%,
    var(--c-purple-core) 50%,
    var(--c-purple-bright) 100%
  );

  --grad-purple-diag: linear-gradient(
    135deg,
    var(--c-purple-deep) 0%,
    var(--c-purple-core) 50%,
    var(--c-purple-bright) 100%
  );

  /* halo / glow for accents */
  --halo-purple: 0 0 80px -10px rgba(122, 7, 217, 0.55);
  --halo-purple-soft: 0 0 120px -20px rgba(139, 71, 255, 0.35);

  /* ── typography ─────────────────────────────────────────────── */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid type scale (mobile → desktop) */
  --fs-mega:   clamp(2.75rem, 8vw + 1rem, 7.5rem);   /* hero headline */
  --fs-h1:     clamp(2rem,   5vw + 0.5rem, 4.5rem);  /* section titles */
  --fs-h2:     clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
  --fs-h3:     clamp(1.125rem, 1vw + 0.75rem, 1.5rem);
  --fs-body:   clamp(1rem, 0.4vw + 0.875rem, 1.125rem);
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-tight: -0.03em;
  --tracking-snug:  -0.015em;
  --tracking-wide:  0.08em;
  --tracking-mega:  0.18em;  /* eyebrows, labels */

  /* ── spacing scale ──────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* layout */
  --container:    1240px;
  --container-sm: 720px;
  --gutter:       clamp(20px, 4vw, 48px);

  /* ── motion ─────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   180ms;
  --d-medium: 320ms;
  --d-slow:   600ms;

  /* radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-pill: 999px;

  /* z */
  --z-bg:    -1;
  --z-base:   0;
  --z-raised: 10;
  --z-nav:    50;
  --z-top:    100;
}