/* ============================================================
   LUUQ STUDIO — DESIGN TOKENS
   Change anything here and it cascades across the whole site.
   (colors · type · spacing · radius · motion · layout)
   ============================================================ */

:root {
  /* ---- Brand gradient (the ONE accent system) ---------------- */
  --c-blue:    #4f7cff;   /* electric blue  */
  --c-indigo:  #7a6bff;   /* indigo-violet  */
  --c-violet:  #8b5cf6;   /* violet         */
  --c-magenta: #8b5cf6;   /* magenta        */
  --gradient:  linear-gradient(100deg, var(--c-blue) 0%, var(--c-indigo) 42%, var(--c-violet) 70%, var(--c-magenta) 100%);
  --gradient-soft: linear-gradient(100deg, #4f7cff33, #8b5cf633);

  /* ---- Near-black canvas (layered, NOT pure black) ----------- */
  --bg:          #08080a;
  --bg-elev-1:   #0e0e12;
  --bg-elev-2:   #15151b;
  --surface:     rgba(255,255,255,0.025);
  --surface-2:   rgba(255,255,255,0.045);

  /* ---- Ink -------------------------------------------------- */
  --text:        #f3f3f6;   /* paper white, not #fff */
  --text-muted:  #9b9ba7;
  --text-faint:  #86868f;   /* raised for WCAG AA (~5.5:1 on --bg) */

  /* ---- Lines & rings ---------------------------------------- */
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --ring:          color-mix(in srgb, var(--c-indigo) 70%, white 0%);

  /* ---- State accents ---------------------------------------- */
  --accent:      var(--c-indigo);
  --accent-2:    var(--c-magenta);

  /* ---- Typography ------------------------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-sans:    "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* Fluid type scale (clamp: min · preferred · max) */
  --fs-eyebrow: 0.78rem;
  --fs-body:    clamp(.95rem, .93rem + .12vw, 1.02rem);
  --fs-lead:    clamp(1.05rem, .98rem + .35vw, 1.2rem);
  --fs-h3:      clamp(1.15rem, 1.04rem + .5vw, 1.45rem);
  --fs-h2:      clamp(1.55rem, 1.25rem + 1.4vw, 2.5rem);
  --fs-display: clamp(2rem, 1.25rem + 3vw, 3.9rem);
  --fs-mega:    clamp(2.4rem, 1.2rem + 4.4vw, 5rem);
  --fs-statement: clamp(1.7rem, 1.2rem + 1.9vw, 3rem);  /* big editorial "beyond" statements */

  --lh-tight:   1.02;
  --lh-snug:    1.14;
  --lh-body:    1.6;

  --track-tight:  -0.03em;   /* display */
  --track-snug:   -0.015em;  /* headings */
  --track-normal: 0em;
  --track-wide:   0.18em;    /* mono eyebrows / caps */

  --w-light:  300;
  --w-regular:400;
  --w-medium: 500;
  --w-bold:   700;

  /* ---- Spacing scale (4px base) ----------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem;  --sp-8: 2rem;   --sp-12: 3rem;  --sp-16: 4rem;
  --sp-24: 6rem;   --sp-32: 8rem;  --sp-40: 10rem;

  /* Section vertical rhythm (fluid) — tightened for density */
  --section-y:    clamp(2.75rem, 2rem + 2.4vw, 4.75rem);
  --section-y-sm: clamp(2rem, 1.5rem + 1.5vw, 3.25rem);   /* statement / cta sections */
  --section-y-lg: clamp(3.5rem, 2.4rem + 3.2vw, 6.5rem);  /* anchor sections (roadmap, bento) */

  /* ---- Radius ----------------------------------------------- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-full: 999px;

  /* ---- Layout ----------------------------------------------- */
  --container: 1240px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---- Elevation (used sparingly) --------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 10px 40px -12px rgba(0,0,0,.7);
  --glow-1: 0 0 0 1px var(--border), 0 20px 60px -20px rgba(122,107,255,.35);

  /* ---- Motion ----------------------------------------------- */
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out (UI in/out) */
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);     /* movement across screen */
  --ease-ios:   cubic-bezier(0.32, 0.72, 0, 1);      /* drawer feel */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;

  /* ---- Z-index ---------------------------------------------- */
  --z-bg: 0; --z-content: 1; --z-header: 50; --z-cursor: 90; --z-loader: 100;

  color-scheme: dark;
}