/* ============================================================
   TOKENS — design system variables
   ============================================================ */

:root {
  /* Cores principais — extraídas da identidade da marca */
  --c-deep: #0E3A47;
  --c-deep-2: #164652;
  --c-gold: #C4A875;
  --c-gold-light: #D9C29F;
  --c-cream: #F5EFE6;
  --c-cream-2: #FAF7F2;
  --c-ink: #0A0A0A;
  --c-ink-soft: #404040;
  --c-muted: #8A8478;

  /* Tipografia */
  --f-display: 'Fraunces', 'Times New Roman', serif;
  --f-body: 'Manrope', system-ui, sans-serif;

  /* Tamanhos fluidos */
  --fs-display: clamp(3rem, 8vw, 8rem);
  --fs-h1: clamp(2.5rem, 6vw, 5rem);
  --fs-h2: clamp(2rem, 4.5vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 2.5vw, 2rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-eyebrow: 0.78rem;

  /* Espaçamento */
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(5rem, 12vw, 10rem);
  --gap-sm: clamp(1rem, 1.5vw, 1.5rem);
  --gap-md: clamp(1.5rem, 2.5vw, 2.5rem);
  --gap-lg: clamp(2rem, 4vw, 4rem);

  /* Easings */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --max-w: 1440px;
  --nav-h: 72px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(14, 58, 71, 0.06);
  --shadow-md: 0 12px 32px rgba(14, 58, 71, 0.10);
  --shadow-lg: 0 24px 60px rgba(14, 58, 71, 0.18);
}

html { background: var(--c-cream-2); color: var(--c-ink); }

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: -0.005em;
  background: var(--c-cream-2);
  color: var(--c-ink);
  transition: background-color 0.8s var(--ease-out);
}