/* ============================================================
   GeoControle — Design Tokens
   Brand: TWI Consultoria · Product: GeoControle
   Primary: #01ACC2 (teal)  ·  Secondary: #182631 (navy)
   ============================================================ */

/* ---------- Webfonts (Google Fonts substitutes; flagged in README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ COLOR — BRAND CORE ============ */
  --teal-50:  #E6F8FB;
  --teal-100: #C2EEF3;
  --teal-200: #8FE0EA;
  --teal-300: #4CCFDE;
  --teal-400: #1FBED1;
  --teal-500: #01ACC2;  /* BRAND PRIMARY */
  --teal-600: #0093A6;
  --teal-700: #00798A;
  --teal-800: #005C6A;
  --teal-900: #00404A;

  --navy-50:  #F2F4F6;
  --navy-100: #DCE1E6;
  --navy-200: #B6BFC8;
  --navy-300: #8895A2;
  --navy-400: #5A6B7B;
  --navy-500: #364857;
  --navy-600: #233544;
  --navy-700: #182631;  /* BRAND DARK */
  --navy-800: #101A22;
  --navy-900: #08101A;

  /* ============ COLOR — NEUTRALS (warm-cool gray for surfaces) ============ */
  --ink-0:   #FFFFFF;
  --ink-25:  #FAFBFC;
  --ink-50:  #F4F6F8;
  --ink-100: #E8ECF0;
  --ink-200: #D1D8DE;
  --ink-300: #A8B3BC;
  --ink-400: #6C7A85;
  --ink-500: #4A5762;
  --ink-600: #2D3942;
  --ink-700: #182631;
  --ink-900: #0A1018;

  /* ============ COLOR — SEMANTIC (operação de campo) ============ */
  --danger-500: #E5484D;   /* foco confirmado, auto de infração, óbito */
  --danger-100: #FDECEC;
  --warn-500:   #F5A524;   /* notificação, pendência, atraso */
  --warn-100:   #FEF3E0;
  --success-500:#2BB673;   /* visita concluída, vacinado, negativo */
  --success-100:#E0F5EC;
  --info-500:   #2D7FF9;   /* coleta laboratório, em análise */
  --info-100:   #E5F0FE;

  /* Endemias-specific status (cores usadas em mapa de calor / focos) */
  --status-foco:    #E5484D;  /* foco positivo */
  --status-tratado: #F5A524;  /* tratado */
  --status-negativo:#2BB673;  /* negativo */
  --status-recusa:  #8895A2;  /* recusa / fechado */
  --status-pendente:#2D7FF9;  /* pendente */

  /* ============ FOREGROUND / BACKGROUND TOKENS ============ */
  --fg-1: var(--navy-700);    /* primary text */
  --fg-2: var(--ink-500);     /* secondary text */
  --fg-3: var(--ink-400);     /* tertiary / captions */
  --fg-on-dark: var(--ink-0);
  --fg-on-teal: var(--navy-700);
  --fg-accent:  var(--teal-600);
  --fg-link:    var(--teal-700);

  --bg-canvas:  var(--ink-25);
  --bg-surface: var(--ink-0);
  --bg-sunken:  var(--ink-50);
  --bg-dark:    var(--navy-700);
  --bg-darker:  var(--navy-800);
  --bg-tint:    var(--teal-50);

  --border-subtle: var(--ink-100);
  --border-strong: var(--ink-200);
  --border-focus:  var(--teal-500);

  /* ============ TYPOGRAPHY — FAMILIES ============ */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============ TYPOGRAPHY — SCALE (modular ~1.2) ============ */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;
  --fs-display: 96px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ============ SPACING (4px base) ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============ RADII ============ */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-capsule: 9999px; /* logo's signature capsule shape */

  /* ============ SHADOWS / ELEVATION ============ */
  --shadow-xs: 0 1px 2px rgba(15, 36, 56, 0.06);
  --shadow-sm: 0 2px 4px rgba(15, 36, 56, 0.06), 0 1px 2px rgba(15, 36, 56, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(15, 36, 56, 0.10), 0 2px 4px rgba(15, 36, 56, 0.04);
  --shadow-lg: 0 16px 40px -12px rgba(15, 36, 56, 0.18), 0 4px 8px rgba(15, 36, 56, 0.06);
  --shadow-xl: 0 32px 80px -20px rgba(15, 36, 56, 0.28);
  --shadow-glow-teal: 0 0 0 4px rgba(1, 172, 194, 0.18);
  --shadow-inset:    inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-inset-dark: inset 0 1px 0 rgba(255,255,255,0.08);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;

  /* ============ LAYOUT ============ */
  --container-narrow: 960px;
  --container-base:   1200px;
  --container-wide:   1440px;
  --container-full:   1680px;
  --gutter: clamp(16px, 4vw, 48px);
}

/* ================================================================
   SEMANTIC TYPE STYLES (use these in markup)
   ================================================================ */
.display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7.5vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-1);
}
.h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 700;
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-1);
}
.h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  font-weight: 600;
  color: var(--fg-1);
}
.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: 400;
}
.body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--fg-2);
  font-feature-settings: "tnum", "zero";
}
.coord {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  font-feature-settings: "tnum", "zero";
  letter-spacing: 0.02em;
}

/* ================================================================
   GLOBAL RESET / BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }