/* ============================================================
   VARIABLES.CSS — Design tokens · "Melancia"
   Tema único de cores + dark/light mode via [data-theme]
   ============================================================ */

:root {
  /* ---------- Paleta base (Melancia) ---------- */
  --green-deep: #2E7D32;     /* casca escura */
  --green: #4CAF50;          /* casca */
  --green-neon: #66BB6A;     /* detalhes / glow */
  --red: #E53935;            /* polpa */
  --red-vivid: #FF1744;      /* polpa vibrante */
  --red-brand: #FA3B3F;      /* vermelho da identidade — casa exatamente com o fundo da foto */
  --red-brand-deep: #EE3438; /* vermelho de seção */
  --red-night: #2A0A08;      /* vermelho noturno (dark) */
  --seed: #1A1A1A;           /* sementes */
  --white: #FFFFFF;

  /* ---------- Gradientes assinatura ---------- */
  --grad-rind: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 55%, var(--green-neon) 100%);
  --grad-pulp: linear-gradient(135deg, var(--red) 0%, var(--red-vivid) 100%);
  --grad-hero: radial-gradient(120% 120% at 78% 30%, #FB5C50 0%, var(--red-brand) 45%, var(--red-brand-deep) 100%);
  --grad-glow: radial-gradient(circle at center, rgba(76,175,80,0.45) 0%, rgba(76,175,80,0) 70%);

  /* ---------- Tipografia ---------- */
  --font-display: "Fredoka", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Inter", system-ui, sans-serif;

  --fs-hero: clamp(2rem, 5vw, 5.5rem);
  --fs-h2:   clamp(1.2rem, 2vw, 2.2rem);
  --fs-h3:   clamp(1rem, 1.3vw, 1.4rem);
  --fs-body: clamp(0.85rem, 0.95vw, 1rem);
  --fs-small: 0.875rem;

  --lh-tight: 0.95;
  --lh-body: 1.6;

  /* ---------- Espaçamento ---------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 1.5rem;
  --space-xl: 3rem;
  --section-pad: clamp(1.5rem, 3.5vw, 4rem);

  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 40px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.25s;
  --dur-mid: 0.6s;
  --dur-slow: 1.1s;

  /* ---------- Layout ---------- */
  --maxw: 1320px;
  --header-h: 80px;
  --z-cursor: 9999;
  --z-loader: 9000;
  --z-header: 800;
}

/* ============================================================
   DARK MODE — melancia à noite (vermelho profundo)
   ============================================================ */
:root {
  --bg: var(--red-night);
  --bg-elev: #3A100D;
  --bg-section: #210806;
  --text: #FFF3F1;
  --text-muted: rgba(255, 214, 209, 0.72);
  --border: rgba(255, 120, 110, 0.18);
  --card-bg: rgba(60, 16, 13, 0.62);
  --card-border: rgba(255, 120, 110, 0.22);
  --shadow-soft: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 60px -10px rgba(102, 187, 106, 0.45);
  --overlay: rgba(20, 6, 5, 0.6);
  --accent: var(--green-neon);
  --on-accent: #07210A;
}