/* ============================================================================
   Dra. Nagibe Tayfour — Tokens de identidade
   Cores extraidas dos arquivos originais da marca (logo + papelaria).
   Alterar uma cor do site = alterar UMA linha aqui.
   ========================================================================= */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --navy: #141d3a;          /* wordmark "Nagibe Tayfour" */
  --navy-deep: #0d1428;     /* blocos escuros / rodape */
  --navy-soft: #2a3557;     /* bordas e linhas sobre navy */
  --wine: #6e0b1f;          /* simbolo floral */
  --wine-deep: #520616;     /* hover do botao principal */
  --wine-soft: #c27485;     /* vinho clareado p/ uso SOBRE navy — 4.84:1, passa AA */

  /* --- Superficies ------------------------------------------------------ */
  --white: #ffffff;
  --off-white: #faf8f5;
  --soft-bg: #f4efec;       /* blush da aquarela do papel timbrado */
  --border: #e6ded9;
  --border-strong: #d5c9c2;

  /* --- Texto ------------------------------------------------------------ */
  --text: #29313d;
  --muted: #686d77;         /* 4.55:1 sobre o blush, 5.19:1 sobre branco — AA */
  --on-dark: #eef0f5;
  --on-dark-muted: #a7aec2;

  /* --- Tipografia ------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-hero: clamp(2.75rem, 5.2vw, 5rem);
  --fs-h1: clamp(2.4rem, 4.2vw, 3.9rem);
  --fs-h2: clamp(2rem, 3.2vw, 3rem);
  --fs-h3: clamp(1.4rem, 1.9vw, 1.85rem);
  --fs-lead: clamp(1.05rem, 1.25vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.08;
  --lh-title: 1.16;
  --lh-body: 1.72;

  --track-eyebrow: 0.22em;
  --track-caps: 0.16em;

  /* --- Espaco ----------------------------------------------------------- */
  --container: 1280px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --section-y-sm: clamp(3.25rem, 6vw, 5.5rem);

  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;

  /* --- Formas ----------------------------------------------------------- */
  /* A Dra. Nagibe pediu, em 02/09/2026: "o site esta muito quadrado, quero mais arredondado".
     Os valores eram 2px / 4px / 8px — praticamente cantos vivos.

     🎯 Mudar AQUI arredonda o site inteiro: os 18 lugares que aplicam raio usam estes tokens e
     nenhum escreve o valor a mao. Era para isto que os tokens existiam.

     A escala e proporcional ao tamanho da peca: um campo de formulario com 28px de raio fica
     deformado, e uma foto de 600px de altura com 8px continua a parecer quadrada. */
  --radius-sm: 8px;    /* etiquetas, avisos, foco */
  --radius: 16px;      /* botoes, cartoes, campos — o cavalo de batalha */
  --radius-lg: 28px;   /* molduras de imagem e blocos grandes */
  --radius-pill: 999px; /* so onde a forma E o significado: o botao redondo do WhatsApp */
  --shadow-soft: 0 1px 2px rgba(20, 29, 58, 0.04), 0 12px 32px -18px rgba(20, 29, 58, 0.22);
  --shadow-lift: 0 2px 4px rgba(20, 29, 58, 0.05), 0 22px 48px -24px rgba(20, 29, 58, 0.3);

  /* --- Movimento -------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 250ms;
  --t-base: 380ms;
  --t-slow: 520ms;

  /* O cruzamento entre duas fotos do slideshow. E o unico movimento do site que a pessoa NAO pediu:
     comeca sozinho e repete. Por isso e deliberadamente mais lento que o `--t-slow` — na velocidade
     de uma interacao ele parece um erro de carregamento, e nao uma troca de imagem. */
  --t-lamina: 900ms;

  --header-h: 104px;
  --header-h-scrolled: 84px;
}