/* ==========================================================================
   Orgganica — Design tokens
   Derivados da skill orgganica-brand (direção light-first).
   Nenhuma cor fora desta paleta deve ser introduzida no site.
   ========================================================================== */

:root {
  /* --- Base clara (padrão em tudo) ------------------------------------- */
  --c-bg: #faf7f5;
  --c-surface: #ffffff;
  --c-border: #ede7e3;

  /* --- Texto ------------------------------------------------------------
     Ratios verificados sobre --c-bg (#FAF7F5):
       #222222 = 14,92:1 · #424242 = 9,42:1 · #5C5C5C = 6,27:1 · #6B6B6B = 5,05:1 */
  --c-text: #222222;
  --c-text-2: #5c5c5c;
  --c-text-3: #6b6b6b;
  --c-graphite: #424242;

  /* --- Acentos ----------------------------------------------------------
     Coral: ação e destaque. NUNCA em corpo de texto sobre fundo claro (3,00:1);
     apenas ≥24px ou ≥19px bold. Em botão coral, o texto vai em #222 (4,98:1),
     nunca branco (3,19:1).
     Vinho: ênfase editorial em texto corrido (8,20:1 sobre a base). */
  --c-coral: #f46036;
  --c-coral-ink: #222222;
  --c-wine: #990033;

  /* --- Apoio: apenas dados e ilustração --------------------------------- */
  --c-navy: #08415c;   /* 10,25:1 sobre a base — pode carregar texto */
  --c-purple: #660066; /* 11,21:1 sobre a base — pode carregar texto */
  --c-lavender: #7f95d1; /* decorativo — NUNCA carrega texto */
  --c-green: #87d68d;    /* decorativo — NUNCA carrega texto */

  /* --- Superfície escura (inversão pontual: uma por página) -------------- */
  --c-dark: #1b1b1b;
  --c-dark-surface: #262626;
  --c-dark-text: #f5f2f0;
  --c-dark-text-2: #bdb8b5;
  --c-dark-border: #3a3a3a;
  /* Sobre --c-dark, o coral atinge 5,29:1 — pode carregar texto na inversão. */

  /* --- Tipografia -------------------------------------------------------- */
  --f-title: "Titillium Web", Calibri, "Segoe UI", sans-serif;
  --f-body: "Open Sans", Calibri, "Segoe UI", sans-serif;

  /* Escala fluida — mobile first, cresce até o container máximo */
  --t-display: clamp(2.25rem, 1.55rem + 3.1vw, 4.25rem);
  --t-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --t-h2: clamp(1.625rem, 1.35rem + 1.3vw, 2.375rem);
  --t-h3: clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem);
  --t-h4: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.42vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-caption: 0.8125rem;
  --t-kicker: 0.75rem;
  --t-data: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);

  --lh-tight: 1.12;
  --lh-title: 1.2;
  --lh-body: 1.65;
  --ls-kicker: 0.12em;
  --ls-title: -0.015em;

  /* --- Espaçamento ------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Respiro vertical entre seções — o espaço em branco é o principal
     recurso de sofisticação da marca. */
  --section-y: clamp(4rem, 2.5rem + 6.5vw, 8rem);

  /* --- Container --------------------------------------------------------- */
  --w-max: 1160px;
  --w-read: 760px;   /* container de leitura: 700–1000px */
  --w-narrow: 620px;
  --gutter: clamp(1.25rem, 0.85rem + 1.8vw, 2.5rem);

  /* --- Forma ------------------------------------------------------------- */
  --r-btn: 6px;
  --r-card: 8px;
  --r-pill: 999px;

  /* Sombra sempre leve — nunca bevel, nunca sombra pesada */
  --shadow: 0 1px 3px rgba(34, 34, 34, 0.06);
  --shadow-hover: 0 4px 16px rgba(34, 34, 34, 0.08);

  /* --- Movimento --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;
  --dur-slow: 640ms;

  --header-h: 68px;
}

@media (min-width: 900px) {
  :root {
    --header-h: 80px;
  }
}