/* ==========================================================================
   REAL 77 — Revestimentos Naturais · Design tokens ("Terra Nobre")
   Paleta derivada do logo (navy #183260 · ouro #DFA54C · creme #F5E3C7).
   Assinatura dominante: DOURADO (brasão da logo) — não terracota, para não
   repetir a paleta do projeto de referência (Ray's Cleaning). Terracota vira
   um toque raro, só em momentos de "barro/terra" (storytelling da olaria).
   CTA WhatsApp: verde profundo (briefing).
   ========================================================================== */

:root {
  /* --- Color --- */
  --ink: #121F38;         /* navy do logo, escurecido p/ headlines 15:1 */
  --ink-soft: #43506A;    /* texto de apoio */
  --gold-soft: #E9C07E;   /* ouro claro — ícones/títulos sobre navy */
  --tide: #274777;        /* navy médio — links, foco, UI */
  --linen: #F8F4EC;       /* fundo base quente */
  --paper: #FDFBF6;       /* cards */
  --sand: #E9DCC2;        /* areia presente */
  --sand-soft: #F2EBDB;   /* blocos alternados */
  --gold: #DFA54C;        /* ouro do logo — assinatura visual, ornamentos grandes */
  --gold-deep: #8A5A12;   /* bronze — accent dominante do site (eyebrow, hovers, ≥4.5:1) */
  --ember: #C0642F;       /* terracota — só em momentos de "barro/terra" (raro, storytelling) */
  --ember-deep: #904018;  /* terracota para texto (≥4.5:1 no linen) */
  --leaf: #14603A;        /* verde profundo — CTA WhatsApp (briefing) */
  --leaf-deep: #0E4A2C;   /* hover do CTA verde */
  --line: rgba(18, 31, 56, 0.14);

  /* --- Shadow (warm navy, never pure grey) --- */
  --shadow-sm: 0 1px 3px rgba(18, 31, 56, 0.07);
  --shadow-md: 0 6px 24px -6px rgba(18, 31, 56, 0.10);
  --shadow-lg: 0 18px 48px -12px rgba(18, 31, 56, 0.14);

  /* --- Type --- */
  --font-serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sans: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-display: clamp(2.55rem, 2.5vw + 1.9rem, 4rem);
  --text-h2: clamp(1.9rem, 1.6vw + 1.45rem, 2.7rem);
  --text-h3: clamp(1.25rem, 0.5vw + 1.1rem, 1.45rem);
  --text-lead: 1.185rem;
  --text-body: 1rem;      /* = 18px */
  --text-small: 0.89rem;  /* = 16px — mínimo do site */
  --text-eyebrow: 0.82rem;

  --leading-body: 1.7;
  --leading-tight: 1.15;

  /* --- Space (4px grid) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  --section-pad: clamp(4.5rem, 8vw, 7.5rem);
  --container: 72.5rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Shape --- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  /* Assinatura visual do projeto: cantos assimétricos "fiada de tijolo" */
  --radius-arch: 44px 12px 44px 12px;
  --radius-arch-flip: 12px 44px 12px 44px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 400ms;
  --dur-ui: 200ms;

  /* --- Focus --- */
  --focus-ring: 3px solid var(--tide);
  --focus-ring-dark: 3px solid var(--gold-soft);
}