/* =============================================================
   PEDRO & JULIA — DESIGN SYSTEM / TOKENS
   Mundo visual: "Arco & Sombra"
   Duas cores fazem tudo: PALMA (verde profundo) e AREIA (papel quente).
   A PALMA é o texto no claro e o fundo no escuro — invertida em si mesma.
   Toda cor abaixo deriva da paleta entregue pelos noivos
   (referencias/paleta-de-cores.png). Nada foi escolhido fora dela.
   ============================================================= */

/* ---------- 0. FONTES ----------
   Auto-hospedadas. O protótipo precisa abrir por duplo clique e viajar
   como link: no CDN, offline ou em file://, a identidade inteira cairia
   para Times New Roman. Jost é variável (300–500 num arquivo só). */
@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/prata-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* ---------- 1. PALETA OFICIAL DOS NOIVOS (vinculante) ---------- */
  --rosa-cha: #fadde1;
  --rosa-suave: #f4b6c2;
  --laranja-claro: #f5a384;
  --pessego-suave: #fce7d6;
  --verde-claro: #b7c8a6;
  --verde-oliva: #8fa586;
  --marrom-suave: #a07c60;
  --marrom-escuro: #6b4e3d;

  /* ---------- 2. DERIVADAS ----------
     Palma = Verde Oliva no mesmo matiz (101°), rebaixado a L16%.
     Areia = Pêssego Suave dessaturado até virar papel. */
  --palma: #23301f;
  --palma-alta: #2e3d28; /* superfície elevada sobre palma */
  --palma-fio: #405039; /* fio sobre palma */
  --areia: #fbf6ee;
  --areia-alta: #ffffff;
  --areia-fundo: #f4ece0; /* recuo sobre areia */

  /* ---------- 3. TOKENS SEMÂNTICOS ---------- */
  /* Primary  — a cor que carrega a marca e a maioria das ações */
  --primary: var(--palma);
  --primary-hover: #17210f;
  --primary-contraste: var(--areia);

  /* Secondary — a voz calma, usada em fundos e traços */
  --secondary: var(--verde-oliva);
  --secondary-suave: var(--verde-claro);

  /* Accent — só aparece dentro de moldura. Nunca solto no campo. */
  --accent: var(--laranja-claro);
  --accent-hover: #ee8f6c;
  --accent-contraste: var(--palma);

  /* Background / Surface */
  --bg: var(--areia);
  --bg-blush: var(--rosa-cha);
  --bg-pessego: var(--pessego-suave);
  --bg-deep: var(--palma);
  --surface: var(--areia-alta);
  --surface-recuo: var(--areia-fundo);
  --surface-deep: var(--palma-alta);

  /* Text */
  --text: var(--palma);
  --text-muted: #4d5c47;
  --text-fraco: #6d7a67;
  --text-on-deep: var(--areia);
  --text-on-deep-muted: #aab5a3;

  /* Border */
  --border: rgba(35, 48, 31, 0.18);
  --border-forte: rgba(35, 48, 31, 0.42);
  --border-on-deep: rgba(251, 246, 238, 0.24);
  --border-on-deep-forte: rgba(251, 246, 238, 0.55);

  /* Estados */
  --success: #557a45;
  --success-bg: #e8efe0;
  --warning: #b0762f;
  --warning-bg: #fbeeda;
  --error: #a34b43;
  --error-bg: #f8e3e0;
  --info: var(--marrom-escuro);
  --info-bg: #f2e9e0;

  /* ---------- 4. TIPOGRAFIA ---------- */
  --ff-display: "Prata", "Times New Roman", serif;
  --ff-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* O salto extremo entre display e corpo é a identidade do sistema.
     Display até ~9rem; corpo em 1rem. Razão de ~9:1. */
  --fs-display: clamp(3.25rem, 11.5vw, 9rem);
  --fs-h1: clamp(2.75rem, 7.6vw, 5.5rem);
  --fs-h2: clamp(2.375rem, 6.2vw, 4.875rem);
  --fs-h3: clamp(1.625rem, 3.1vw, 2.5rem);
  --fs-h4: clamp(1.125rem, 1.7vw, 1.5rem);
  --fs-body: 1rem;
  --fs-body-lg: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-button: 0.8125rem;
  --fs-nav: 0.8125rem;

  --lh-display: 0.94;
  --lh-heading: 1.08;
  --lh-h3: 1.18;
  --lh-body: 1.68;
  --lh-tight: 1.4;

  --ls-display: -0.018em;
  --ls-heading: -0.012em;
  --ls-body: 0.005em;
  --ls-caption: 0.16em;
  --ls-button: 0.06em;
  --ls-nav: 0.05em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* ---------- 5. ESPAÇAMENTO (escala 4px) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --sec-y: clamp(4.5rem, 9vw, 8.5rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;
  --maxw: 1240px;
  --maxw-larga: 1440px;

  /* ---------- 6. FORMAS ----------
     O arco é a forma-assinatura: é o arco ogival da Paróquia. */
  --arco: 999px 999px 0 0;
  --capsula: 999px;
  --r-nada: 0px; /* botões e campos são retos, com fio de 1px */
  --plate-off: 14px; /* lasca de cor que sobra sob a foto */

  /* ---------- 7. PROFUNDIDADE ---------- */
  --sh-1: 0 1px 2px rgba(35, 48, 31, 0.05), 0 2px 8px rgba(35, 48, 31, 0.04);
  --sh-2: 0 2px 4px rgba(35, 48, 31, 0.05), 0 8px 24px rgba(35, 48, 31, 0.07);
  --sh-3: 0 4px 8px rgba(35, 48, 31, 0.06), 0 20px 48px rgba(35, 48, 31, 0.11);

  /* ---------- 8. MOVIMENTO ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 200ms;
  --dur-2: 380ms;
  --dur-3: 720ms;

  --z-nav: 100;
  --z-drawer: 200;
  --z-modal: 300;
}