/* Copyright 2026 dc07dev@pm.me */
/* ============================================================
   CSS Variables
   ============================================================ */
:root {
  --color-bg:           #f0f4f8;
  --color-surface:      #ffffff;
  --color-header-from:  #1565c0;
  --color-header-to:    #0d47a1;
  --color-text:         #1a202c;
  --color-text-muted:   #64748b;
  --color-border:       #e2e8f0;
  --color-shadow:       rgba(0, 0, 0, 0.08);
  --color-focus:        #2563eb;

  /* Level accent colours */
  --color-elementary:   #16a34a;
  --color-middle:       #ea580c;
  --color-high:         #7c3aed;
  --color-other:        #475569;

  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill: 9999px;

  --shadow-sm:  0 1px 3px var(--color-shadow), 0 1px 2px var(--color-shadow);
  --shadow-md:  0 4px 12px var(--color-shadow);
  --shadow-lg:  0 8px 24px var(--color-shadow);

  --transition: 150ms ease;

  --map-height-desktop: 520px;
  --map-height-mobile:  280px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--color-focus); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

/* ============================================================
   Hidden utility
   ============================================================ */
.hidden { display: none !important; }