/* ─── Escape Hatch — globals.css ───────────────────────────────────────────
   Design tokens, resets, and base typography.
   All colors/fonts consumed from here by all other CSS files.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Backgrounds ── */
  --color-void: #0a0c10;
  --color-surface: #12151c;
  --color-surface-raised: #1a1e28;
  --color-border: #252a36;
  --color-border-strong: #363d4f;

  /* ── Text ── */
  --color-text-primary: #e8eaf0;
  --color-text-secondary: #8b93a8;
  --color-text-muted: #4f5668;
  --color-text-accent: #c5a84a;

  /* ── Globe ocean ── */
  --color-ocean: #0d1829;
  --color-ocean-light: #111f38;

  /* ── Heatmap — country fills ── */
  --heat-1: #5c3c3c;  /* 1.0–3.9  Difficult */
  --heat-2: #57502e;  /* 4.0–5.4  Challenging */
  --heat-3: #3d4e38;  /* 5.5–6.9  Decent */
  --heat-4: #2c5a44;  /* 7.0–8.4  Solid */
  --heat-5: #256650;  /* 8.5–10   Pack your bags */

  /* ── Hover / selected ── */
  --color-highlight: #c5a84a;
  --color-selected: #d4b85a;

  /* ── Metric bar colors ── */
  --metric-dollar: #4a9e6b;
  --metric-immigration: #c5a84a;
  --metric-language: #7b9fc7;
  --metric-climate: #c47a3a;
  --metric-health: #7f6fb5;

  /* ── UI ── */
  --color-accent: #c5a84a;
  --color-danger: #c0443a;
  --color-success: #3a9e6b;

  /* ── Fonts ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;

  /* ── Type scale ── */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 0.9375rem;   /* 15px */
  --text-md:   1.0625rem;   /* 17px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  2rem;        /* 32px */
  --text-3xl:  2.75rem;     /* 44px */

  /* ── Leading ── */
  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ── Tracking ── */
  --tracking-wide:    0.08em;
  --tracking-widest:  0.15em;

  /* ── Layout ── */
  --panel-width: 380px;
  --panel-z: 100;
  --header-z: 200;
  --search-z: 200;
  --legend-z: 150;
  --loading-z: 300;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 180ms;
  --dur-panel: 280ms;
  --dur-bar: 400ms;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100%;
  background-color: var(--color-void);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow: hidden; /* Globe is full-screen */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Scrollbar styling ──────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ─── Focus styles ───────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── Base link styles ───────────────────────────────────────────────────── */
a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Section header utility ─────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
}

/* ─── Divider ────────────────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--color-border);
  margin: 1.5rem 0;
}