/* ============================================
   DESIGN SYSTEM — pagespeed.com.br
   Direção visual (ver docs/design-extraction.md):
     · SITE PÚBLICO  → claro/branco · Sora (títulos) + Manrope · azul #1A65E0 · scores nas 4 cores da logo
     · DASHBOARD     → light corporativo (MatDash) · Manrope · índigo #635BFF · scores MatDash
   Os valores do :root são os do SITE (claro); body.ps-app sobrescreve
   o necessário para o DASHBOARD. Componentes .ps-* usam os tokens e se adaptam por área.
============================================ */

/* Fontes carregadas aqui (sem depender dos layouts). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Tipografia ── */
  --font-display: 'Sora', system-ui, sans-serif;     /* títulos/hero do site */
  --font-sans:    'Manrope', system-ui, sans-serif;  /* UI, corpo, dashboard */
  --font-mono:    'JetBrains Mono', monospace;

  /* ── SITE PÚBLICO (claro) — padrão no :root ── */
  --ps-bg:           #FFFFFF;   /* fundo de página (branco puro) */
  --ps-surface:      #FFFFFF;   /* cards/painéis */
  --ps-surface-2:    #F8FAFC;   /* seções alternadas / zebrado */
  --ps-surface-3:    #F1F4F8;   /* hover de rows */
  --ps-text:         #282E35;   /* texto principal (= charcoal) */
  --ps-muted:        #64748B;   /* texto secundário */
  --ps-subtle:       #94A3B8;   /* placeholders, hints */
  --ps-border:       #E2E8EE;   /* bordas padrão */
  --ps-border-dark:  #C8D3DF;   /* bordas hover/active */

  /* Fundos e sombras nomeados (clareamento do site) */
  --ps-bg-white:     #FFFFFF;
  --ps-bg-subtle:    #F8FAFC;
  --ps-shadow-sm:    0 1px 3px rgba(40,46,53,.06);
  --ps-shadow-md:    0 4px 12px rgba(40,46,53,.08);

  /* Acento (âmbar) — --ps-gold é alias retrocompat */
  --ps-accent:       #E79D42;
  --ps-accent-2:     #725DA7;
  --ps-gold:         #E79D42;
  --ps-gold-bg:      #FBEFDD;

  /* Charcoal da logo (usos pontuais / sidebar) */
  --ps-charcoal:      #282E35;
  --ps-charcoal-soft: #3C4350;

  /* ── Marca / primária ── */
  --ps-primary:       #635BFF;  /* índigo (dashboard) — mantido para o painel */
  --ps-primary-dark:  #5046E5;
  --ps-primary-light: #ECEBFF;
  --ps-secondary:     #16CDC7;
  /* SITE: CTA/links em azul #1A65E0 (o dashboard sobrescreve para índigo) */
  --ps-blue:          #1A65E0;
  --ps-blue-dark:     #1450B5;
  --ps-blue-light:    #EAF0FD;

  /* ── Scores / semânticos — SITE: 4 cores dos traços da logo ── */
  --ps-excelente:      #65BA61;  --ps-excelente-bg: #F0FAF0;  --ps-excelente-text: #2D7A2A;
  --ps-bom:            #1A65E0;  --ps-bom-bg:       #EAF0FD;  --ps-bom-text:       #0F3D8A;
  --ps-regular:        #FDC647;  --ps-regular-bg:   #FFFBEB;  --ps-regular-text:   #8A5E00;
  --ps-critico:        #F34F36;  --ps-critico-bg:   #FEF0EE;  --ps-critico-text:   #8B1C0C;
  --ps-info:           #1A65E0;  --ps-info-bg:      #EAF0FD;
  --ps-success:        #65BA61;  --ps-success-bg:   #F0FAF0;
  --ps-warning:        #FDC647;  --ps-warning-bg:   #FFFBEB;
  --ps-error:          #F34F36;  --ps-error-bg:     #FEF0EE;

  /* Bordas tonais (tints) de alerts/eyebrows */
  --ps-bom-border:      #B5D4F4;
  --ps-critico-border:  #FCCAC3;
  --ps-regular-border:  #FDE89A;

  /* ── Layout / raios ── */
  --header-height:  64px;
  --sidebar-width:  260px;
  --max-width:      1200px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      18px;
  --radius-pill:    100px;

  /* ── Escala tipográfica (múltiplos documentados no CLAUDE.md) ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  26px;
  --text-3xl:  34px;
  --text-5xl:  64px;

  /* ── Espaçamento — múltiplos de 4px ── */
  --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;

  /* ── Line-height / letter-spacing ── */
  --leading-tight:  1.3;
  --leading-normal: 1.65;
  --leading-loose:  1.8;
  --tracking-tight: -0.02em;
}

/* ── DASHBOARD (light/MatDash) — sobrescreve sob body.ps-app ──
   Preserva a identidade do painel quando o :root é claro (frontend). */
body.ps-app {
  --ps-bg:          #F4F7FB;
  --ps-surface:     #FFFFFF;
  --ps-surface-2:   #F6F7F9;
  --ps-surface-3:   #F1F4F8;
  --ps-text:        #2A3547;
  --ps-muted:       #98A4AE;
  --ps-subtle:      #AEB8C2;
  --ps-border:      #E0E6EB;
  --ps-border-dark: #C8D3DF;
  --ps-gold-bg:     #FBEFDD;

  /* Primária índigo (MatDash) — mantém os CTAs/links do painel */
  --ps-blue:        #635BFF;
  --ps-blue-dark:   #5046E5;
  --ps-blue-light:  #ECEBFF;

  /* Scores MatDash — mantém badges/gauges do painel */
  --ps-excelente:   #36C76C;  --ps-excelente-bg: #EAF9F0;  --ps-excelente-text: #1E7A45;
  --ps-bom:         #635BFF;  --ps-bom-bg:       #ECEBFF;  --ps-bom-text:       #3E37B5;
  --ps-regular:     #F8C20A;  --ps-regular-bg:   #FEF6E0;  --ps-regular-text:   #8A6800;
  --ps-critico:     #FF6692;  --ps-critico-bg:   #FFEAF1;  --ps-critico-text:   #A21D4B;
  --ps-info:        #46CAEB;  --ps-info-bg:      #E6F8FD;
}