/* ============================================================================
   SPEEDX DESIGN SYSTEM — TOKENS (v1)
   ============================================================================
   A lei visual do Speedx. Nenhuma cor, fonte, sombra ou espaçamento é criado
   fora daqui. Modo claro premium por padrão; modo escuro preparado.
   Base: 4px/8px grid · Motion 120–240ms ease-out · Contraste AA.
============================================================================ */

:root {
  /* ------------------------------ CORES / MARCA --------------------------- */
  /* Verde Speedx: o vibrante (#00E676) é ACENTO de marca (logo, brilhos).
     Ações usam o verde profundo (contraste AA com texto branco). */
  --accent:          #00E676;
  --primary:         #067647;
  --primary-hover:   #05603A;
  --primary-active:  #044D2F;
  --primary-soft:    #E7F6EF;   /* fundos de destaque suaves */
  --primary-soft-2:  #D2EEDF;

  /* ------------------------------ SUPERFÍCIES ----------------------------- */
  --bg:              #F6F8F7;
  --surface:         #FFFFFF;
  --surface-elevated:#FFFFFF;
  --surface-sunken:  #EFF3F1;
  --glass:           rgba(255, 255, 255, 0.86);
  --map-overlay:     rgba(16, 22, 19, 0.44);

  /* ------------------------------ TEXTO ----------------------------------- */
  --text:            #101613;
  --text-secondary:  #45514B;
  --text-muted:      #78847E;
  --text-on-primary: #FFFFFF;

  /* ------------------------------ BORDAS ---------------------------------- */
  --border-subtle:   #E4EAE7;
  --border-strong:   #C6D0CB;

  /* ------------------------------ SEMÂNTICAS ------------------------------ */
  --success:         #067647;
  --success-soft:    #E7F6EF;
  --danger:          #D92D20;
  --danger-soft:     #FDECEA;
  --warning:         #B54708;
  --warning-soft:    #FEF3E6;
  --info:            #175CD3;
  --info-soft:       #EAF1FC;

  /* ------------------------------ TIPOGRAFIA ------------------------------ */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Arial, sans-serif;

  --fs-display:    clamp(2.25rem, 5vw, 3.25rem);  /* 36–52 */
  --fs-heading-xl: clamp(1.75rem, 4vw, 2.25rem);  /* 28–36 */
  --fs-heading-lg: 1.5rem;                        /* 24 */
  --fs-heading-md: 1.25rem;                       /* 20 */
  --fs-title:      1.125rem;                      /* 18 */
  --fs-body-lg:    1.0625rem;                     /* 17 */
  --fs-body:       1rem;                          /* 16 */
  --fs-body-sm:    0.875rem;                      /* 14 */
  --fs-label:      0.8125rem;                     /* 13 */
  --fs-caption:    0.75rem;                       /* 12 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-heavy:   800;

  --lh-tight: 1.15;
  --lh-base:  1.5;

  /* ------------------------------ ESPAÇAMENTO ----------------------------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ------------------------------ RAIO ------------------------------------ */
  --r-sm:   8px;    /* botões utilitários, badges */
  --r-md:   12px;   /* inputs, cards */
  --r-lg:   16px;   /* cards grandes, modais */
  --r-xl:   24px;   /* bottom sheets, painéis premium */
  --r-full: 999px;  /* pills */

  /* ------------------------------ ELEVAÇÃO -------------------------------- */
  --shadow-sm:  0 1px 2px rgba(16, 22, 19, 0.05);
  --shadow-md:  0 2px 8px rgba(16, 22, 19, 0.07), 0 1px 2px rgba(16, 22, 19, 0.05);
  --shadow-lg:  0 8px 24px rgba(16, 22, 19, 0.10), 0 2px 6px rgba(16, 22, 19, 0.06);
  --shadow-floating: 0 12px 40px rgba(16, 22, 19, 0.16), 0 4px 12px rgba(16, 22, 19, 0.08);

  /* ------------------------------ MOTION ---------------------------------- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 240ms;
  --ease:   cubic-bezier(0.2, 0, 0, 1); /* ease-out premium */

  /* ------------------------------ CAMADAS --------------------------------- */
  --z-map: 0; --z-overlay: 900; --z-topbar: 1000; --z-sheet: 1100;
  --z-modal: 2000; --z-toast: 3000;
}

/* ------------------------------ MODO ESCURO (preparado) ------------------- */
[data-theme="dark"] {
  --bg:              #0D1210;
  --surface:         #151B18;
  --surface-elevated:#1B2320;
  --surface-sunken:  #0A0E0C;
  --glass:           rgba(21, 27, 24, 0.88);

  --text:            #F1F5F3;
  --text-secondary:  #AEBCB5;
  --text-muted:      #77837D;

  --border-subtle:   #26302B;
  --border-strong:   #3A463F;

  --primary:         #12B76A;
  --primary-hover:   #0E9A57;
  --primary-active:  #0B7D47;
  --primary-soft:    #12281D;
  --primary-soft-2:  #173324;

  --success-soft:    #12281D;
  --danger-soft:     #2E1513;
  --warning-soft:    #2B1D0C;
  --info-soft:       #12203A;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-floating: 0 12px 40px rgba(0, 0, 0, 0.6);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* Foco visível (acessibilidade AA) — nunca remover sem substituir */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}