/* ==========================================================================
   JOSIE ZECCHINELLI — DESIGN TOKENS
   Visual Identity: Museo (Display) + Jost (Body) + La Belle Aurore (Script)
   Directly harmonized with Instituto Maternidade Consciente typography
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=La+Belle+Aurore&display=swap');

@font-face {
  font-family: 'Museo';
  src: url('../assets/fonts/Museo-700.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/Jost-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/Jost-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'La Belle Aurore';
  src: url('../assets/fonts/LaBelleAurore-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Neutros Aquecidos (Tintura Sutil de Pétala / Areia) --- */
  --color-bg: #fdfafb;
  --color-bg-alt: #f9f0f5;
  --color-surface: #ffffff;
  --color-surface-hover: #faf2f7;
  --color-surface-raised: #fbf5f9;
  --color-surface-sunken: #f2e1ec;
  
  --color-ink: #2b1d24;           /* Berinjela escuro / Grafite aquecido */
  --color-ink-soft: #634f59;      /* Tom médio elegante */
  --color-ink-muted: #96838c;     /* Muted sofisticado */
  --color-ink-faint: #d9ccd3;

  /* --- PALETA ROXO AO VERMELHO COM ROXO FORTE DO IMC --- */
  
  /* 1. Roxo Forte do IMC (Violet Pop Strong / Imperial) */
  --color-imc-violet-strong: #a832cc;  /* O ROXO FORTE OFICIAL DO IMC */
  --color-imc-violet-pop: #cf44ff;     /* Tom pop luminoso para brilho/glow */
  --color-imc-violet-soft: #f9e6ff;    /* Fundo suave do roxo IMC */

  /* 2. Vinho Nobre / Ameixa Profunda (Roxo escuro para base sólida & rodapés) */
  --color-wine: #561d3e;
  --color-wine-strong: #3f122c;
  --color-wine-soft: #f2e4ec;

  /* 3. Púrpura / Violeta Vibrante (Mapeado diretamente para o Roxo Forte do IMC) */
  --color-purple: var(--color-imc-violet-strong);   /* #a832cc */
  --color-purple-pop: var(--color-imc-violet-pop);   /* #cf44ff */
  --color-purple-strong: #8a24aa;
  --color-purple-soft: var(--color-imc-violet-soft); /* #f9e6ff */

  /* 4. Magenta / Framboesa (A transição vibrante entre o roxo IMC e o vermelho) */
  --color-magenta: #be246e;
  --color-magenta-strong: #9e1957;
  --color-magenta-soft: #fae4ef;

  /* 5. Vermelho Forte do IMC / Carmim (Vitalidade, presença, calor somático) */
  --color-crimson: #cc3136;                         /* Vermelho vibrante oficial do IMC */
  --color-crimson-strong: #a62025;
  --color-crimson-soft: #fae8e9;

  /* 6. Coral Nobre / Terracota Carmim (Ponte com a terracota e coral do IMC) */
  --color-coral-carmim: #d34262;                    /* Coral Dark oficial do IMC */
  --color-coral-carmim-strong: #b3304d;
  --color-coral-carmim-soft: #fcebee;

  /* --- Mapeamento Semântico da Marca --- */
  --color-primary: var(--color-purple);             /* Roxo Forte IMC como cor principal */
  --color-primary-strong: var(--color-purple-strong);
  --color-primary-soft: var(--color-purple-soft);

  --color-secondary: var(--color-crimson);          /* Vermelho Forte IMC como cor secundária */
  --color-secondary-strong: var(--color-crimson-strong);
  --color-secondary-soft: var(--color-crimson-soft);

  --color-accent: var(--color-wine);
  --color-accent-strong: var(--color-wine-strong);
  --color-accent-soft: var(--color-wine-soft);

  --color-border: rgba(168, 50, 204, 0.14);
  --color-border-strong: rgba(168, 50, 204, 0.28);
  --color-border-focus: var(--color-purple);

  /* --- Degradês de Assinatura (Do Roxo Forte IMC ao Vermelho IMC) --- */
  --gradient-signature: linear-gradient(135deg, var(--color-purple) 0%, var(--color-magenta) 50%, var(--color-crimson) 100%);
  --gradient-bloom: linear-gradient(135deg, #a832cc 0%, #d34262 55%, #cc3136 100%);
  --gradient-hero: radial-gradient(circle at 80% 20%, rgba(168, 50, 204, 0.10) 0%, transparent 60%),
                   radial-gradient(circle at 15% 80%, rgba(204, 49, 54, 0.09) 0%, transparent 60%),
                   var(--color-bg);

  /* --- TIPOGRAFIA OFICIAL HARMONIZADA COM O IMC --- */
  --font-display: 'Museo', Georgia, serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'La Belle Aurore', cursive;

  --text-hero: clamp(1.85rem, 1.45rem + 1.9vw, 3.6rem);
  --text-h1: clamp(1.65rem, 1.35rem + 1.3vw, 2.8rem);
  --text-h2: clamp(1.35rem, 1.15rem + 0.9vw, 2.1rem);
  --text-h3: clamp(1.15rem, 1.02rem + 0.5vw, 1.55rem);
  --text-h4: 1.15rem;
  --text-lead: 1.12rem;
  --text-body: 1rem;
  --text-sm: 0.9rem;
  --text-xs: 0.8rem;

  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading-normal: 1.65;
  --leading-relaxed: 1.8;

  /* --- Sombras & Elevação --- */
  --shadow-sm: 0 2px 8px rgba(43, 29, 36, 0.05);
  --shadow-md: 0 8px 24px -4px rgba(168, 50, 204, 0.10), 0 2px 6px -1px rgba(43, 29, 36, 0.03);
  --shadow-lg: 0 20px 40px -8px rgba(168, 50, 204, 0.18), 0 4px 12px -2px rgba(204, 49, 54, 0.08);
  --shadow-xl: 0 28px 56px -12px rgba(86, 29, 62, 0.25);
  --shadow-card: 0 10px 30px -5px rgba(168, 50, 204, 0.07);

  /* --- Raios de Borda --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* --- Transições --- */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Layout & Espaçamento --- */
  --container-max: 1240px;
  --container-narrow: 860px;
  --header-height: 86px;
}