/* Isabelle Moraes — design tokens (cores, tipografia, espaçamento).
   Fontes carregadas via <link> no index.html. */

:root{
  /* ---- Base palette (from brand paleta-de-cores) ---- */
  --sand-50:#FBF8F4;   /* lifted cream, for cards on the base bg */
  --sand-100:#F4EFE9;  /* fundo principal — main background */
  --sand-200:#E9DDD2;  /* fundo secundário — secondary surface */
  --sand-300:#DecEc0;  /* hairline / soft borders on sand */
  --clay-400:#B3917A;  /* logo taupe — soft brand tint */
  --clay-500:#9A6C58;  /* destaque — accent */
  --clay-600:#7B4F3E;  /* botão principal — primary action */
  --clay-700:#65402F;  /* pressed / deep accent */
  --espresso-800:#4A3327; /* deep warm brown */
  --ink-900:#302B29;   /* texto principal */
  --stone-600:#655E59; /* texto secundário */
  --white:#FFFFFF;

  /* ---- Semantic surfaces ---- */
  --surface-page:var(--sand-100);
  --surface-raised:var(--sand-50);
  --surface-secondary:var(--sand-200);
  --surface-card:var(--white);
  --surface-inverse:var(--espresso-800);

  /* ---- Semantic text ---- */
  --text-strong:var(--ink-900);
  --text-body:var(--stone-600);
  --text-muted:#8A817B;
  --text-accent:var(--clay-500);
  /* Variantes com contraste WCAG AA (>=4.5:1) para textos pequenos
     sobre --sand-50 e --sand-100. Nao substituem os tokens acima. */
  --text-muted-aa:#736B65;
  --clay-aa:#8A5D4B;
  --text-accent-aa:var(--clay-aa);
  --text-on-accent:var(--white);
  --text-on-inverse:var(--sand-100);

  /* ---- Brand / action ---- */
  --brand:var(--clay-500);
  --brand-strong:var(--clay-600);
  --brand-tint:var(--clay-400);
  --action:var(--clay-600);
  --action-hover:var(--clay-700);
  --action-text:var(--white);

  /* ---- Borders / lines ---- */
  --border-soft:rgba(48,43,41,0.10);
  --border-strong:rgba(48,43,41,0.18);
  --border-accent:var(--clay-400);
  --divider:rgba(255,255,255,0.35);

  /* ---- Focus ---- */
  --focus-ring:rgba(154,108,88,0.45);
}

:root{
  /* ---- Families ---- */
  --font-display:'Cormorant Garamond',Georgia,serif; /* elegant, wordmark & big display */
  --font-heading:'Playfair Display',Georgia,serif;   /* high-contrast headings */
  --font-sans:'Montserrat',-apple-system,'Segoe UI',sans-serif; /* body & UI */

  /* ---- Type scale (fluid-friendly px) ---- */
  --text-display:clamp(3rem,6vw,5.25rem);  /* 48 → 84 */
  --text-h1:clamp(2.25rem,4vw,3.5rem);     /* 36 → 56 */
  --text-h2:clamp(1.75rem,3vw,2.5rem);     /* 28 → 40 */
  --text-h3:1.5rem;   /* 24 */
  --text-h4:1.25rem;  /* 20 */
  --text-lg:1.125rem; /* 18 */
  --text-base:1rem;   /* 16 */
  --text-sm:0.875rem; /* 14 */
  --text-xs:0.75rem;  /* 12 */

  /* ---- Weights ---- */
  --fw-light:300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:1.08; /* @kind font */
  --lh-snug:1.2; /* @kind font */
  --lh-body:1.65; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-eyebrow:0.22em;  /* wide letterspaced caps (wordmark / eyebrow) */
  --ls-label:0.08em;
  --ls-tight:-0.01em;
}

:root{
  /* ---- Spacing scale (8pt-based, with fine steps) ---- */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  /* ---- Radii ---- (brand favors soft, generous rounding & pills) */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-xl:32px;
  --radius-pill:999px;

  /* ---- Shadows ---- (warm-tinted, soft, low contrast) */
  --shadow-xs:0 1px 2px rgba(48,43,41,0.06);
  --shadow-sm:0 4px 14px rgba(74,51,39,0.08);
  --shadow-md:0 12px 32px rgba(74,51,39,0.12);
  --shadow-lg:0 24px 60px rgba(74,51,39,0.16);

  /* ---- Layout ---- */
  --container:1200px;
  --container-narrow:760px;
  --gutter:clamp(20px,5vw,64px); /* @kind spacing */

  /* ---- Motion ---- (calm, no bounce) */
  --ease-out:cubic-bezier(0.22,0.61,0.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(0.45,0,0.2,1); /* @kind other */
  --dur-fast:150ms; /* @kind other */
  --dur:260ms; /* @kind other */
  --dur-slow:520ms; /* @kind other */
}