/* ==========================================================================
   Lua de Cristal Eventos — Tokens
   Paleta validada em WCAG (ver seção 9 do documento de especificação).
   Não "clarear um pouquinho" nenhum valor abaixo sem recalcular o contraste.
   ========================================================================== */

:root {
  /* --- Cor: marca ------------------------------------------------------- */
  --color-primary:          #6D4FA8;  /* 6,10:1 AA  — botão, link, aba ativa */
  --color-primary-strong:   #5B3E93;  /* 7,96:1 AAA — hover / pressed        */
  --color-on-primary:       #FFFFFF;
  --color-primary-surface:  #EFE9F9;

  --color-secondary:         #1F5F85; /* 6,71:1 AA  — página Eventos         */
  --color-secondary-strong:  #17485F;
  --color-secondary-surface: #E4F2FA;

  --color-accent:          #C2185B;   /* 5,69:1 AA  — página Festa Infantil  */
  --color-accent-strong:   #9E1249;
  --color-accent-surface:  #FBE9F0;

  --color-gold:            #7A5C25;   /* 6,01:1 AA  — detalhe metálico       */

  /* --- Cor: superfície e texto ------------------------------------------ */
  --color-background:       #FDFBF9;
  --color-card:             #FFFFFF;
  --color-foreground:       #1F1B2E;  /* 16,22:1 AAA */
  --color-muted-foreground: #4A4458;  /*  9,01:1 AAA */

  --color-border:         #D9CCF0;    /* 1,47:1 — DECORATIVO. Nunca em campo de formulário. */
  --color-border-strong:  #8D7BB0;    /* 3,30:1 — borda de campo e de botão  */

  --color-success:     #1B7A46;
  --color-destructive: #B3261E;
  --color-ring:        #6D4FA8;

  --color-whatsapp:        #1D7A4C;   /* verde escurecido: 4,9:1 sobre branco */
  --color-whatsapp-strong: #15603B;

  /* --- Cor da página (sobrescrita por [data-page] em base.css) ----------- */
  --page-accent:         var(--color-primary);
  --page-accent-strong:  var(--color-primary-strong);
  --page-surface:        var(--color-primary-surface);
  --page-on-accent:      var(--color-on-primary);

  /* --- Tipografia -------------------------------------------------------- */
  --font-display: "Fredoka", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Nunito", "Segoe UI", system-ui, sans-serif;

  --fs-hero:      clamp(2rem,   1.30rem + 3.0vw, 3.25rem);  /* 32 → 52px  */
  --fs-section:   clamp(1.625rem, 1.27rem + 1.5vw, 2.375rem); /* 26 → 38px */
  --fs-card:      clamp(1.1875rem, 1.15rem + 0.16vw, 1.3125rem); /* 19 → 21px */
  --fs-lead:      clamp(1.125rem, 1.06rem + 0.27vw, 1.25rem);  /* 18 → 20px */
  --fs-body:      clamp(1rem, 0.98rem + 0.13vw, 1.0625rem);    /* 16 → 17px */
  --fs-small:     0.875rem;                                     /* 14px     */
  --fs-label:     1rem;

  --lh-hero: 1.15;
  --lh-section: 1.2;
  --lh-card: 1.3;
  --lh-body: 1.6;

  /* --- Espaçamento (base 4px) — nada fora da escala ---------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px;

  --space-section: 64px;   /* mobile  */
  --space-card-gap: 16px;
  --space-inline: 20px;

  --content-max: 1200px;
  --measure: 65ch;

  /* --- Raio -------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* --- Elevação (sombra na matiz da marca, nunca preto puro) ------------- */
  --shadow-1: 0 1px 3px rgba(31,27,46,.06),  0 4px 12px rgba(109,79,168,.06);
  --shadow-2: 0 4px 8px rgba(31,27,46,.08),  0 12px 28px rgba(109,79,168,.10);
  --shadow-3: 0 12px 32px rgba(31,27,46,.12);

  /* --- z-index: definido de uma vez, sem guerra de 9999 ------------------ */
  --z-content: 0;
  --z-sticky-in-section: 10;
  --z-header: 20;
  --z-fixed-bar: 40;
  --z-lightbox: 100;
  --z-toast: 1000;

  /* --- Motion ------------------------------------------------------------ */
  --dur-micro: 150ms;
  --dur-base:  250ms;
  --dur-enter: 400ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.4,0,1,1);
}

@media (min-width: 768px) {
  :root {
    --space-section: 96px;
    --space-card-gap: 24px;
    --space-inline: 48px;
  }
}

/* --- Cor por página: o corpo muda, o cabeçalho e o rodapé não ------------ */
[data-page="festa-infantil"] {
  --page-accent:        var(--color-accent);
  --page-accent-strong: var(--color-accent-strong);
  --page-surface:       var(--color-accent-surface);
}
[data-page="eventos"] {
  --page-accent:        var(--color-secondary);
  --page-accent-strong: var(--color-secondary-strong);
  --page-surface:       var(--color-secondary-surface);
}
[data-page="galeria"] {
  --page-surface: var(--color-background);
}