/* ==========================================================================
   VARIABLES.CSS
   Paleta de cores e tokens de design.
   Tema claro  -> fundo branco, verde como cor primária (logo claro)
   Tema escuro -> fundo preto (igual o logo escuro), mesmo verde de destaque
   Troque os valores abaixo para ajustar a identidade visual em TODO o site.
   ========================================================================== */

:root {
  /* Tipografia */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Espaçamentos */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* Layout */
  --container-width: 1180px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* Transições */
  --transition-fast: 0.18s ease;
  --transition-base: 0.3s ease;
}

/* ---------- TEMA CLARO (padrão) — branco + verde ---------- */
:root,
[data-theme='light'] {
  --color-bg: #ffffff;
  --color-bg-alt: #f2f8ec;
  --color-surface: #ffffff;
  --color-surface-alt: #f7fbf3;

  --color-text: #181a17;
  --color-text-muted: #5c6158;
  --color-text-inverse: #ffffff;

  --color-primary: #5da82e;
  --color-primary-dark: #457a20;
  --color-primary-contrast: #ffffff;

  --color-secondary: #181a17;
  --color-secondary-light: #3a3d37;

  --color-border: #e3e9dd;
  --color-success: #2f9e44;
  --color-danger: #e03131;

  --shadow-sm: 0 2px 8px rgba(24, 26, 23, 0.06);
  --shadow-md: 0 10px 30px rgba(24, 26, 23, 0.10);
  --shadow-lg: 0 20px 45px rgba(24, 26, 23, 0.16);

  --gradient-primary: linear-gradient(135deg, #8bc34a 0%, #5da82e 55%, #457a20 100%);
  --gradient-hero: radial-gradient(circle at 20% 20%, #f2f8ec 0%, #ffffff 55%, #e8f2df 100%);

  color-scheme: light;
}

/* ---------- TEMA ESCURO — preto (igual o logo escuro) + verde ---------- */
[data-theme='dark'] {
  --color-bg: #0a0a0a;
  --color-bg-alt: #121412;
  --color-surface: #161816;
  --color-surface-alt: #1a1c19;

  --color-text: #f2f2ef;
  --color-text-muted: #a8aca4;
  --color-text-inverse: #0a0a0a;

  --color-primary: #8bc34a;
  --color-primary-dark: #6fa82e;
  --color-primary-contrast: #0a0a0a;

  --color-secondary: #c9cdc4;
  --color-secondary-light: #e4e7e0;

  --color-border: #272923;
  --color-success: #51cf66;
  --color-danger: #ff6b6b;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 55px rgba(0, 0, 0, 0.65);

  --gradient-primary: linear-gradient(135deg, #9ccb5b 0%, #7cb342 55%, #5da82e 100%);
  --gradient-hero: radial-gradient(circle at 20% 20%, #141614 0%, #0a0a0a 55%, #101210 100%);

  color-scheme: dark;
}