/* ============================================================
   Dra. Andrea Nakano — Design Tokens
   Paleta extraída do consultório real (Calacatta + carvalho mel
   + ferragens douradas + cadeira ginecológica rosé)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND PALETTE ---------- */
  --calacatta-cream:   #F4EDE3;  /* fundo principal — mármore Calacatta */
  --off-white:         #F8F4ED;  /* fundo claro alternativo */
  --champagne-nude:    #E8D5BE;  /* hover, bg secundário */
  --rose-gold:         #C9A57B;  /* CTA, fios, ícones, ferragens */
  --rose-gold-deep:    #B08A60;  /* CTA hover/press */
  --dusty-mauve:       #A6766E;  /* acento feminino maduro — cadeira rosé */
  --mocha-marble:      #3B2E26;  /* texto principal (substitui preto) */
  --mocha-soft:        #5A4A3F;  /* texto secundário */
  --taupe:             #8A7B6E;  /* texto terciário, dividers */
  --pink-lipstick:     #C2185B;  /* pop ≤5% — batom da médica */
  --verde-botanico:    #5C6B4A;  /* linha integrativa/nutrologia */

  /* ---------- SEMANTIC COLOR TOKENS ---------- */
  --bg:                var(--calacatta-cream);
  --bg-alt:            var(--off-white);
  --bg-elevated:       #FFFFFF;
  --bg-secondary:      var(--champagne-nude);
  --bg-dark:           var(--mocha-marble);

  --fg:                var(--mocha-marble);
  --fg-muted:          var(--mocha-soft);
  --fg-subtle:         var(--taupe);
  --fg-on-dark:        var(--calacatta-cream);

  --accent:            var(--rose-gold);
  --accent-deep:       var(--rose-gold-deep);
  --accent-soft:       var(--dusty-mauve);
  --accent-pop:        var(--pink-lipstick);
  --accent-integrativa: var(--verde-botanico);

  --border:            rgba(59, 46, 38, 0.12);
  --border-strong:     rgba(59, 46, 38, 0.24);
  --border-rose:       rgba(201, 165, 123, 0.40);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:  'Cormorant Garamond', 'Tiempos Headline', 'Saol', Georgia, serif;
  --font-sans:     'Inter Tight', 'Söhne', 'Inter', system-ui, sans-serif;
  --font-body:     'Inter', 'Söhne', system-ui, sans-serif;
  --font-script:   'Dancing Script', 'Saturday Script', cursive; /* APENAS assinatura */

  /* Type scale — display (serif) */
  --display-1: 600 96px/1.04 var(--font-display);
  --display-2: 500 72px/1.06 var(--font-display);
  --display-3: 500 56px/1.10 var(--font-display);

  /* Headlines (sans humanista) */
  --h1: 600 48px/1.12 var(--font-sans);
  --h2: 600 36px/1.20 var(--font-sans);
  --h3: 600 24px/1.30 var(--font-sans);
  --h4: 600 18px/1.40 var(--font-sans);

  /* Body */
  --body-lg:   400 18px/1.6 var(--font-body);
  --body:      400 16px/1.6 var(--font-body);
  --body-sm:   400 14px/1.55 var(--font-body);
  --caption:   500 12px/1.4 var(--font-body);

  /* Eyebrow / label */
  --eyebrow:   500 12px/1.2 var(--font-sans);
  --letter-eyebrow: 0.18em;

  /* Signature */
  --signature: 400 40px/1.0 var(--font-script);

  /* ---------- SPACING (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;

  /* ---------- RADII ---------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (warm only — never bluish-gray) ---------- */
  --shadow-xs: 0 1px 2px rgba(91, 67, 50, 0.06);
  --shadow-sm: 0 2px 8px rgba(91, 67, 50, 0.08);
  --shadow:    0 8px 24px rgba(91, 67, 50, 0.10);
  --shadow-lg: 0 20px 48px rgba(91, 67, 50, 0.14);
  --shadow-glow-rose: 0 0 0 1px rgba(201, 165, 123, 0.28), 0 12px 32px rgba(201, 165, 123, 0.18);
  --shadow-inner-warm: inset 0 0 0 1px rgba(201, 165, 123, 0.20);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  160ms;
  --dur:       240ms;
  --dur-slow:  420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--display-2); color: var(--fg); letter-spacing: -0.01em; }
h2 { font: var(--h2); color: var(--fg); letter-spacing: -0.005em; }
h3 { font: var(--h3); color: var(--fg); }
h4 { font: var(--h4); color: var(--fg); }
p  { font: var(--body); color: var(--fg-muted); text-wrap: pretty; }
small { font: var(--body-sm); color: var(--fg-subtle); }

.eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.signature {
  font: var(--signature);
  color: var(--accent);
}

a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--border-rose);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
a:hover { color: var(--accent); border-color: var(--accent); }

::selection { background: var(--champagne-nude); color: var(--mocha-marble); }