/* ==========================================================================
   THE HEIGHTS STUDIO — DESIGN TOKENS
   Palette derived directly from the brand assets:
   · Chrome logo render  → chrome silver + electric blue
   · LAHAI neon sign     → volt green
   · Studio LED strips   → violet / magenta
   · Photography base    → near-black
   ========================================================================== */

:root {
  /* ---- Surface ---- */
  --ink:        #05060a;   /* absolute base */
  --bg:         #08090e;   /* page background */
  --bg-2:       #0c0e14;   /* raised surface */
  --bg-3:       #12141c;   /* card / input */
  --bg-4:       #191c26;   /* hover surface */
  --line:       rgba(255, 255, 255, 0.10);
  --line-soft:  rgba(255, 255, 255, 0.055);
  --line-hard:  rgba(255, 255, 255, 0.20);

  /* ---- Type ---- */
  --fg:         #f4f6f9;
  --fg-2:       rgba(244, 246, 249, 0.72);
  --fg-3:       rgba(244, 246, 249, 0.48);
  --fg-4:       rgba(244, 246, 249, 0.30);

  /* ---- Brand ---- */
  --volt:       #2bff88;   /* LAHAI neon green — primary interactive accent */
  --volt-deep:  #00c95f;
  --volt-glow:  rgba(43, 255, 136, 0.34);
  --electric:   #2a7bff;   /* chrome-logo blue — secondary */
  --electric-2: #0a4bd6;
  --violet:     #8b5cff;   /* studio LED — atmosphere only */
  --magenta:    #ff3d9a;

  --chrome-1:   #ffffff;
  --chrome-2:   #cfd6e2;
  --chrome-3:   #7d8798;
  --chrome-4:   #454c5c;

  /* ---- Status ---- */
  --success:    #2bff88;
  --warning:    #ffb020;
  --error:      #ff4d5e;
  --info:       #2a7bff;

  /* ---- Typography ---- */
  --f-display: "Archivo", "Archivo Expanded", "Helvetica Neue", Impact, sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale — 360px → 1920px */
  --t-micro:  clamp(0.625rem, 0.60rem + 0.10vw, 0.6875rem);
  --t-label:  clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  --t-sm:     clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --t-base:   clamp(0.9375rem, 0.90rem + 0.18vw, 1.0625rem);
  --t-lg:     clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);
  --t-xl:     clamp(1.25rem, 1.12rem + 0.55vw, 1.75rem);
  --t-2xl:    clamp(1.625rem, 1.35rem + 1.20vw, 2.75rem);
  --t-3xl:    clamp(2.25rem, 1.70rem + 2.40vw, 4.5rem);
  --t-4xl:    clamp(2.75rem, 1.60rem + 5.00vw, 8rem);
  --t-mega:   clamp(3.25rem, 0.60rem + 11.5vw, 15rem);

  /* ---- Space ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;    --s-11: 12rem;

  --gutter:   clamp(1.25rem, 4vw, 5rem);
  --section:  clamp(5rem, 11vh, 11rem);
  --maxw:     1560px;
  --maxw-text: 68ch;

  /* ---- Motion ---- */
  --e-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --e-inout: cubic-bezier(0.72, 0, 0.16, 1);
  --e-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --d-1: 0.24s;  --d-2: 0.45s;  --d-3: 0.75s;  --d-4: 1.1s;

  /* ---- Chrome / Depth ---- */
  --radius: 2px;
  --radius-lg: 4px;
  --nav-h: 76px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 18px 44px -18px rgba(0,0,0,.85);
  --shadow-3: 0 40px 90px -30px rgba(0,0,0,.9);
  --shadow-volt: 0 0 0 1px rgba(43,255,136,.4), 0 12px 40px -12px var(--volt-glow);

  --grad-chrome: linear-gradient(168deg, #ffffff 0%, #e6ebf3 26%, #98a2b4 52%, #ffffff 68%, #6f7a8c 88%, #cdd5e1 100%);
  --grad-volt:   linear-gradient(100deg, var(--volt) 0%, #7dffc0 100%);
  --grad-fade:   linear-gradient(to bottom, transparent, var(--bg));

  color-scheme: dark;
}

@media (max-width: 860px) {
  :root { --nav-h: 62px; }
}