/* ============================================================
   DESIGN TOKENS — Indiesign Studio
   Single source of truth for color, type, space, motion.
   Change values here; never hard-code them in components.
   ============================================================ */

:root {
  /* ---- Color: surfaces --------------------------------- */
  --color-bg:        #0e0e0f;   /* page background (warm near-black) */
  --color-bg-soft:   #141416;   /* raised panels / alt sections      */
  --color-surface:   #1a1a1d;   /* cards                              */
  --color-surface-2: #212125;   /* card hover / nested                */

  /* ---- Color: ink -------------------------------------- */
  --color-text:      #f4f1eb;   /* primary cream-white               */
  --color-text-dim:  #a4a39e;   /* secondary / body                  */
  --color-text-mute: #6d6c69;   /* labels, meta, captions            */

  /* ---- Color: brand ------------------------------------ */
  --color-accent:        #e54b27;   /* terracotta red (logo, CTAs)   */
  --color-accent-hover:  #f25a35;
  --color-accent-ink:    #ffffff;   /* text on accent                */

  /* ---- Color: lines & overlays ------------------------- */
  --color-line:      rgba(244, 241, 235, 0.10);
  --color-line-soft: rgba(244, 241, 235, 0.06);
  --color-scrim:     rgba(0, 0, 0, 0.55);

  /* ---- Typography -------------------------------------- */
  --font-sans: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (min .. max across 360px .. 1440px) */
  --fs-display: clamp(2.75rem, 1.2rem + 6.8vw, 6.5rem);   /* CTA hero      */
  --fs-h1:      clamp(2.25rem, 1.2rem + 4.6vw, 4.75rem);  /* hero headline */
  --fs-h2:      clamp(1.9rem, 1.2rem + 3.1vw, 3.5rem);    /* section head  */
  --fs-h3:      clamp(1.4rem, 1.05rem + 1.5vw, 2rem);     /* card title    */
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); /* body lead     */
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-label:   0.8125rem;   /* eyebrow / overline */

  --lh-tight: 1.04;
  --lh-snug:  1.16;
  --lh-body:  1.5;

  --tracking-label: 0.14em;
  --tracking-tight: -0.02em;

  /* ---- Spacing scale (8px base) ------------------------ */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  --section-y: clamp(5rem, 3rem + 9vw, 11rem);  /* vertical section rhythm */

  /* ---- Layout ------------------------------------------ */
  --container:   1320px;
  --gutter:      clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --radius-sm:   10px;
  --radius:      18px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* ---- Motion ------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.25s;
  --dur:        0.5s;
  --dur-slow:   0.8s;

  /* ---- Elevation --------------------------------------- */
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);

  /* ---- Z-index ----------------------------------------- */
  --z-nav:    100;
  --z-cursor: 200;
}

/* Honor reduced-motion at the token level too */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
  }
}