/* ============================================================
   resamp — Design Tokens / variables.css
   The single source of truth for the visual system.
   Colours, fluid typography, spacing, motion, layers.
   ============================================================ */

:root {
  /* ---- Brand palette -------------------------------------- */
  --lime:            #8bff73;   /* Primary  — signal / highlight   */
  --lime-600:        #5fe84a;
  --lime-050:        #e9ffe1;
  --violet:          #9981f7;   /* Secondary — depth / accent      */
  --violet-600:      #7059ef;
  --violet-050:      #eeeaff;

  /* ---- Neutrals (warm, not pure) -------------------------- */
  --ink:             #0b0b0c;   /* near-black canvas / type        */
  --ink-800:         #141417;
  --ink-700:         #1c1c21;
  --ink-600:         #2a2a31;
  --bone:            #f4f3ee;   /* primary light canvas            */
  --bone-200:        #eceae1;
  --paper:          #fbfaf7;    /* raised light surface            */
  --line:           rgba(11,11,12,.12);
  --line-strong:    rgba(11,11,12,.22);
  --line-invert:    rgba(255,255,255,.14);

  /* ---- Semantic (light theme is default) ------------------ */
  --bg:              var(--bone);
  --bg-raised:       var(--paper);
  --fg:              var(--ink);
  --fg-muted:        rgba(11,11,12,.58);
  --fg-faint:        rgba(11,11,12,.34);
  --accent:          var(--violet);
  --accent-contrast: var(--lime);
  --selection-bg:    var(--lime);
  --selection-fg:    var(--ink);

  /* ---- Typography families -------------------------------- */
  --font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---- Fluid type scale (clamp: 360px → 1600px) ----------- */
  --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.90rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.20vw, 1.075rem);
  --step-1:  clamp(1.13rem, 1.05rem + 0.36vw, 1.40rem);
  --step-2:  clamp(1.40rem, 1.23rem + 0.75vw, 2.00rem);
  --step-3:  clamp(1.80rem, 1.45rem + 1.55vw, 3.05rem);
  --step-4:  clamp(2.30rem, 1.68rem + 2.75vw, 4.60rem);
  --step-5:  clamp(2.90rem, 1.85rem + 4.65vw, 6.80rem);
  --step-6:  clamp(3.40rem, 1.60rem + 8.00vw, 9.50rem);
  --step-7:  clamp(4.00rem, 0.30rem + 15.0vw, 14.0rem);

  /* ---- Tracking (Design-B: Montserrat, -38 → -0.038em) ---- */
  --tracking-display: -0.038em;
  --tracking-head:    -0.038em;
  --tracking-body:    -0.038em;
  --tracking-wide:     0.18em;

  --leading-tight:  0.98;
  --leading-snug:   1.08;
  --leading-body:   1.62;

  /* ---- Spacing scale -------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;
  /* fluid vertical rhythm between sections — generous whitespace reads
     as premium; the gap grows with the viewport but is capped on 4K. */
  --section-y: clamp(6rem, 3.5rem + 9vw, 12rem);

  /* ---- Layout --------------------------------------------- */
  /* Wide, but never edge-to-edge: the vw term keeps a breathing margin on
     small screens, the px cap stops the grid stretching on 4K displays. */
  --container:      min(94vw, 1800px);
  --container-tight:min(92vw, 1280px);
  --gutter:         clamp(1.25rem, 4vw, 3rem);
  --header-h:       78px;

  /* ---- Radii ---------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---- Shadows / elevation -------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11,11,12,.06), 0 4px 14px rgba(11,11,12,.05);
  --shadow-md: 0 10px 30px -12px rgba(11,11,12,.22);
  --shadow-lg: 0 40px 90px -30px rgba(11,11,12,.35);
  --shadow-lime: 0 20px 60px -18px rgba(139, 255, 115,.55);
  --shadow-violet: 0 24px 70px -22px rgba(153, 129, 247,.55);

  /* ---- Motion --------------------------------------------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:   cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 0.2s;
  --dur-2: 0.4s;
  --dur-3: 0.6s;
  --dur-4: 0.9s;
  --dur-5: 1.2s;

  /* ---- Z-index layers ------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 500;
  --z-menu: 700;
  --z-cursor: 900;
  --z-loader: 1000;
  --z-progress: 1100;
}

/* Dark scoping helper — apply to any full-bleed dark section */
.on-dark {
  --bg: var(--ink);
  --bg-raised: var(--ink-800);
  --fg: var(--bone);
  --fg-muted: rgba(244,243,238,.62);
  --fg-faint: rgba(244,243,238,.34);
  --line: var(--line-invert);
  --line-strong: rgba(255,255,255,.26);
  --accent-contrast: var(--lime);
  color: var(--fg);
  background-color: var(--bg);
}