/* ══════════════════════════════════════════════════════════
   TAPIR · base.css
   Reset, design tokens, typography
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Surfaces */
  --bg:        #06090e;
  --surface:   #0c1118;
  --surface2:  #111a24;
  --surface3:  #162030;

  /* Borders */
  --border:    #182334;
  --border-hi: #1e2e42;

  /* Accent */
  --accent:    #00e5ff;
  --accent2:   #ff6b35;
  --accent3:   #a78bfa;
  --accent-dim:rgba(0,229,255,.15);
  --accent-glow:rgba(0,229,255,.2);

  /* Text */
  --text:      #dde8f2;
  --text-dim:  #8ba4bc;
  --muted:     #2d4259;
  --muted-hi:  #4d6a84;

  /* Semantic */
  --green:  #22c55e;
  --yellow: #eab308;
  --orange: #f97316;
  --red:    #ef4444;
  --purple: #a78bfa;

  /* Shadows */
  --shadow-sm:    0 2px 8px rgba(0,0,0,.5);
  --shadow-md:    0 4px 20px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.4);
  --shadow-lg:    0 8px 40px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.5);
  --shadow-panel: 0 -4px 40px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-float: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.04);

  /* Glass */
  --glass:    rgba(6,9,14,.88);
  --glass-hi: rgba(12,17,24,.95);

  /* Radius */
  --r-xs: 3px;
  --r-sm: 5px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Typography */
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'Space Mono', 'Courier New', monospace;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --tr-fast: .12s var(--ease);
  --tr:      .2s  var(--ease);
  --tr-slow: .35s var(--ease);

  /* Layout */
  --topbar-h:  52px;
  --nav-h:     58px;
  --sidebar-w: 220px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

[data-theme="light"] {
  --bg:#eef2f7; --surface:#fff; --surface2:#e8eef5; --surface3:#dce4ee;
  --border:#c8d6e5; --border-hi:#b0c2d4;
  --accent:#0077b6; --accent2:#e05c1a; --accent3:#6d28d9;
  --accent-dim:rgba(0,119,182,.1); --accent-glow:rgba(0,119,182,.15);
  --text:#0d1c2e; --text-dim:#4a6070; --muted:#9ab0c4; --muted-hi:#6a8499;
  --green:#16a34a; --yellow:#b45309; --orange:#c2410c; --red:#dc2626;
  --shadow-sm:0 2px 8px rgba(0,0,0,.08);
  --shadow-md:0 4px 20px rgba(0,0,0,.1);
  --shadow-lg:0 8px 40px rgba(0,0,0,.15);
  --shadow-panel:0 -4px 40px rgba(0,0,0,.08),inset 0 1px 0 rgba(0,0,0,.06);
  --shadow-float:var(--shadow-lg),inset 0 0 0 1px rgba(0,0,0,.06);
  --glass:rgba(238,242,247,.9); --glass-hi:rgba(255,255,255,.97);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  scroll-padding-top: calc(var(--topbar-h) + var(--safe-t));
}

body {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── App shell ── */
.app {
  position: relative;
  width: 100%; height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Map container ── */
#map {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-hi); }

/* ── Utils ── */
.hidden { display: none !important; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }