/* ==========================================================================
   DESIGN TOKENS
   Dark technical palette · single accent · geospatial data language
   ========================================================================== */

:root {
  /* --- Surface scale ---------------------------------------------------- */
  --c-void:        #050607;   /* page ground, deepest */
  --c-bg:          #08090B;   /* default section background */
  --c-bg-raised:   #0C0E11;   /* alternating section band */
  --c-surface:     #101317;   /* cards, panels */
  --c-surface-2:   #161A1F;   /* hovered / nested surfaces */
  --c-surface-3:   #1D2228;   /* inputs, controls */

  /* --- Lines ------------------------------------------------------------ */
  --c-line:        rgba(255, 255, 255, 0.08);
  --c-line-soft:   rgba(255, 255, 255, 0.045);
  --c-line-strong: rgba(255, 255, 255, 0.16);
  --c-grid:        rgba(255, 255, 255, 0.028);

  /* --- Type ------------------------------------------------------------- */
  --c-text:        #F2F4F6;
  --c-text-muted:  #A2AAB4;
  --c-text-dim:    #6E7781;
  --c-text-faint:  #4A5159;

  /* --- Accent: signal orange -------------------------------------------- */
  --c-accent:       #FF6B2C;
  --c-accent-hover: #FF8451;
  --c-accent-press: #E85718;
  --c-accent-ink:   #0A0A0A;                    /* text on accent fill */
  --c-accent-soft:  rgba(255, 107, 44, 0.12);
  --c-accent-line:  rgba(255, 107, 44, 0.32);
  --c-accent-glow:  rgba(255, 107, 44, 0.22);

  /* --- Data visualisation (viewer, charts, elevation ramps) -------------- */
  --c-data-1: #2C6FFF;   /* low elevation  */
  --c-data-2: #14C4C4;
  --c-data-3: #57D97B;
  --c-data-4: #F2CB4D;
  --c-data-5: #FF6B2C;   /* high elevation */
  --c-data-cyan: #4FD8E8;

  /* --- Feedback --------------------------------------------------------- */
  --c-ok:    #4ED88A;
  --c-warn:  #F2CB4D;
  --c-error: #FF5C5C;
  --c-error-soft: rgba(255, 92, 92, 0.1);

  /* --- Typography ------------------------------------------------------- */
  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --t-display: clamp(2.75rem, 1.4rem + 5.9vw, 6.5rem);
  --t-h1:      clamp(2.25rem, 1.3rem + 4.2vw, 4.75rem);
  --t-h2:      clamp(1.875rem, 1.25rem + 2.8vw, 3.5rem);
  --t-h3:      clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --t-h4:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --t-lead:    clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  --t-body:    1rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-micro:   0.6875rem;

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.65;

  --ls-display: -0.035em;
  --ls-head:    -0.025em;
  --ls-tech:    0.16em;   /* eyebrows, mono labels */

  /* --- 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:  2.5rem;
  --s-8:  3rem;
  --s-9:  4rem;
  --s-10: 5rem;
  --s-11: 6rem;
  --s-12: 8rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter:    clamp(1.25rem, 0.75rem + 2.2vw, 3.5rem);
  /* viewport-fit=cover lets the page run under a camera cut-out in landscape,
     so side padding never drops below the device's safe-area inset. */
  --gutter-l:  max(var(--gutter), env(safe-area-inset-left, 0px));
  --gutter-r:  max(var(--gutter), env(safe-area-inset-right, 0px));
  --maxw:      1440px;
  --maxw-text: 62ch;

  /* --- Geometry --------------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.7);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-tech: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:  160ms;
  --d-base:  280ms;
  --d-slow:  560ms;
  --d-reveal: 900ms;

  /* --- Layers ----------------------------------------------------------- */
  --z-grid:    0;
  --z-content: 1;
  --z-sticky:  50;
  --z-nav:     100;
  --z-drawer:  200;
  --z-modal:   300;

  --nav-h: 72px;
}

@media (max-width: 900px) {
  :root { --nav-h: 64px; }
}

/* Phones: the 11px mono labels and the two dimmest greys are fine on a desktop
   monitor but fall apart in daylight on a handset (faint grey was 2.5:1 on the
   page background). One step up in size and contrast keeps the same hierarchy. */
@media (max-width: 720px) {
  :root {
    --t-micro:      0.75rem;
    --c-text-dim:   #8A939D;   /* 6.3:1 on --c-bg (was 4.4:1) */
    --c-text-faint: #6E7781;   /* 4.4:1 on --c-bg (was 2.5:1) */
  }
}

/* Motion is opt-out at the token level so every transition respects it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
    --d-reveal: 1ms;
  }
}