/* Heitor Massagens — design tokens */

/* Fallbacks calibrados: Georgia e Arial ocupam o mesmo espaço que Cormorant e Inter,
   então a troca de fonte (font-display: swap) não empurra o layout. */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Georgia');
  size-adjust: 87.4%;
  ascent-override: 92.4%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cormorant Fallback';
  font-style: italic;
  src: local('Georgia Italic'), local('Georgia-Italic');
  size-adjust: 77.5%;
  ascent-override: 92.4%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 106.1%;
  ascent-override: 96.9%;
  descent-override: 24.1%;
  line-gap-override: 0%;
}

:root {
  /* Cor */
  --bg: #F4EFE8;            /* areia quente, fundo principal */
  --bg-raised: #EDE6DC;     /* plano um tom abaixo, para camadas */
  --bg-deep: #1F1B18;       /* seções escuras */
  --ink: #1F1B18;           /* texto sobre claro */
  --ink-soft: #6B625A;      /* texto secundário */
  --accent: #B8784F;        /* terracota quente: traços, linhas, numerais grandes (3,1:1, só texto grande) */
  --accent-strong: #8A5A3E; /* terracota AA: botões, links e overlines (5,1:1 sobre --bg) */
  --accent-soft: #D9C4B0;   /* linhas, hover, tags, placas */
  --sage: #8A9A86;          /* até 3 detalhes por página */
  --overlay: rgba(31, 27, 24, 0.35);
  --header-glass: rgba(244, 239, 232, 0.92);
  --surface: #FBF8F3;       /* papel um tom acima: cartões que flutuam (não é branco puro) */
  --surface-deep: #2A2420;  /* cartões sobre fundo escuro */

  /* Elevação: sombras quentes, transparentes e em camadas (luz vem de cima) */
  --shadow-sm:
    0 1px 1px rgba(31, 27, 24, 0.04),
    0 2px 6px -1px rgba(31, 27, 24, 0.06),
    0 8px 16px -8px rgba(31, 27, 24, 0.10);
  --shadow-md:
    0 1px 2px rgba(31, 27, 24, 0.04),
    0 8px 20px -6px rgba(31, 27, 24, 0.12),
    0 24px 48px -20px rgba(31, 27, 24, 0.18);
  --shadow-lg:
    0 2px 4px rgba(31, 27, 24, 0.04),
    0 16px 36px -10px rgba(31, 27, 24, 0.18),
    0 48px 96px -32px rgba(31, 27, 24, 0.28);
  --shadow-dark:
    0 1px 0 rgba(244, 239, 232, 0.05) inset,
    0 24px 48px -20px rgba(15, 12, 10, 0.6);
  --shadow-btn:
    0 1px 0 rgba(244, 239, 232, 0.22) inset,
    0 1px 2px rgba(31, 27, 24, 0.18),
    0 6px 14px -6px rgba(138, 90, 62, 0.6);
  --shadow-btn-hover:
    0 1px 0 rgba(244, 239, 232, 0.12) inset,
    0 2px 4px rgba(31, 27, 24, 0.14),
    0 14px 28px -10px rgba(31, 27, 24, 0.45);
  --hairline: rgba(31, 27, 24, 0.08); /* contorno interno de imagens */

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .09 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Tipografia */
  --font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  --font-body: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --display: clamp(3rem, 7.4vw, 7.25rem);  /* H1 do hero */
  --h1: clamp(2.75rem, 6vw, 5.5rem);
  --h2: clamp(2.25rem, 4.4vw, 4rem);
  --h3: clamp(1.875rem, 3vw, 3rem);
  --body: 1.0625rem;
  --body-leading: 1.7;
  --small: 1rem;            /* menor tamanho permitido no mobile */
  --overline: 1rem;         /* 16px no mobile; 12px a partir de 768px */

  /* Espaço */
  --space-section: clamp(6rem, 14vw, 12rem);
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.5rem;
  /* Raios: cada camada interna usa o raio externo menos o recuo (raios concêntricos) */
  --radius: 999px;          /* tags e botões em cápsula */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo: entradas */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); /* cortinas e trocas de imagem */
  --dur-fast: 240ms;
  --dur-base: 800ms;
  --dur-slow: 1200ms;
  --dur-curtain: 1500ms;
  --stagger: 70ms;
  --reveal-distance: 28px;
}

@media (min-width: 768px) {
  :root {
    --overline: 0.75rem;
    --header-h: 5rem;
  }
}