/* =========================================================================
   Dra. Vivian Milozo — Design Tokens v1.0
   Source of truth: /Dra/docs/design-system/01-foundations-tokens.md (§7)
   Portado de: Dra/code/app/globals.css (Next.js v1 → WP v2)
   ========================================================================= */

:root {
  /* ============================================================
     GLOBAL · raw values — paleta olive (Brandbook v1.0 signature)
     ============================================================ */
  --color-olive-deep: #706233;
  --color-olive-darker: #4a4220;
  --color-olive-shadow: #251f0f;
  --color-olive-mid: #8a7b49;
  --color-olive-light: #a09c6f;
  --color-olive-mist: #d7d2bc;

  --color-cream: #f2f1eb;
  --color-cream-warm: #e8e4d2;
  --color-cream-soft: #f8f6ee;

  --color-champagne: #c9b68b;
  --color-champagne-deep: #a8966a;

  --color-charcoal: #29261b;
  --color-ash: #6e6a5e;
  --color-stone: #c4bcad;

  --color-terracotta: #8b4a33;
  --color-burgundy: #5c2a2a;

  --color-hairline: rgb(41 38 27 / 0.12);
  --color-hairline-soft: rgb(41 38 27 / 0.06);

  /* ============================================================
     ALIAS · semantic — leitura por componentes
     ============================================================ */
  --color-surface-page: var(--color-cream-soft);
  --color-surface-page-warm: var(--color-cream-warm);
  --color-surface-card: var(--color-cream-soft);
  --color-surface-card-elev: #ffffff;
  --color-surface-inverse: var(--color-olive-darker);
  --color-surface-deepest: var(--color-olive-shadow);
  --color-surface-brand: var(--color-olive-deep);

  --color-text-primary: var(--color-charcoal);
  --color-text-secondary: var(--color-ash);
  --color-text-muted: var(--color-stone);
  --color-text-on-brand: var(--color-cream);
  --color-text-on-inverse: var(--color-olive-mist);
  --color-text-accent: var(--color-olive-deep);
  --color-text-accent-inverse: var(--color-champagne);
  --color-text-warn: var(--color-terracotta);

  --color-border-default: var(--color-hairline);
  --color-border-soft: var(--color-hairline-soft);
  --color-border-strong: var(--color-stone);
  --color-border-brand: var(--color-olive-deep);
  --color-border-champagne: var(--color-champagne-deep);

  --color-brand-primary: var(--color-olive-deep);
  --color-brand-primary-hover: var(--color-olive-darker);
  --color-brand-on-dark: var(--color-champagne);
  --color-brand-on-light: var(--color-champagne-deep);

  /* CTA flutuante WhatsApp (verde elegante — não verde puro WA) */
  --color-fab-whatsapp-bg: #1b7355;
  --color-fab-whatsapp-fg: #ffffff;

  /* ============================================================
     TYPOGRAPHY — Cormorant Garamond + Inter + JetBrains Mono
     Loaded via @font-face (fonts.css). Fallbacks system-safe.
     ============================================================ */
  --font-serif-loaded: 'Cormorant Garamond';
  --font-sans-loaded: 'Inter';
  --font-mono-loaded: 'JetBrains Mono';

  --font-serif: var(--font-serif-loaded), 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-sans: var(--font-sans-loaded), 'Helvetica Neue', -apple-system, system-ui, sans-serif;
  --font-mono: var(--font-mono-loaded), ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale — clamp(min, prefered, max) */
  --text-display: clamp(56px, 1.4rem + 6vw, 88px);
  --text-display--line-height: 0.95;
  --text-display--letter-spacing: -0.015em;

  --text-h1: clamp(40px, 1.5rem + 4vw, 56px);
  --text-h1--line-height: 1.05;
  --text-h1--letter-spacing: -0.01em;

  --text-h2: clamp(30px, 1.3rem + 2.5vw, 40px);
  --text-h2--line-height: 1.1;

  --text-h3: clamp(22px, 1.1rem + 1.2vw, 28px);
  --text-h3--line-height: 1.15;

  --text-h4: clamp(16px, 0.9rem + 0.5vw, 20px);
  --text-h4--line-height: 1.3;

  --text-body-lead: clamp(18px, 1rem + 0.6vw, 22px);
  --text-body-lead--line-height: 1.5;

  --text-body: 16px;
  --text-body--line-height: 1.65;

  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.55;

  --text-eyebrow: 11px;
  --text-eyebrow--line-height: 1.5;
  --text-eyebrow--letter-spacing: 0.22em;

  --text-button: 12px;
  --text-button--line-height: 1;
  --text-button--letter-spacing: 0.22em;

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

  /* ============================================================
     RADIUS / SHADOWS
     ============================================================ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgb(41 38 27 / 0.04), 0 1px 1px rgb(41 38 27 / 0.03);
  --shadow-2: 0 4px 12px rgb(41 38 27 / 0.06), 0 2px 4px rgb(41 38 27 / 0.04);
  --shadow-3: 0 18px 48px rgb(41 38 27 / 0.10), 0 6px 14px rgb(41 38 27 / 0.06);

  /* ============================================================
     BREAKPOINTS — customizados (não defaults sm/md/lg/xl)
     ============================================================ */
  --breakpoint-tablet: 700px;
  --breakpoint-desktop: 1100px;
  --breakpoint-wide: 1440px;

  /* ============================================================
     MOTION
     ============================================================ */
  --transition-fast: 120ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-cinematic: 500ms;

  --ease-quiet: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-entry: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --max-w-content: 1180px;
  --max-w-narrow: 740px;
  --max-w-wide: 1440px;
  --pad-x: clamp(32px, 6vw, 96px);
}

/* =========================================================================
   BASE — reset + typographic defaults
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: hidden;
}

::selection {
  background: var(--color-olive-deep);
  color: var(--color-cream);
}

:focus-visible {
  outline: 2px solid var(--color-olive-deep);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  text-wrap: balance;
  margin: 0;
}

p {
  text-wrap: pretty;
  margin: 0;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Reduced motion — overrides toda animação */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* =========================================================================
   UTILITIES — small set of project-specific
   ========================================================================= */

/* Halo decorativo do hero (replica Brandbook .cover::before) */
.halo-olive::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgb(201 182 139 / 0.10), transparent 60%),
    radial-gradient(ellipse at bottom left, rgb(255 255 255 / 0.04), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Editorial filter para fotos da Dra. */
.img-editorial {
  filter: contrast(1.04) saturate(0.92) brightness(1.02);
}

/* Visually hidden — para sr-only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}