/* =========================================================
   Dra. Camilla Matos — Design Tokens
   Marca pessoal médica · cirurgia torácica
   ========================================================= */

/* -------- Local brand fonts -------- */
@font-face {
  font-family: 'Old Standard TT';
  src: url('fonts/OldStandardTT-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Old Standard TT';
  src: url('fonts/OldStandardTT-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Old Standard TT';
  src: url('fonts/OldStandardTT-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair';
  src: url('fonts/Playfair-VariableFont_opsz,wdth,wght.ttf') format('truetype-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair';
  src: url('fonts/Playfair-VariableFont_opsz,wdth,wght.ttf') format('truetype-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/BricolageGrotesque-VariableFont_opsz_wdth_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* -------- Google Fonts (still missing local files — see README) -------- */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600;700&display=swap');

:root {
  /* ==========================================================
     COLOR — paleta wellness sofisticada, nunca azul-clínico
     ========================================================== */

  /* Neutros — fundos & superfícies */
  --cream-50:        #FAF7F1;  /* cream mais claro, cards sobre cream */
  --cream-100:       #F7F2EA;  /* fundo dominante */
  --cream-200:       #F1EADD;  /* divisores, hover suave */
  --cream-300:       #E7DDC9;  /* bordas sutis */

  /* Verde-musgo (texto institucional, foreground primário) */
  --moss-900:        #2A3329;  /* texto headline */
  --moss-800:        #3D4A3C;  /* texto corpo escuro, fg primário */
  --moss-700:        #556153;  /* texto secundário */
  --moss-500:        #7A8678;  /* meta, captions */

  /* Verde-sálvia (acentos calmos) */
  --sage-100:        #E4E9DE;
  --sage-300:        #C4D0BD;
  --sage-500:        #A8B5A0;  /* sálvia principal — botões secundários, badges */
  --sage-700:        #65B5A9;  /* sage-teal do logo, ícone vivo */
  --sage-900:        #025850;  /* forest deep — usado em logo escuro */

  /* Terracota (acentos quentes, CTAs primários) */
  --terra-100:       #F5E5DB;
  --terra-300:       #ECC9B5;
  --terra-500:       #D9A48A;  /* terracota principal */
  --terra-700:       #B07A60;
  --terra-900:       #6E4632;

  /* Rosa-empoado (variações suaves) */
  --rose-100:        #F6E3DD;
  --rose-500:        #E8C5BC;
  --rose-700:        #C99B91;

  /* Dourado/areia (detalhes premium) */
  --sand-100:        #F2E6D1;
  --sand-500:        #C9A87C;
  --sand-700:        #9B7E55;

  /* ==========================================================
     SEMANTIC COLOR
     ========================================================== */
  --bg-page:         var(--cream-100);
  --bg-surface:      var(--cream-50);
  --bg-raised:       #FFFFFF;
  --bg-inset:        var(--cream-200);

  --fg-1:            var(--moss-800);   /* texto primário */
  --fg-2:            var(--moss-700);   /* texto corpo */
  --fg-3:            var(--moss-500);   /* meta, captions */
  --fg-inverse:      var(--cream-100);

  --line-soft:       var(--cream-300);
  --line-strong:     var(--moss-800);

  --accent-warm:     var(--terra-500);  /* CTA principal */
  --accent-warm-hover: var(--terra-700);
  --accent-calm:     var(--sage-500);
  --accent-calm-deep: var(--sage-900);
  --accent-soft:     var(--rose-500);
  --accent-premium:  var(--sand-500);

  /* Estados (medical-soft, nunca primário-vermelho gritante) */
  --state-info:      var(--sage-700);
  --state-success:   #6B8E5F;
  --state-warning:   var(--sand-700);
  --state-danger:    #A85A4A;

  /* ==========================================================
     TYPE
     ========================================================== */
  --font-display:    'Playfair', 'Old Standard TT', 'Cormorant Garamond', Georgia, serif;
  --font-display-alt:'Playfair', 'Old Standard TT', 'Playfair Display', Georgia, serif;
  --font-script:     'Dancing Script', 'Playfair', cursive;        /* "Camilla" handwritten */
  --font-body:       'Bricolage Grotesque', 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — generoso, com muito ar */
  --fs-display:      clamp(56px, 7vw, 96px);
  --fs-h1:           clamp(40px, 4.8vw, 64px);
  --fs-h2:           clamp(30px, 3.4vw, 44px);
  --fs-h3:           clamp(22px, 2.2vw, 28px);
  --fs-h4:           18px;
  --fs-body-lg:      18px;
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      12px;
  --fs-eyebrow:      11px;  /* caixa-alta espacejada */

  --lh-tight:        1.05;
  --lh-snug:         1.2;
  --lh-normal:       1.5;
  --lh-loose:        1.7;

  --ls-display:      -0.02em;
  --ls-tight:        -0.01em;
  --ls-normal:       0;
  --ls-wide:         0.06em;
  --ls-eyebrow:      0.22em;   /* "DRA." "MATOS" "CIRURGIÃ TORÁCICA" */

  /* ==========================================================
     SPACING — generoso, muito whitespace
     ========================================================== */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         24px;
  --space-6:         32px;
  --space-7:         48px;
  --space-8:         64px;
  --space-9:         96px;
  --space-10:        128px;

  /* ==========================================================
     RADII — cantos suavemente arredondados
     ========================================================== */
  --radius-sm:       6px;
  --radius-md:       12px;     /* default cards */
  --radius-lg:       16px;     /* hero cards, modais */
  --radius-xl:       24px;
  --radius-pill:     999px;

  /* ==========================================================
     ELEVATION — sombras leves e difusas; nunca pesadas
     ========================================================== */
  --shadow-xs:       0 1px 2px rgba(61, 74, 60, 0.04);
  --shadow-sm:       0 2px 8px rgba(61, 74, 60, 0.06);
  --shadow-md:       0 6px 24px rgba(61, 74, 60, 0.08);
  --shadow-lg:       0 20px 48px -16px rgba(61, 74, 60, 0.12);
  --shadow-inner:    inset 0 1px 2px rgba(61, 74, 60, 0.04);

  /* Border alternativo — preferido sobre sombras */
  --border-hairline: 1px solid var(--cream-300);
  --border-soft:     1px solid var(--cream-200);

  /* ==========================================================
     MOTION — calmo, nunca bouncy
     ========================================================== */
  --ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   160ms;
  --duration-base:   240ms;
  --duration-slow:   400ms;

  /* ==========================================================
     LAYOUT
     ========================================================== */
  --container-narrow:  720px;
  --container-base:    1080px;
  --container-wide:    1280px;
}

/* =========================================================
   SEMANTIC ELEMENTS
   ========================================================= */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--moss-900);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: var(--ls-normal); }

/* Itálico expressivo — usar em palavras de destaque emocional */
.italic-accent,
em.accent,
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 500;
  color: var(--moss-800);
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0 0 1em;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

/* Eyebrow — caixa-alta espacejada, estilo "DRA." */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Script — "Camilla" handwritten para destaque emocional pontual */
.script {
  font-family: var(--font-script);
  font-weight: 500;
  font-style: italic;
}

/* Termos médicos em destaque (HIPERIDROSE, SIMPATECTOMIA) */
.medical-term {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--terra-700);
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

a {
  color: var(--terra-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--moss-800); }

::selection { background: var(--terra-300); color: var(--moss-900); }