/* =========================================================
   TOKENS — Dr. Victor Falcone · Pneumopediatria
   Paleta oficial do brand book (Karina Carvalho) +
   escala estendida 12 steps + tipografia Cormorant + Manrope
   ========================================================= */

:root {
  /* ============================================
     DEEP — verde escuro brand (primary)
     Atributos: seriedade, maturidade, sofisticação
     ============================================ */
  --deep-1:  #F0F4F2;
  --deep-2:  #E2EAE6;
  --deep-3:  #C8D7D0;
  --deep-4:  #ADC2B8;
  --deep-5:  #93AEA0;
  --deep-6:  #789988;
  --deep-7:  #5E8470;
  --deep-8:  #446F58;
  --deep-9:  #0E3D33;   /* SOLID brand (oficial) */
  --deep-10: #0A332A;
  --deep-11: #082921;
  --deep-12: #03150F;

  /* ============================================
     TEAL — secondary brand
     Atributos: confiança, segurança, modernidade
     ============================================ */
  --teal-1:  #F1F6F5;
  --teal-2:  #DEE9E8;
  --teal-3:  #C2D6D5;
  --teal-4:  #A6C3C2;
  --teal-5:  #8AB1AF;
  --teal-6:  #6E9E9D;
  --teal-7:  #538A8A;
  --teal-8:  #487A7A;
  --teal-9:  #3F7E7B;   /* SOLID secondary (oficial) */
  --teal-10: #346966;
  --teal-11: #2A5654;
  --teal-12: #102825;

  /* ============================================
     SAGE — accent leve (criança/pediatria)
     Atributos: leveza, frescor, tranquilidade
     ============================================ */
  --sage-1:  #F6F8F2;
  --sage-2:  #EDF1E5;
  --sage-3:  #E0E8D2;
  --sage-4:  #D2DEBE;
  --sage-5:  #C4D5AB;
  --sage-6:  #B6CB97;
  --sage-7:  #ADC58E;
  --sage-8:  #A2BC85;   /* SOLID accent (oficial) */
  --sage-9:  #93AC76;
  --sage-10: #7E9762;
  --sage-11: #4D6037;
  --sage-12: #2A3520;

  /* ============================================
     CREAM — bg principal
     Atributos: calma, clareza, equilíbrio
     ============================================ */
  --cream-50:  #F6F7F2;   /* warm white */
  --cream-100: #ECEEE5;
  --cream-200: #E2E5DB;   /* SOLID bg (oficial) */
  --cream-300: #D5D9CC;
  --cream-400: #C7CDB9;

  /* ============================================
     INK warm — textos
     ============================================ */
  --ink-900: #0B0E0C;
  --ink-800: #1A1F1C;
  --ink-700: #2E332F;
  --ink-600: #4D524E;
  --ink-500: #6E726E;
  --ink-300: #B5B8B3;
  --ink-200: #DCDED7;
  --ink-100: #E8E9E2;

  /* ============================================
     SEMANTIC TOKENS
     ============================================ */
  --bg:           var(--cream-50);
  --bg-elev:      var(--cream-100);
  --bg-elev-2:    var(--cream-200);
  --fg:           var(--ink-800);
  --fg-display:   var(--ink-900);
  --fg-muted:     var(--ink-600);
  --fg-faint:     var(--ink-500);
  --accent:        var(--deep-9);
  --accent-strong: var(--deep-12);
  --accent-soft:   var(--deep-3);
  --accent-2:      var(--teal-9);
  --accent-2-text: var(--teal-11);
  --accent-leaf:   var(--sage-8);
  --rule:          var(--ink-200);
  --rule-soft:     var(--ink-100);

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (Utopia clamp) */
  --step--2: clamp(0.7813rem, 0.7556rem + 0.1283vw, 0.8438rem);
  --step--1: clamp(0.9375rem, 0.9051rem + 0.1622vw, 1.0156rem);
  --step-0:  clamp(1.125rem, 1.0833rem + 0.2083vw, 1.2266rem);
  --step-1:  clamp(1.35rem, 1.2964rem + 0.268vw, 1.4805rem);
  --step-2:  clamp(1.62rem, 1.5503rem + 0.3486vw, 1.7891rem);
  --step-3:  clamp(1.944rem, 1.8527rem + 0.4566vw, 2.1631rem);
  --step-4:  clamp(2.3328rem, 2.2127rem + 0.6004vw, 2.6147rem);
  --step-5:  clamp(2.7994rem, 2.6403rem + 0.7956vw, 3.1614rem);
  --step-6:  clamp(3.3592rem, 3.149rem + 1.0509vw, 3.8221rem);
  --step-7:  clamp(4.0311rem, 3.7544rem + 1.3835vw, 4.6213rem);
  --step-8:  clamp(4.8373rem, 4.4762rem + 1.8053vw, 5.5862rem);

  /* ============================================
     SPACE
     ============================================ */
  --space-3xs: clamp(0.25rem, 0.2231rem + 0.1346vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.4569rem + 0.2154vw, 0.7rem);
  --space-xs:  clamp(0.75rem, 0.6854rem + 0.3231vw, 1.05rem);
  --space-s:   clamp(1rem, 0.9138rem + 0.4308vw, 1.4rem);
  --space-m:   clamp(1.5rem, 1.3708rem + 0.6462vw, 2.1rem);
  --space-l:   clamp(2rem, 1.8277rem + 0.8615vw, 2.8rem);
  --space-xl:  clamp(3rem, 2.7415rem + 1.2923vw, 4.2rem);
  --space-2xl: clamp(4rem, 3.6554rem + 1.7231vw, 5.6rem);
  --space-3xl: clamp(6rem, 5.4831rem + 2.5846vw, 8.4rem);

  /* ============================================
     LAYOUT
     ============================================ */
  --section-y: clamp(3.5rem, 6vw, 8.5rem);
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --measure:   62ch;
  --container:        1280px;
  --container-wide:   1440px;
  --container-narrow: 960px;

  /* ============================================
     SHADOWS (premium 6 layers + glow)
     ============================================ */
  --shadow-xs:   0 1px 2px rgba(11,14,12,.04);
  --shadow-s:    0 6px 18px rgba(11,14,12,.06), 0 1px 2px rgba(11,14,12,.04);
  --shadow-m:    0 18px 40px -12px rgba(11,14,12,.10), 0 2px 6px rgba(11,14,12,.05);
  --shadow-l:    0 36px 80px -24px rgba(11,14,12,.16), 0 6px 16px rgba(11,14,12,.06);
  --shadow-glow: 0 0 0 1px rgba(14,61,51,.18), 0 12px 40px -8px rgba(14,61,51,.28);
  --ring-focus:  0 0 0 3px rgba(14,61,51,.45);

  /* ============================================
     RADIUS
     ============================================ */
  --r-xs: 4px;
  --r-s:  8px;
  --r-m:  12px;
  --r-l:  20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ============================================
     MOTION
     ============================================ */
  --ease-out-soft:   cubic-bezier(.22,1,.36,1);
  --ease-in-out-lux: cubic-bezier(.65,.05,.36,1);
  --ease-spring:     cubic-bezier(.16,1,.3,1);
  --ease-breath:     cubic-bezier(.4,0,.2,1);

  --dur-fast:      240ms;
  --dur-base:      480ms;
  --dur-slow:      880ms;
  --dur-cinematic: 1400ms;
  --dur-breath:    2400ms;

  /* ============================================
     Z-INDEX scale
     ============================================ */
  --z-grain:       1;
  --z-content:     2;
  --z-sticky:      40;
  --z-nav:         50;
  --z-drawer:      60;
  --z-tooltip:     70;
  --z-cursor:      99;
  --z-skip:        100;
}

/* Color-scheme hint (no dark mode em V1, mas semantic) */
@media (prefers-color-scheme: dark) {
  :root {
    /* placeholder para V2: dark mode mantém paleta brand mas inverte cream <-> ink */
  }
}