/* ==========================================================================
   TOKENS
   É aqui (e só aqui) que se trocam as paletas, as formas e as medidas.
   ========================================================================== */

/* Cores registadas com @property para o browser as poder interpolar.
   Basta mudar o valor no atributo data-vertente do <html> e tudo o que usa
   var(--paper), var(--field)... desliza para a nova paleta (ver transition no :root). */
@property --paper   { syntax: '<color>'; inherits: true; initial-value: #EDEFE7; }
@property --paper-2 { syntax: '<color>'; inherits: true; initial-value: #E1E5D6; }
@property --field   { syntax: '<color>'; inherits: true; initial-value: #6B775F; }
@property --deep    { syntax: '<color>'; inherits: true; initial-value: #2E382B; }
@property --ink     { syntax: '<color>'; inherits: true; initial-value: #222A20; }
@property --ink-soft{ syntax: '<color>'; inherits: true; initial-value: #4A5546; }
@property --accent  { syntax: '<color>'; inherits: true; initial-value: #55614A; }
@property --line    { syntax: '<color>'; inherits: true; initial-value: rgba(34, 42, 32, .18); }

:root {
  /* ---- Cores exatas dos logos (fixas: não transitam) ---------------------- */
  --c-eventos:  #74806A;
  --c-catering: #A16648;
  --white: #fff;
  --error: #B3261E;

  /* ---- Tipografia ---------------------------------------------------------- */
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --font-text: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --fs-hero: clamp(2.85rem, 1rem + 7vw, 6.75rem);
  --fs-h2:   clamp(2.15rem, 1.35rem + 3.4vw, 4.4rem);
  --fs-h3:   clamp(1.45rem, 1.3rem + .5vw, 1.75rem);
  --fs-lead: clamp(1.15rem, 1.05rem + .45vw, 1.45rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;

  /* ---- Espaçamento --------------------------------------------------------- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --section-y: clamp(4.5rem, 2.6rem + 7.5vw, 9rem);
  --gutter: clamp(1.25rem, .6rem + 3vw, 3rem);
  --container: 77.5rem;
  --header-h: 4.25rem;   /* só usado nas páginas simples (obrigado, privacidade) */
  --hd-clear: 7.5rem;   /* espaço por baixo da pílula fixa: scroll-margin das secções */

  /* ---- Raios e sombras ----------------------------------------------------- */
  --r-sm: .375rem;
  --r-md: .75rem;
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgb(0 0 0 / .05), 0 12px 32px -12px rgb(0 0 0 / .22);

  /* ---- Movimento ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .25, 1);
  --t-palette: 1100ms;   /* duração da transição de paleta entre vertentes */
  --play-delay: 420ms;   /* atraso da entrada do hero ao trocar de vertente (espera o fade) */
}
html.preload { --play-delay: 60ms; }   /* no carregamento inicial não há fade para esperar */

/* ==========================================================================
   PALETAS POR VERTENTE
   Cada vertente define cores E formas. As formas ligam-se aos logos:
   Eventos = arco (portal, cerimónia)  |  Catering = folha (o raminho do logo)
   O mesmo bloco serve o <html> (cromado do site) e qualquer elemento com
   .theme-eventos / .theme-catering (os painéis e o bloco de cross-sell).
   ========================================================================== */

:root,
:root[data-vertente="eventos"],
.theme-eventos {
  --paper:    #EDEFE7;                /* fundo claro, tingido do verde do logo */
  --paper-2:  #E1E5D6;                /* secções alternadas */
  --field:    #6B775F;                /* campo de cor (hero, contacto): branco passa AA (4,74:1) */
  --deep:     #2E382B;                /* campo escuro (processo, rodapé) */
  --ink:      #222A20;                /* texto */
  --ink-soft: #4A5546;                /* texto secundário */
  --accent:   #55614A;                /* texto de realce/ligações sobre o fundo claro */
  --line:     rgba(34, 42, 32, .18);

  --win-radius: 999px 999px 0 0;                  /* janelas das fotos: arco */
  --win-radius-out: 999px 999px 0 0;              /* linha à volta: o mesmo arco, afastado (cantos = raio + distância + espessura) */
  --card-radius: 11rem 11rem 1rem 1rem;           /* cartões: arco */
  --card-align: center;
  --card-justify: center;
  --card-pad: 4.5rem 1.75rem 2.25rem;
  --win-gap: 1rem;                                /* distância da linha à janela */
  --win-line: 4px;                                /* espessura da linha */
  --brand: var(--c-eventos);
}

:root[data-vertente="catering"],
.theme-catering {
  --paper:    #F7ECE5;
  --paper-2:  #EEDCD0;
  --field:    #A16648;                /* exatamente o terracota do logo: branco passa AA (4,66:1) */
  --deep:     #4A2A1B;
  --ink:      #33201A;
  --ink-soft: #6A4A3C;
  --accent:   #8A5237;
  --line:     rgba(51, 32, 26, .2);

  --win-radius: 12rem .75rem 12rem .75rem;        /* janelas das fotos: folha */
  --win-radius-out: calc(12rem + var(--win-gap) + var(--win-line)) calc(.75rem + var(--win-gap) + var(--win-line));  /* linha à volta: concêntrica com a janela */
  --card-radius: 4.5rem .5rem 4.5rem .5rem;       /* cartões: folha */
  --card-align: left;
  --card-justify: start;
  --card-pad: 2.5rem 1.75rem 2.25rem;
  --brand: var(--c-catering);
}

/* A paleta muda de uma vez nas variáveis; só os poucos elementos fora dos painéis (fundo da página,
   header, menu móvel e rodapé) animam a sua cor (ver components.css / base.css). Animar as próprias
   variáveis no :root obrigava a recalcular os estilos da página inteira a cada frame e travava a troca. */