/* =============================================================
   tokens.css — Design Tokens do Site Dr. Pedro
   ESPELHA 1:1 os tokens já usados no <style> do index.html
   + adiciona camadas extras (papéis semânticos, espaçamento, motion)
   sem quebrar nenhum nome existente.
   ============================================================= */

:root {
  /* -----------------------------------------------------------
     1. NAVY (azul marinho da marca) — IDÊNTICO ao index.html
     ----------------------------------------------------------- */
  --navy-950: #0C1629;
  --navy-900: #192B4F;
  --navy-800: #1E3A5F;   /* PRINCIPAL */
  --navy-700: #244C69;
  --navy-600: #2D6080;
  --navy-100: #E0EAF0;
  --navy-50:  #F0F5F8;

  /* -----------------------------------------------------------
     2. CYAN (turquesa de acento) — IDÊNTICO ao index.html
     ----------------------------------------------------------- */
  --cyan-700: #1B758B;
  --cyan-600: #35A8B6;
  --cyan-500: #4ED7DC;   /* PRINCIPAL */
  --cyan-400: #6EE3E7;
  --cyan-300: #9AEDEF;
  --cyan-100: #D5F5F6;
  --cyan-50:  #EEFBFB;

  /* -----------------------------------------------------------
     3. NEUTROS — IDÊNTICO ao index.html
     ----------------------------------------------------------- */
  --white:    #FFFFFF;
  --gray-50:  #F8FAFB;
  --gray-100: #F1F4F6;
  --gray-200: #E2E7EB;
  --gray-300: #CED5DB;
  --gray-400: #9BA5AE;
  --gray-500: #6B7780;
  --gray-600: #4A5660;
  --gray-700: #364049;
  --gray-800: #232B33;

  /* -----------------------------------------------------------
     4. WHATSAPP — IDÊNTICO ao index.html
     ----------------------------------------------------------- */
  --green-500: #25D366;
  --green-600: #1EBE5A;

  /* -----------------------------------------------------------
     5. TIPOGRAFIA — IDÊNTICO ao index.html
     ----------------------------------------------------------- */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* -----------------------------------------------------------
     6. SOMBRAS — IDÊNTICO ao index.html
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px  rgba(12,22,41,0.05);
  --shadow-sm: 0 2px 8px  rgba(12,22,41,0.06);
  --shadow-md: 0 4px 20px rgba(12,22,41,0.08);
  --shadow-lg: 0 8px 36px rgba(12,22,41,0.10);
  --shadow-xl: 0 16px 48px rgba(12,22,41,0.14);

  /* -----------------------------------------------------------
     7. RAIO DE BORDA — IDÊNTICO ao index.html
     ----------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* -----------------------------------------------------------
     8. LARGURA MÁXIMA — IDÊNTICO ao index.html
     ----------------------------------------------------------- */
  --max-w: 1140px;


  /* =============================================================
     EXTENSÕES NOVAS (não existem no index.html, mas necessárias
     para as novas páginas: avaliar, secretaria, admin, blog,
     post, depoimentos). NENHUM nome acima foi alterado.
     ============================================================= */

  /* -----------------------------------------------------------
     9. PAPÉIS SEMÂNTICOS DE COR
        Use estes nos componentes novos. Mapeiam para os tokens
        da marca acima — se a paleta mudar um dia, só ajusta aqui.
     ----------------------------------------------------------- */
  --color-bg:                var(--white);
  --color-bg-subtle:         var(--gray-50);
  --color-bg-muted:          var(--gray-100);
  --color-bg-inverse:        var(--navy-950);

  --color-surface:           var(--white);
  --color-surface-elevated:  var(--white);
  --color-surface-sunken:    var(--gray-50);

  --color-text:              var(--gray-800);
  --color-text-muted:        var(--gray-600);
  --color-text-subtle:       var(--gray-500);
  --color-text-inverse:      var(--white);
  --color-text-brand:        var(--navy-900);

  --color-border:            var(--gray-200);
  --color-border-strong:     var(--gray-300);
  --color-border-brand:      var(--navy-100);

  --color-link:              var(--cyan-700);
  --color-link-hover:        var(--navy-800);

  --color-primary:           var(--navy-800);
  --color-primary-hover:     var(--navy-900);
  --color-primary-fg:        var(--white);

  --color-accent:            var(--cyan-500);
  --color-accent-hover:      var(--cyan-600);
  --color-accent-fg:         var(--navy-950);

  --color-focus-ring:        var(--cyan-500);
  --shadow-glow-focus:       0 0 0 4px rgba(78, 215, 220, 0.30);

  /* -----------------------------------------------------------
     10. SEMÂNTICAS DE ESTADO
     ----------------------------------------------------------- */
  --success-700: #0F7A4A;
  --success-500: #16A06A;
  --success-100: #D6F3E4;

  --warning-700: #8A5A00;
  --warning-500: #D49000;
  --warning-100: #FBECC6;

  --danger-700:  #A01A2B;
  --danger-500:  #D63148;
  --danger-100:  #F9D8DE;

  --info-700:    var(--cyan-700);
  --info-500:    var(--cyan-500);
  --info-100:    var(--cyan-100);

  /* Estrelas de avaliação */
  --color-star-active:   #F5B301;
  --color-star-inactive: var(--gray-300);

  /* -----------------------------------------------------------
     11. ESPAÇAMENTO (escala 4px)
     ----------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --gutter:    24px;
  --section-y: 80px;

  /* -----------------------------------------------------------
     12. ESCALA TIPOGRÁFICA AUXILIAR
        (o index.html usa clamp() inline; estas variáveis ajudam
         as páginas novas a manter consistência.)
     ----------------------------------------------------------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* -----------------------------------------------------------
     13. MOVIMENTO
     ----------------------------------------------------------- */
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;

  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0.1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);

  --transition-base:  all var(--duration-base) var(--ease-standard);
  --transition-color: color var(--duration-base) var(--ease-standard),
                      background-color var(--duration-base) var(--ease-standard),
                      border-color var(--duration-base) var(--ease-standard);

  /* -----------------------------------------------------------
     14. CAMADAS (z-index)
     ----------------------------------------------------------- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;

  /* -----------------------------------------------------------
     15. GRADIENTES DE MARCA
        (consistentes com os usados no hero do index.html)
     ----------------------------------------------------------- */
  --gradient-brand:
    linear-gradient(135deg, var(--navy-800) 0%, var(--cyan-700) 100%);
  --gradient-hero:
    linear-gradient(170deg, var(--navy-950) 0%, #0F1F35 40%, var(--navy-950) 100%);
  --gradient-section-alt:
    linear-gradient(160deg, #0A1220 0%, #060D17 100%);
}

/* =============================================================
   16. PREFERÊNCIA DE MOVIMENTO REDUZIDO (acessibilidade)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}