:root {
  /* ============ BRAND / PRIMARY (green) ============ */
  --ep-green-500: #6db136;   /* brand primary — logo green */
  --ep-green-600: #5d9a2c;   /* hover/pressed */
  --ep-green-700: #4d8123;   /* active/strong */
  --ep-green-400: #86c455;   /* light accent */
  --ep-green-100: #eaf5e0;   /* tint surface */
  --ep-green-50:  #f4faee;   /* faint tint */

  /* ============ BASE / SLATE (identidade técnica) ============ */
  --ep-slate-900: #1b2230;   /* dark bg / strong text */
  --ep-slate-800: #2e384d;   /* base brand slate */
  --ep-slate-700: #3f4d6b;   /* slate hover/variation */
  --ep-slate-600: #6b7689;   /* secondary text */
  --ep-slate-300: #c7cedb;   /* borders / dividers */
  --ep-slate-100: #f4f6f9;   /* light surface */
  --ep-white:     #ffffff;

  /* ============ SEMANTIC ENERGY / PAYMENT ============ */
  --ep-energy-500: #00c16a;  /* recarga / sucesso / "carregando" */
  --ep-energy-600: #00a65a;  /* hover */
  --ep-pix-500:    #32bcad;  /* PIX pagamento */
  --ep-warn-500:   #f5a623;  /* cupom / aviso */
  --ep-error-500:  #e04848;  /* offline / falha */

  /* ============ SEMANTIC ALIASES ============ */
  --color-primary:        var(--ep-green-500);
  --color-primary-hover:  var(--ep-green-600);
  --color-primary-active: var(--ep-green-700);
  --color-primary-tint:   var(--ep-green-100);
  --color-on-primary:     var(--ep-white);

  --text-strong:    var(--ep-slate-900);
  --text-body:      var(--ep-slate-800);
  --text-secondary: var(--ep-slate-600);
  --text-on-dark:   var(--ep-white);
  --text-link:      var(--ep-green-600);

  --surface-page:   var(--ep-slate-100);
  --surface-card:   var(--ep-white);
  --surface-dark:   var(--ep-slate-900);
  --surface-tint:   var(--ep-green-50);

  --border-default: var(--ep-slate-300);
  --border-strong:  var(--ep-slate-600);

  --status-charging: var(--ep-energy-500);
  --status-success:  var(--ep-energy-500);
  --status-pix:      var(--ep-pix-500);
  --status-warning:  var(--ep-warn-500);
  --status-offline:  var(--ep-error-500);
}
:root {
  /* ============ FONT FAMILIES ============ */
  --font-brand: "Poppins", system-ui, sans-serif;        /* display/headings, geometric like the wordmark */
  --font-body:  "Plus Jakarta Sans", system-ui, sans-serif; /* UI / running text */
  --font-mono:  "JetBrains Mono", ui-monospace, monospace;  /* kWh, R$, IDs, telemetry */

  /* ============ TYPE SCALE ============ */
  --text-display: 700 44px/1.1 var(--font-brand);
  --text-h1:      700 32px/1.15 var(--font-brand);
  --text-h2:      600 24px/1.2 var(--font-brand);
  --text-h3:      600 19px/1.3 var(--font-brand);
  --text-lead:    500 18px/1.45 var(--font-body);
  --text-base:    400 15px/1.55 var(--font-body);
  --text-sm:      400 13px/1.5 var(--font-body);
  --text-label:   600 13px/1.2 var(--font-body);
  --text-overline:700 11px/1.2 var(--font-body);

  --tracking-overline: 0.08em;
  --tracking-tight: -0.01em;
}
:root {
  /* ============ 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;

  /* ============ RADII ============ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;   /* inputs/buttons */
  --radius-xl: 24px;   /* cards */
  --radius-pill: 999px;

  /* ============ SHADOWS ============ */
  --shadow-sm: 0 1px 2px rgba(27, 34, 48, 0.06);
  --shadow-md: 0 6px 16px rgba(27, 34, 48, 0.08);
  --shadow-lg: 0 16px 40px rgba(27, 34, 48, 0.10);
  --shadow-green: 0 8px 20px rgba(109, 177, 54, 0.28);
}