@charset "UTF-8";

/* Hallmark - macrostructure: Split Studio (diptique) + bandas alternadas
 * nav: N9 edge-aligned minimal (audit reprovou o N1b anterior - wordmark
 *   + links inline + CTA-direita = fingerprint mais reconhecido de "nav
 *   de IA"; trocado por wordmark hard-left + CTA hard-right, sem fileira
 *   de links) - footer: banda rose + barra escura
 * theme: studied-DNA (source: url) - source-url: https://draclarissaleite.com.br/
 * paper oklch(95.31% 0.0173 99.6) #F2F0E3 - accent oklch(61.09% 0.0599 42.5) #A37867
 * display: Philosopher (romana) - body: Open Sans
 * tone: acolhedor-editorial - studied: yes
 * pre-emit critique: P5 H5 E5 S4 R5 V4
 * ---------------------------------------------------------------------------
 * CORRECAO DE AUDIT (retroativa): o stamp original dizia "Marquee Hero",
 * mas o hero sempre foi um diptique texto|foto com subhead e CTA no fold -
 * o oposto da definicao de Marquee Hero (sem subhead, sem CTA no fold, um
 * unico visual preenchendo a viewport). A forma real sempre foi Split
 * Studio; o nome estava errado desde o primeiro build, corrigido aqui para
 * que a proxima rotacao de macroestrutura compare contra o que existe.
 * ---------------------------------------------------------------------------
 * TOKENS. Toda cor e toda fonte da pagina referenciam um nome daqui.
 * Nenhum valor cru (hex / oklch / rgb) pode aparecer em styles.css.
 * Os OKLCH abaixo foram convertidos a partir dos hexes lidos do CSS computado
 * da referencia - o hex no comentario ao lado e a fonte da verdade.
 */

:root {
  /* ---- Cor ---------------------------------------------------------------
   * ATENCAO: a referencia usa #A37867 com texto branco, o que da apenas
   * 3.86:1 de contraste e REPROVA no WCAG AA (minimo 4.5:1 para texto normal).
   * Por isso a paleta tem dois niveis de acento:
   *   --color-accent      decorativo. Nunca carrega texto abaixo de 24px.
   *   --color-accent-ink  8% mais escuro. Carrega texto pequeno e preenche
   *                       botoes. Branco sobre ele da 5.43:1 (passa AA).
   * Visualmente sao o mesmo tom; a diferenca so aparece lado a lado.
   */
  --color-paper:       oklch(100.00% 0.0000 89.9); /* #FFFFFF */
  --color-paper-2:     oklch(95.31%  0.0173 99.6); /* #F2F0E3 creme */
  --color-paper-3:     oklch(92.19%  0.0223 80.7); /* #EDE4D5 areia */
  --color-paper-4:     oklch(84.63%  0.0411 53.8); /* #E3C6B4 rose */

  --color-accent:      oklch(61.09%  0.0599 42.5); /* #A37867 taupe decorativo */
  --color-accent-ink:  oklch(52.96%  0.0637 39.2); /* #8C5F50 taupe legivel  */
  --color-ink-deep:    oklch(40.61%  0.0262 43.6); /* #56453E marrom profundo */

  --color-text:        oklch(32.11%  0.0000 89.9); /* #333333 - 12.63:1 no branco */
  --color-text-soft:   oklch(48.00%  0.0080 60.0); /* corpo secundario */
  --color-text-invert: oklch(100.00% 0.0000 89.9);

  --color-rule:        oklch(84.63%  0.0411 53.8 / 0.55);
  --color-rule-strong: oklch(61.09%  0.0599 42.5 / 0.40);
  --color-focus:       oklch(40.61%  0.0262 43.6);

  /* Verde do WhatsApp. Usado UMA unica vez, so no icone dentro da bolha,
   * para reconhecimento imediato. Nao entra em nenhuma outra superficie. */
  --color-whatsapp:    oklch(72.00%  0.1900 145.0);

  /* ---- Tipografia --------------------------------------------------------- */
  --font-display: "Philosopher", Georgia, "Times New Roman", serif;
  --font-body:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-xs:      0.8125rem;  /*  13px - micro-labels */
  --text-sm:      0.9375rem;  /*  15px - botoes, legendas */
  --text-base:    1rem;       /*  16px - corpo */
  --text-lg:      1.0625rem;  /*  17px - corpo de destaque */
  --text-xl:      clamp(1.125rem, 1.05rem + 0.40vw, 1.375rem);
  --text-2xl:     clamp(1.375rem, 1.20rem + 0.80vw, 1.75rem);
  --text-3xl:     clamp(1.75rem,  1.45rem + 1.40vw, 2.375rem); /* titulos de secao */
  --text-display: clamp(2.25rem,  1.65rem + 2.90vw, 3.75rem);  /* headline do hero */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.65;

  --measure:       62ch; /* largura maxima de paragrafo */
  --measure-tight: 34ch; /* largura maxima de headline */

  /* ---- Espaco (escala 4pt) ------------------------------------------------ */
  --space-3xs: 0.25rem;  /*   4px */
  --space-2xs: 0.5rem;   /*   8px */
  --space-xs:  0.75rem;  /*  12px */
  --space-sm:  1rem;     /*  16px */
  --space-md:  1.5rem;   /*  24px */
  --space-lg:  2rem;     /*  32px */
  --space-xl:  3rem;     /*  48px */
  --space-2xl: 4rem;     /*  64px */
  --space-3xl: 6rem;     /*  96px */
  --space-4xl: 8rem;     /* 128px */

  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --shell:        72rem;
  --shell-narrow: 46rem;

  /* ritmo vertical das secoes - generoso, herdado do DNA da referencia */
  --section-pad: clamp(3.5rem, 3rem + 5vw, 7rem);

  /* ---- Forma -------------------------------------------------------------- */
  --radius-pill: 30px; /* botoes - valor exato da referencia */
  --radius-card: 10px; /* cards e imagens - valor exato da referencia */
  --rule-hair:   1px;

  --shadow-rest:  0 1px 2px oklch(40.61% 0.0262 43.6 / 0.06);
  --shadow-lift:  0 12px 28px -8px oklch(40.61% 0.0262 43.6 / 0.18),
                  0 4px 8px -4px   oklch(40.61% 0.0262 43.6 / 0.10);
  --shadow-float: 0 6px 20px -4px  oklch(40.61% 0.0262 43.6 / 0.28);

  /* ---- Movimento ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in:     cubic-bezier(0.70, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 620ms;

  --stagger: 80ms; /* atraso entre irmaos na revelacao por scroll */
}