/* ==========================================================================
   TOKENS.CSS — Sistema de design Clínica Gisela Giongo
   Direção: delicadeza, leveza, calor humano — condizente com uma clínica
   de odontologia E harmonização facial. Neutros quentes, um único acento
   em tom champanhe, muito espaço em branco, hierarquia suave.
   Design Universal: alto contraste onde importa, tipografia legível,
   áreas de toque generosas, foco visível, movimento discreto.
   ========================================================================== */

:root {
  /* ---- Paleta nomeada (6 cores) ---- */
  --c-ivory:        #F6F5F3;  /* off-white neutro — fundo base das seções claras */
  --c-porcelain:     #FFFFFF;  /* cards e seções alternadas, mais clara que o ivory */
  --c-charcoal:      #161513;  /* quase preto — texto principal e fundos escuros */
  --c-taupe:         #807C74;  /* texto secundário / muted */
  --c-champagne:     #C2A25C;  /* dourado metalizado — acento único do site */
  --c-espresso:      #0C0B0A;  /* preto profundo — fundo das seções escuras */

  --c-champagne-light: #E3CE93;
  --c-line-soft:       rgba(42,39,35,0.08);
  --c-line-strong-soft:rgba(42,39,35,0.16);

  --gradient-champagne: linear-gradient(135deg, #F0DEB0 0%, #C2A25C 38%, #8E7434 62%, #D9C083 100%);

  /* ---- Tema padrão (claro/delicado) — usado na maior parte do site ---- */
  --surface-primary:   var(--c-ivory);
  --surface-secondary: var(--c-porcelain);
  --surface-tertiary:  #F1ECE3;
  --text-primary:      var(--c-charcoal);
  --text-secondary:    #5C574E;
  --text-muted:        var(--c-taupe);
  --accent:            #9A7C2E;   /* dourado escurecido — contraste acessível em fundo claro */
  --accent-light:      var(--c-champagne);
  --line:              var(--c-line-soft);
  --line-strong:       var(--c-line-strong-soft);
  --card-glow:         rgba(194,162,92,0.12);

  /* ---- Tipografia ---- */
  --font-display: 'Manrope', 'Instrument Sans', sans-serif;
  --font-body:    'Inter', 'DM Sans', sans-serif;

  --fs-h1: clamp(2.4rem, 5.4vw, 4.8rem);
  --fs-h2: clamp(1.9rem, 3.8vw, 3.2rem);
  --fs-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.16;
  --lh-heading: 1.28;
  --lh-body: 1.7;

  --ls-eyebrow: 0.14em;

  /* ---- Espaçamento (mais generoso = mais delicado) ---- */
  --space-section: clamp(5.5rem, 13vw, 11rem);
  --space-xl: 4rem;
  --space-lg: 2.5rem;
  --space-md: 1.5rem;
  --space-sm: 1rem;
  --space-xs: 0.5rem;

  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);

  /* ---- Movimento — discreto e lento, nunca chamativo ---- */
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 280ms;
  --dur-med: 520ms;
  --dur-slow: 800ms;

  /* ---- Forma — cantos mais arredondados = mais delicado ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --header-h: 92px;
  --header-h-scrolled: 68px;

  /* aliases de compatibilidade com componentes existentes */
  --c-black:        var(--c-espresso);
  --c-black-2:      var(--c-espresso);
  --c-graphite:      #2E2A25;
  --c-gray-dark:     #3A352E;
  --c-gray-mid:      var(--c-taupe);
  --c-gray-light:    #E4DDD0;
  --c-white:         var(--c-porcelain);
  --c-silver:        var(--c-champagne);
  --c-silver-light:  var(--c-champagne-light);
  --gradient-silver: var(--gradient-champagne);
}

/* ==========================================================================
   SEÇÃO ESCURA — preto profundo, com o dourado metalizado como único
   acento. Usada nas âncoras e nas seções de maior peso visual.
   ========================================================================== */
.bg-dark, .bg-black {
  background: var(--c-espresso);
  color: var(--c-ivory);

  --surface-primary:   var(--c-espresso);
  --surface-secondary: #141311;
  --surface-tertiary:  #1C1A17;
  --text-primary:      var(--c-ivory);
  --text-secondary:    #C9C5BD;
  --text-muted:        #8C877E;
  --accent:            var(--c-champagne);
  --accent-light:      var(--c-champagne-light);
  --line:              rgba(246,245,243,0.1);
  --line-strong:       rgba(246,245,243,0.2);
  --card-glow:         rgba(194,162,92,0.16);
}
.bg-dark .img-placeholder,
.bg-black .img-placeholder {
  background: linear-gradient(135deg, #1C1A17, #0C0B0A);
  border-color: var(--line-strong);
}

/* Seção "porcelana" — alternância mais clara ainda que o ivory padrão */
.bg-white {
  background: var(--c-porcelain);
  color: var(--c-charcoal);
  --surface-primary:   var(--c-porcelain);
  --surface-secondary: var(--c-ivory);
  --surface-tertiary:  #F1ECE3;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  /* o header é fixo: compensa a altura dele ao pular para uma âncora,
     senão o início da seção fica escondido atrás da barra */
  scroll-padding-top: calc(var(--header-h-scrolled) + 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--c-ivory);
  color: var(--c-charcoal);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p { margin: 0; }

/* ---- Foco visível (acessibilidade / Design Universal) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Seleção de texto ---- */
::selection {
  background: var(--c-champagne-light);
  color: var(--c-charcoal);
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--c-charcoal);
  color: var(--c-ivory);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top var(--dur-fast) var(--ease-standard);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }