/* ============================================
   GENIAL GREEN SOLAR — Design Tokens
   Pipetado do logo em 2026-08-20
   Aquarela (Web Design)
   ============================================ */

:root {
  /* ── Cores Primárias (do logo) ── */
  --color-primary:         #082103;
  --color-primary-dark:    #041301;
  --color-primary-mid:     #0e4704;
  --color-primary-light:   #45653e;

  /* ── Cores de Destaque / Dourado Solar ── */
  --color-accent:          #fcc10b;
  --color-accent-hover:    #e0ac00;
  --color-accent-light:    #f6df95;
  --color-accent-bg:       #fdf6e0;

  /* ── Cores Verde-oliva / Sage (do logo versão escura) ── */
  --color-olive:           #595f25;
  --color-sage:            #577053;

  /* ── Backgrounds ── */
  --color-bg:              #ffffff;
  --color-bg-alt:          #f7f7f2;
  --color-bg-dark:         #082103;
  --color-bg-dark-alt:     #0a2a05;

  /* ── Texto ── */
  --color-text:            #1a1a1a;
  --color-text-muted:      #555555;
  --color-text-on-dark:    #ffffff;
  --color-text-on-accent:  #082103;

  /* ── Bordas e Divisões ── */
  --color-border:          #e0e0d8;
  --color-border-accent:   rgba(252, 193, 11, 0.2);

  /* ── Feedback ── */
  --color-success:         #0e4704;
  --color-whatsapp:        #25d366;
  --color-bar-without:     #d44444;

  /* ── Sombras ── */
  --color-shadow:          rgba(8, 33, 3, 0.08);
  --color-shadow-hover:    rgba(8, 33, 3, 0.15);
  --color-shadow-whatsapp: rgba(37, 211, 102, 0.4);

  /* ── Tipografia ── */
  --font-family:           'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* ── Escala Tipográfica (rem) ── */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.0625rem;  /* 17px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */

  /* ── Line Heights ── */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.65;

  /* ── Letter Spacing ── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* ── Espaçamento ── */
  --space-xs:   0.25rem;   /* 4px */
  --space-sm:   0.5rem;    /* 8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */
  --section-padding: clamp(3rem, 8vw, 6rem);

  /* ── Bordas ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Sombras (tokens) ── */
  --shadow-sm:   0 2px 8px rgba(8, 33, 3, 0.06);
  --shadow-md:   0 4px 16px rgba(8, 33, 3, 0.08);
  --shadow-lg:   0 8px 32px rgba(8, 33, 3, 0.12);
  --shadow-xl:   0 12px 48px rgba(8, 33, 3, 0.16);

  /* ── Layout ── */
  --container-max:   1200px;
  --container-pad:   1.5rem;
  --grid-gap:        1.5rem;
  --header-height:   4rem;   /* 64px mobile */

  /* ── Z-Index ── */
  --z-base:      0;
  --z-cards:     10;
  --z-header:    1000;
  --z-overlay:   1050;
  --z-whatsapp:  9999;

  /* ── Transições ── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:    0.15s;
  --duration-normal:  0.3s;
  --duration-slow:    0.6s;
  --bar-duration:     800ms;
  --counter-duration: 1000ms;
  --energy-flow-duration: 2.5s;
  --energy-flow-delay:    400ms;

  /* ── Breakpoints (referência — use em min-width) ── */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}

/* ── Breakpoint Overrides (Desktop) ── */
@media (min-width: 1024px) {
  :root {
    --container-pad:   3rem;
    --grid-gap:        2rem;
    --header-height:   4.5rem;  /* 72px desktop */
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0s;
    --duration-normal:  0s;
    --duration-slow:    0s;
  }
}