/* ==========================================================================
   Mariana e André · 28 de maio de 2027
   base.css — identidade comum a todas as páginas
   (cores, fontes, texturas, tipografia e utilitários)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Fontes (alojadas em assets/fonts)
   Alojadas em assets/fonts (sem dependência do Google).
   Substitutas provisórias do Save the Date:
   - Cormorant SC / Cormorant Garamond → maiúsculas e texto
   - Corinthia → conectores caligráficos («e», «and»)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant SC";
  src: url("../assets/fonts/cormorant-sc-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant SC";
  src: url("../assets/fonts/cormorant-sc-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Corinthia";
  src: url("../assets/fonts/corinthia.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. Variáveis de identidade
   -------------------------------------------------------------------------- */
:root {
  /* Papel */
  --ivory:        #EFEAE0;   /* fundo da página */
  --env-paper:    #F8F6F1;   /* envelope, face exterior */
  --env-pocket:   #F5F3ED;   /* bolsa */
  --env-inside:   #E9E5DC;   /* interior do envelope */
  --env-liner:    #F1EEE7;   /* forro da aba */
  --card-paper:   #FCFAF6;   /* cartão */

  /* Tinta */
  --olive-900:    #393B20;   /* nomes e títulos */
  --olive-800:    #46482A;   /* texto principal */
  --olive-600:    #5E6038;   /* botão, detalhes */
  --khaki:        #7A7250;   /* data e local (como no Save the Date) */
  --neutral-600:  #6E695B;   /* texto secundário */
  --rule:         rgba(70, 72, 42, .28);
  --error:        #7A5236;

  /* Tipografia */
  --font-caps:    "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --font-serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-script:  "Corinthia", "Cormorant Garamond", cursive;

  /* Texturas (SVG gerado, sem imagens externas) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .30 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cotton: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028 .042' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='2.2' lighting-color='%23ffffff' diffuseConstant='1.15'%3E%3CfeDistantLight azimuth='225' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");

  /* Movimento */
  --ease-paper:   cubic-bezier(.45, .05, .25, 1);
  --ease-out:     cubic-bezier(.22, .8, .3, 1);
  --ease-settle:  cubic-bezier(.65, 0, .25, 1);

  /* Largura final do convite: 92% do ecrã, no máximo 33 rem,
     limitada pela altura (proporção 2:3) e nunca abaixo de 280 px.
     O cartão tem SEMPRE esta largura; dentro do envelope é apenas
     reduzido por escala → tipografia idêntica do início ao fim. */
  --card-w: max(280px, min(92vw, 33rem, calc(94vh / 1.5)));
}
@supports (height: 1svh) {
  :root { --card-w: max(280px, min(92vw, 33rem, calc(94svh / 1.5))); }
}


/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--ivory);
  background-image: var(--grain);
  color: var(--olive-800);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.noscript {
  position: fixed; inset: auto 0 2rem 0;
  text-align: center;
  font-family: var(--font-serif);
  color: var(--neutral-600);
}