/* ==========================================================================
   variables.css — Tema Laís Almeida | Método MATERA®
   Identidade: delicadeza, acolhimento e sofisticação. Tons neutros e terrosos.
   ========================================================================== */

:root {
  /* ---------- Paleta da marca ---------- */
  --brand-off-white:  #EDE1D5;  /* Off-white  */
  --brand-bege-claro: #DDCCBA;  /* Bege claro */
  --brand-bege-medio: #C4B29E;  /* Bege médio */
  --brand-nude:       #BFA690;  /* Nude/taupe */
  --brand-marrom:     #7E4323;  /* Marrom escuro */
  --brand-terracota:  #AF643A;  /* Terracota  */

  /* Neutros derivados (mesma família quente, para leitura confortável) */
  --brand-linho:      #FAF5EF;  /* branco quente para superfícies    */
  --brand-tinta:      #3A2318;  /* marrom profundo para texto longo  */
  --brand-tinta-suave:#6E574A;  /* texto de apoio                    */

  /* ---------- Tokens semânticos ---------- */
  --bg-base:        var(--brand-off-white);
  --bg-soft:        var(--brand-linho);
  --bg-muted:       var(--brand-bege-claro);
  --bg-deep:        var(--brand-marrom);
  --bg-accent:      var(--brand-terracota);

  --text-primary:   var(--brand-tinta);
  --text-secondary: var(--brand-tinta-suave);
  --text-brand:     var(--brand-marrom);
  --text-accent:    var(--brand-terracota);
  --text-inverse:   var(--brand-off-white);
  --text-inverse-soft: rgba(237, 225, 213, 0.76);

  --border-soft:    rgba(126, 67, 35, 0.14);
  --border-medium:  rgba(126, 67, 35, 0.26);
  --border-inverse: rgba(237, 225, 213, 0.24);

  --overlay-warm:   rgba(58, 35, 24, 0.42);

  /* ---------- Tipografia ---------- */
  /* Títulos: substituta gratuita de "The Seasons".
     Ao receber os arquivos da fonte original, declare o @font-face abaixo
     e troque APENAS o primeiro nome de --font-display. */
  --font-display: "Cormorant Garamond", "The Seasons", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

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

  /* Escala fluida (mobile-first, cresce até o desktop) */
  --fs-xs:   clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --fs-sm:   clamp(0.8125rem, 0.79rem + 0.14vw, 0.875rem);
  --fs-base: clamp(0.9375rem, 0.91rem + 0.16vw, 1.0625rem);
  --fs-md:   clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem);
  --fs-lg:   clamp(1.375rem, 1.24rem + 0.68vw, 1.875rem);
  --fs-xl:   clamp(1.75rem, 1.49rem + 1.28vw, 2.75rem);
  --fs-2xl:  clamp(2.125rem, 1.66rem + 2.32vw, 4rem);
  --fs-3xl:  clamp(2.5rem, 1.79rem + 3.55vw, 5.25rem);

  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-base: 1.75;
  --lh-relaxed: 1.85;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.18em;

  /* ---------- Espaçamento ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter:    clamp(1.25rem, 0.7rem + 2.6vw, 3rem);

  /* ---------- Layout ---------- */
  --container: 74rem;
  --container-narrow: 48rem;
  --header-h: 4.5rem;

  /* ---------- Formas ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-arch: 50% 50% 10px 10px / 22% 22% 10px 10px; /* arco editorial */

  --shadow-sm: 0 1px 2px rgba(58, 35, 24, 0.05);
  --shadow-md: 0 12px 30px -18px rgba(58, 35, 24, 0.30);
  --shadow-lg: 0 30px 70px -40px rgba(58, 35, 24, 0.45);

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 720ms;

  --z-header: 100;
  --z-menu: 110;
}

/* Ao obter a licença de "The Seasons", descomente e coloque os arquivos em /assets/fonts
@font-face {
  font-family: "The Seasons";
  src: url("../assets/fonts/theseasons-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src: url("../assets/fonts/theseasons-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
*/