/* =========================================================
   EVVO — Design Tokens
   Rede de eletropostos — PR + SC
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- CORE PALETTE ---------- */
  /* Noir — o núcleo da marca. Preto profundo com vestígio de azul
     (remete ao "noturno automotivo" dos renders do PDF). */
  --evvo-noir-950: #05070A;     /* deep background / signage */
  --evvo-noir-900: #0B0F14;     /* primary dark surface       */
  --evvo-noir-800: #11161D;     /* elevated dark surface      */
  --evvo-noir-700: #1A212B;     /* cards on dark              */
  --evvo-noir-600: #2A323E;     /* borders on dark            */
  --evvo-noir-500: #3D4654;     /* muted text on dark         */

  /* Pure — o branco/neon que corta as noites. */
  --evvo-pure: #FFFFFF;
  --evvo-pure-95: rgba(255,255,255,0.95);
  --evvo-pure-70: rgba(255,255,255,0.70);
  --evvo-pure-50: rgba(255,255,255,0.50);
  --evvo-pure-20: rgba(255,255,255,0.20);
  --evvo-pure-10: rgba(255,255,255,0.10);
  --evvo-pure-05: rgba(255,255,255,0.05);

  /* Bone — neutros para superfícies claras. */
  --evvo-bone-50:  #FAFAF8;
  --evvo-bone-100: #F4F4F0;
  --evvo-bone-200: #E8E8E2;
  --evvo-bone-300: #CFCFC8;
  --evvo-bone-400: #9A9A93;
  --evvo-bone-500: #6B6B66;
  --evvo-bone-600: #43433F;

  /* ---------- ACCENT — ENERGY LIME ---------- */
  /* A cor da marca em movimento. Sustentabilidade + voltagem. */
  --evvo-lime-50:  #F2FDDB;
  --evvo-lime-100: #E1FAA8;
  --evvo-lime-200: #CEF673;
  --evvo-lime-300: #B9EE40;
  --evvo-lime-400: #A5E214;   /* ← PRIMARY ACCENT */
  --evvo-lime-500: #8FC810;
  --evvo-lime-600: #6FA008;
  --evvo-lime-700: #527806;

  /* ---------- SEMANTIC — CHARGING STATES ---------- */
  /* Específicos do domínio: status dos carregadores. */
  --evvo-status-available: #A5E214;  /* lime — livre */
  --evvo-status-charging:  #3BA8FF;  /* ciano — em uso */
  --evvo-status-reserved:  #FFB13B;  /* âmbar — reservado */
  --evvo-status-offline:   #6B6B66;  /* cinza — offline */
  --evvo-status-error:     #FF4D4D;  /* vermelho — erro */

  /* ---------- TYPOGRAPHY ---------- */
  --evvo-font-display: 'Poppins', system-ui, sans-serif;
  --evvo-font-text:    'Montserrat', system-ui, sans-serif;

  /* Fluid type scale (1920px design → 1440 → 1024 → mobile) */
  --evvo-text-xs:   0.75rem;     /* 12 — microcopy, tags */
  --evvo-text-sm:   0.875rem;    /* 14 — meta, labels */
  --evvo-text-base: 1rem;        /* 16 — body */
  --evvo-text-lg:   1.125rem;    /* 18 — lead */
  --evvo-text-xl:   1.375rem;    /* 22 — card title */
  --evvo-text-2xl:  1.75rem;     /* 28 — section h3 */
  --evvo-text-3xl:  2.25rem;     /* 36 — h2 */
  --evvo-text-4xl:  3rem;        /* 48 — h1 secondary */
  --evvo-text-5xl:  4.25rem;     /* 68 — display */
  --evvo-text-6xl:  6rem;        /* 96 — hero */
  --evvo-text-7xl:  9rem;        /* 144 — oversized watermark */

  /* Weights & tracking */
  --evvo-weight-regular: 400;
  --evvo-weight-medium:  500;
  --evvo-weight-semi:    600;
  --evvo-weight-bold:    700;
  --evvo-weight-black:   800;

  --evvo-tracking-tight:   -0.035em;   /* display */
  --evvo-tracking-normal:  0;
  --evvo-tracking-wide:    0.04em;     /* small caps, labels */
  --evvo-tracking-widest:  0.14em;     /* eyebrow, tag */

  --evvo-leading-tight:  1.05;
  --evvo-leading-snug:   1.2;
  --evvo-leading-normal: 1.5;
  --evvo-leading-loose:  1.7;

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

  /* ---------- RADIUS ---------- */
  /* Derivado do logotipo: as barras do "E" são pill/stadium.
     Ou é agudo (0) ou é pill (999). Pouco meio-termo. */
  --evvo-radius-none: 0;
  --evvo-radius-sm:   6px;
  --evvo-radius-md:   10px;
  --evvo-radius-lg:   16px;
  --evvo-radius-xl:   24px;
  --evvo-radius-pill: 999px;

  /* ---------- SHADOW ---------- */
  --evvo-shadow-sm:   0 1px 2px rgba(5,7,10,0.08);
  --evvo-shadow-md:   0 6px 16px rgba(5,7,10,0.10);
  --evvo-shadow-lg:   0 18px 40px rgba(5,7,10,0.14);
  --evvo-shadow-xl:   0 32px 80px rgba(5,7,10,0.20);
  /* Glow — só para elementos on-dark que sugerem luz neon */
  --evvo-glow-lime:   0 0 24px rgba(165,226,20,0.35), 0 0 60px rgba(165,226,20,0.20);
  --evvo-glow-white:  0 0 16px rgba(255,255,255,0.25), 0 0 48px rgba(255,255,255,0.15);

  /* ---------- MOTION ---------- */
  --evvo-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --evvo-ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --evvo-ease-mech: cubic-bezier(0.85, 0, 0.15, 1);  /* mechanical, automotive */
  --evvo-dur-fast:  160ms;
  --evvo-dur-base:  240ms;
  --evvo-dur-slow:  420ms;

  /* ---------- LAYOUT ---------- */
  --evvo-container-sm:  640px;
  --evvo-container-md:  960px;
  --evvo-container-lg:  1200px;
  --evvo-container-xl:  1440px;
  --evvo-container-2xl: 1680px;
}

/* =========================================================
   BASE UTILITIES & RESET
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--evvo-font-text);
  font-size: var(--evvo-text-base);
  line-height: var(--evvo-leading-normal);
  color: var(--evvo-noir-900);
  background: var(--evvo-bone-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.evvo-dark {
  color: var(--evvo-pure);
  background: var(--evvo-noir-950);
}

/* Display type — Poppins, always tight tracking */
.evvo-display, h1, h2, h3 {
  font-family: var(--evvo-font-display);
  font-weight: var(--evvo-weight-bold);
  letter-spacing: var(--evvo-tracking-tight);
  line-height: var(--evvo-leading-tight);
  margin: 0;
  text-wrap: balance;
}

h4, h5, h6 {
  font-family: var(--evvo-font-display);
  font-weight: var(--evvo-weight-semi);
  letter-spacing: -0.01em;
  line-height: var(--evvo-leading-snug);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

/* Eyebrow / label — Montserrat uppercase */
.evvo-eyebrow {
  font-family: var(--evvo-font-text);
  font-weight: var(--evvo-weight-semi);
  font-size: var(--evvo-text-xs);
  letter-spacing: var(--evvo-tracking-widest);
  text-transform: uppercase;
}

/* Monospace-feel numeric (for kWh, power, metrics) */
.evvo-numeric {
  font-family: var(--evvo-font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

/* =========================================================
   DOC-CHROME — shared by every design-system page
   (header, side nav, container)
   ========================================================= */

.evvo-doc {
  min-height: 100vh;
  background: var(--evvo-bone-50);
  color: var(--evvo-noir-900);
  display: grid;
  grid-template-columns: 260px 1fr;
}

.evvo-doc-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--evvo-noir-950);
  color: var(--evvo-pure);
  padding: var(--evvo-space-8) var(--evvo-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--evvo-space-8);
}

.evvo-doc-nav .brand {
  display: flex;
  align-items: center;
  gap: var(--evvo-space-3);
}
.evvo-doc-nav .brand img {
  width: 88px;
  height: auto;
  display: block;
}
.evvo-doc-nav .brand .tag {
  font-size: 10px;
  letter-spacing: var(--evvo-tracking-widest);
  text-transform: uppercase;
  color: var(--evvo-lime-400);
  margin-top: 4px;
}

.evvo-doc-nav nav {
  display: flex;
  flex-direction: column;
  gap: var(--evvo-space-1);
}
.evvo-doc-nav nav .group-label {
  font-size: 10px;
  letter-spacing: var(--evvo-tracking-widest);
  text-transform: uppercase;
  color: var(--evvo-pure-50);
  padding: var(--evvo-space-4) var(--evvo-space-3) var(--evvo-space-1);
}
.evvo-doc-nav nav a {
  display: flex;
  align-items: center;
  gap: var(--evvo-space-3);
  padding: var(--evvo-space-3);
  color: var(--evvo-pure-70);
  text-decoration: none;
  font-size: var(--evvo-text-sm);
  font-weight: var(--evvo-weight-medium);
  border-radius: var(--evvo-radius-md);
  transition: all var(--evvo-dur-fast) var(--evvo-ease-out);
}
.evvo-doc-nav nav a:hover {
  background: var(--evvo-pure-05);
  color: var(--evvo-pure);
}
.evvo-doc-nav nav a.active {
  background: var(--evvo-pure-10);
  color: var(--evvo-pure);
}
.evvo-doc-nav nav a .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--evvo-pure-20);
}
.evvo-doc-nav nav a.active .dot {
  background: var(--evvo-lime-400);
  box-shadow: 0 0 8px var(--evvo-lime-400);
}

.evvo-doc-nav .foot {
  margin-top: auto;
  font-size: 11px;
  color: var(--evvo-pure-50);
  line-height: 1.5;
}

.evvo-doc-main {
  padding: var(--evvo-space-16) var(--evvo-space-16);
  max-width: 1280px;
}
@media (max-width: 1200px) {
  .evvo-doc-main { padding: var(--evvo-space-10); }
}

/* Page header used inside each doc */
.evvo-page-head {
  padding-bottom: var(--evvo-space-10);
  border-bottom: 1px solid var(--evvo-bone-200);
  margin-bottom: var(--evvo-space-16);
}
.evvo-page-head .eyebrow { color: var(--evvo-lime-600); margin-bottom: var(--evvo-space-3); }
.evvo-page-head h1 {
  font-size: clamp(2.25rem, 4vw, var(--evvo-text-5xl));
  margin-bottom: var(--evvo-space-4);
}
.evvo-page-head p.lead {
  font-size: var(--evvo-text-lg);
  color: var(--evvo-bone-600);
  max-width: 62ch;
}

/* Section inside a page */
.evvo-section {
  margin-bottom: var(--evvo-space-20);
}
.evvo-section > h2 {
  font-size: var(--evvo-text-3xl);
  margin-bottom: var(--evvo-space-3);
}
.evvo-section > .section-lead {
  color: var(--evvo-bone-600);
  font-size: var(--evvo-text-base);
  max-width: 62ch;
  margin-bottom: var(--evvo-space-8);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.evvo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--evvo-space-2);
  font-family: var(--evvo-font-display);
  font-weight: var(--evvo-weight-semi);
  font-size: var(--evvo-text-sm);
  letter-spacing: 0.01em;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--evvo-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--evvo-dur-fast) var(--evvo-ease-out);
  white-space: nowrap;
}
.evvo-btn:focus-visible {
  outline: 2px solid var(--evvo-lime-400);
  outline-offset: 2px;
}

.evvo-btn-primary {
  background: var(--evvo-lime-400);
  color: var(--evvo-noir-950);
}
.evvo-btn-primary:hover {
  background: var(--evvo-lime-300);
  transform: translateY(-1px);
  box-shadow: var(--evvo-glow-lime);
}

.evvo-btn-dark {
  background: var(--evvo-noir-900);
  color: var(--evvo-pure);
}
.evvo-btn-dark:hover {
  background: var(--evvo-noir-800);
  transform: translateY(-1px);
}

.evvo-btn-outline {
  background: transparent;
  color: var(--evvo-noir-900);
  border-color: var(--evvo-noir-900);
}
.evvo-btn-outline:hover {
  background: var(--evvo-noir-900);
  color: var(--evvo-pure);
}

.evvo-btn-outline-light {
  background: transparent;
  color: var(--evvo-pure);
  border-color: var(--evvo-pure-50);
}
.evvo-btn-outline-light:hover {
  border-color: var(--evvo-pure);
  background: var(--evvo-pure-10);
}

.evvo-btn-ghost {
  background: transparent;
  color: var(--evvo-noir-900);
}
.evvo-btn-ghost:hover {
  background: var(--evvo-bone-100);
}

.evvo-btn-lg { font-size: var(--evvo-text-base); padding: 18px 28px; }
.evvo-btn-sm { font-size: var(--evvo-text-xs); padding: 9px 14px; }

/* =========================================================
   CARDS
   ========================================================= */
.evvo-card {
  background: var(--evvo-pure);
  border: 1px solid var(--evvo-bone-200);
  border-radius: var(--evvo-radius-lg);
  padding: var(--evvo-space-6);
  transition: all var(--evvo-dur-base) var(--evvo-ease-out);
}
.evvo-card-dark {
  background: var(--evvo-noir-900);
  border-color: var(--evvo-noir-700);
  color: var(--evvo-pure);
}

/* =========================================================
   BADGE / TAG
   ========================================================= */
.evvo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--evvo-space-2);
  padding: 5px 11px;
  border-radius: var(--evvo-radius-pill);
  font-size: 11px;
  font-weight: var(--evvo-weight-semi);
  letter-spacing: var(--evvo-tracking-wide);
  text-transform: uppercase;
  font-family: var(--evvo-font-text);
}
.evvo-badge-dot::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.evvo-badge-lime  { background: var(--evvo-lime-100); color: var(--evvo-lime-700); }
.evvo-badge-dark  { background: var(--evvo-noir-900); color: var(--evvo-pure); }
.evvo-badge-light { background: var(--evvo-bone-100); color: var(--evvo-bone-600); }
.evvo-badge-outline-light { border: 1px solid var(--evvo-pure-20); color: var(--evvo-pure); }

/* =========================================================
   WATERMARK — oversized EVVO outline / stamp
   Used on hero sections, section breaks, deck covers.
   ========================================================= */
.evvo-watermark {
  font-family: var(--evvo-font-display);
  font-weight: var(--evvo-weight-black);
  font-size: var(--evvo-text-7xl);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--evvo-pure-10);
  user-select: none;
  pointer-events: none;
}
.evvo-watermark-solid {
  color: var(--evvo-pure-05);
  -webkit-text-stroke: 0;
}

/* =========================================================
   "LANE" — thin lime underline used on dark, evokes
   the illuminated lane on the floor of a charging bay.
   ========================================================= */
.evvo-lane {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}
.evvo-lane::after {
  content: "";
  position: absolute;
  left: 0; right: 30%;
  bottom: 0;
  height: 2px;
  background: var(--evvo-lime-400);
  box-shadow: 0 0 8px var(--evvo-lime-400);
}

/* =========================================================
   SCROLLBAR (subtle, dark-friendly)
   ========================================================= */
.evvo-doc-nav::-webkit-scrollbar { width: 6px; }
.evvo-doc-nav::-webkit-scrollbar-thumb {
  background: var(--evvo-pure-10);
  border-radius: 3px;
}
.evvo-doc-nav::-webkit-scrollbar-thumb:hover { background: var(--evvo-pure-20); }