/* ─────────────────────────────────────────────────────────────────────────
   MeshCore Tools v3 — Base Styles
   Design tokens, reset, typography, safe areas
   ───────────────────────────────────────────────────────────────────────── */

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

/* ── Design tokens ── */
:root {
  /* Background layers */
  --bg:      #08090D;
  --bg2:     #0D0F17;
  --bg3:     #12151F;
  --bg4:     #181C28;

  /* Borders */
  --border:  #1E2235;
  --border2: #252A3D;

  /* Text */
  --text:    #E8EBF4;
  --muted:   #6B7399;
  --muted2:  #3D4460;

  /* Accent */
  --blue:    #4D9EFF;
  --green:   #34C97B;
  --amber:   #F5A623;
  --red:     #E85D5D;

  /* Typography — system fonts, no network dependency */
  --font:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
  --mono:    'SF Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;

  /* Spacing scale (4px base) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;

  /* Radius */
  --radius:    10px;
  --radius-lg: 16px;
  --radius-sm: 6px;

  /* Touch target minimum (Apple HIG + Material) */
  --touch: 44px;

  /* Safe areas — iOS notch/home bar */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Topbar height */
  --topbar-h: 48px;

  /* Bottom nav height */
  --nav-h: 56px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow:    0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}

/* ── Light theme ── */
body.light {
  --bg:      #F4F6FA;
  --bg2:     #FFFFFF;
  --bg3:     #EEF0F6;
  --bg4:     #E5E8F0;
  --border:  #D0D5E8;
  --border2: #C0C8E0;
  --text:    #0A0C14;
  --muted:   #5A607A;
  --muted2:  #8890AA;
}

/* ── Base typography ── */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  height: 100dvh; /* dynamic viewport height — handles iOS URL bar */
  width: 100vw;
}

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

/* ── Focus visible — keyboard only ── */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Selection ── */
::selection {
  background: rgba(77,158,255,0.25);
  color: var(--text);
}