/* ==========================================================================
   BALI ARCHVIZ — DESIGN TOKENS
   Palette: deep navy blueprint base, single cyan "render" accent.
   Type: Poppins (display) / Inter (body) / JetBrains Mono (viewport HUD data)
   ========================================================================== */

:root{
  /* ---- Color: Navy / Blueprint base ------------------------------------ */
  --navy-950:#04070d;
  --navy-900:#070b14;
  --navy-800:#0c1220;
  --navy-700:#131b2e;
  --navy-600:#1b2438;
  --navy-500:#26314a;

  /* ---- Color: Cyan render accent ---------------------------------------- */
  --cyan-300:#7fe9f5;
  --cyan-400:#3fd8ec;
  --cyan-500:#1ec6df;
  --cyan-glow: 62,216,236;   /* rgb triplet for rgba() glows */

  /* ---- Color: Neutrals ---------------------------------------------------*/
  --white:#f6f8fb;
  --ink-100:#c7d0e0;
  --ink-300:#93a1b8;
  --ink-500:#5f6d85;
  --ink-700:#39435a;

  /* ---- Surfaces / Glass -------------------------------------------------*/
  --glass-fill: rgba(18,26,44,0.46);
  --glass-fill-strong: rgba(11,16,28,0.72);
  --glass-border: rgba(255,255,255,0.09);
  --glass-border-strong: rgba(127,233,245,0.28);
  --glass-blur: 22px;
  --glass-blur-lg: 34px;

  /* ---- Gradients ----------------------------------------------------------*/
  --grad-brand: linear-gradient(135deg, #2fd7ec 0%, #1e6fb8 55%, #0c1a3a 100%);
  --grad-border: linear-gradient(135deg, rgba(127,233,245,.65), rgba(127,233,245,0) 40%, rgba(127,233,245,.25) 100%);
  --grad-bg-mesh:
    radial-gradient(60% 55% at 12% 8%, rgba(31,120,150,.35), transparent 60%),
    radial-gradient(45% 40% at 88% 18%, rgba(62,216,236,.14), transparent 60%),
    radial-gradient(60% 60% at 50% 100%, rgba(20,40,70,.55), transparent 65%);

  /* ---- Typography ---------------------------------------------------------*/
  --font-display:'Poppins', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', 'Courier New', monospace;

  --fs-xs: clamp(.72rem, .68rem + .18vw, .8rem);
  --fs-sm: clamp(.86rem, .82rem + .18vw, .95rem);
  --fs-base: clamp(1rem, .96rem + .2vw, 1.08rem);
  --fs-md: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-lg: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-xl: clamp(2.1rem, 1.7rem + 2vw, 3.1rem);
  --fs-2xl: clamp(2.8rem, 2.1rem + 3.6vw, 4.6rem);
  --fs-3xl: clamp(3.4rem, 2.4rem + 5vw, 6rem);

  /* ---- Spacing scale (8px base) --------------------------------------------*/
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --sp-9:6rem; --sp-10:8rem;

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

  /* ---- Shadow -----------------------------------------------------------*/
  --shadow-sm: 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-md: 0 24px 60px -20px rgba(0,0,0,.65);
  --shadow-lg: 0 40px 100px -30px rgba(0,0,0,.75);
  --shadow-glow: 0 0 0 1px rgba(var(--cyan-glow),.15), 0 0 40px -6px rgba(var(--cyan-glow),.35);

  /* ---- Layout -----------------------------------------------------------*/
  --max-w: 1400px;
  --nav-h: 84px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
  --dur-fast:.22s; --dur-med:.5s; --dur-slow:.9s;

  /* ---- Hero text (theme-invariant) ---------------------------------------
     The hero always sits on a dark video + scrim, in both dark and light
     site themes, so its text must NOT flip with --white/--ink-* below (that
     was the light-mode readability bug). Deliberately blue-tinted rather
     than neutral grey to stay premium instead of muddy. */
  --hero-heading:#f6fafd;
  --hero-body:#bfdcf0;
  --hero-muted:#8fb8d6;

  /* ---- Hero glass (theme-invariant) ---------------------------------------
     The floating HUD cards (viewport/analytics/network) and the navbar's
     icon/lang controls also sit on top of the dark hero video while
     unscrolled, so — same reasoning as --hero-heading above — their glass
     fill, border and secondary text must stay fixed dark-glass/light-text
     instead of flipping with --glass-fill/--ink-* in light mode. */
  --hero-glass-fill: rgba(9,14,26,.55);
  --hero-glass-fill-strong: rgba(7,11,20,.75);
  --hero-glass-border: rgba(255,255,255,.14);
  --hero-glass-border-strong: rgba(127,233,245,.32);
  --hero-glass-track: rgba(255,255,255,.14);

  color-scheme: dark;
}

/* ---- Light mode override --------------------------------------------------*/
:root[data-theme="light"]{
  --navy-950:#eef2f7;
  --navy-900:#f4f7fb;
  --navy-800:#ffffff;
  --navy-700:#eaf0f6;
  --navy-600:#dbe4ee;
  --navy-500:#c6d2e0;

  --white:#0b1220;
  --ink-100:#243349;
  --ink-300:#4a5875;
  --ink-500:#6b7994;
  --ink-700:#98a4bb;

  --glass-fill: rgba(255,255,255,0.55);
  --glass-fill-strong: rgba(255,255,255,0.78);
  --glass-border: rgba(15,25,45,0.08);
  --glass-border-strong: rgba(30,110,150,0.25);

  --grad-bg-mesh:
    radial-gradient(60% 55% at 12% 8%, rgba(63,216,236,.22), transparent 60%),
    radial-gradient(45% 40% at 88% 18%, rgba(30,111,184,.12), transparent 60%),
    radial-gradient(60% 60% at 50% 100%, rgba(198,215,235,.65), transparent 65%);

  color-scheme: light;
}