/* ============================================================
   APP FM CONECTA — DESIGN TOKENS
   Paleta Proteauto + tipografia Google Fonts
   Dark-first · Light completo em [data-theme="light"]
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---------- Paleta Marca Proteauto ---------- */
  --roxo:      #6A35FF;  /* primária / brand / CTAs            */
  --violeta:   #B142FF;  /* secundária / info / hover          */
  --magenta:   #FF2D8A;  /* acento / energia / estado ativo    */
  --vermelho:  #FF3D3D;  /* acento quente / alerta             */
  --branco:    #FFFFFF;
  --cinza-claro: #E6E6EB;

  /* ---------- Superfícies (extensão UI) ---------- */
  --bg:        #0B0D14;  /* carvão — fundo base                */
  --bg-alt:    #12141C;  /* seção alternada / topbars          */
  --surface:   #1A1D26;  /* card base                          */
  --surface-2: #242835;  /* card elevado / hover               */
  --border:        #2A2E3A;
  --border-strong: #3A3F4E;

  /* ---------- Texto ---------- */
  --text:          #FFFFFF;
  --text-2:        #E6E6EB;
  /* muted/disabled clareados em 03/08 (pedido do dono: secundários estavam apagados
     demais de ler no aparelho real) — muted #B3B9C7 = 7,5:1 sobre --surface-2 (AA com
     folga; o antigo #9AA0AE dava 6,4:1 sobre --surface e caía nos fundos mais claros) */
  --text-muted:    #B3B9C7;
  --text-disabled: #7E8496;
  --on-brand:      #FFFFFF;

  /* ---------- Acentos legíveis (texto/ícone pequeno) ---------- */
  --ink-brand:  #B9A3FF;  /* roxo legível sobre carvão   */
  --ink-accent: #FF6BA8;  /* magenta legível sobre carvão */

  /* ---------- Semânticos ---------- */
  --success: #33C15A;
  --warning: #FFB020;
  --error:   #FF3D3D;
  --info:    #B142FF;
  --success-bg: rgba(51, 193, 90, .12);
  --warning-bg: rgba(255, 176, 32, .12);
  --error-bg:   rgba(255, 61, 61, .12);
  --info-bg:    rgba(177, 66, 255, .12);

  /* ---------- Cores de categoria (10 — harmonizadas) ---------- */
  --cat-roxo:     #6A35FF;
  --cat-violeta:  #B142FF;
  --cat-magenta:  #FF2D8A;
  --cat-vermelho: #FF3D3D;
  --cat-lavanda:  #8E7BFF;
  --cat-orquidea: #D96BFF;
  --cat-rosa:     #FF6BA8;
  --cat-coral:    #FF7A66;
  --cat-ameixa:   #7A4DDB;
  --cat-vinho:    #C23A63;

  /* Mapa fixo — tipos de conteúdo */
  --tipo-scripts:       var(--cat-roxo);
  --tipo-artes:         var(--cat-orquidea);
  --tipo-videos:        var(--cat-magenta);
  --tipo-pdfs:          var(--cat-lavanda);
  --tipo-playlists:     var(--cat-ameixa);
  --tipo-atualizacoes:  var(--cat-vinho);

  /* Mapa fixo — 5 pilares */
  --pilar-comunidade:      var(--cat-violeta);
  --pilar-conhecimento:    var(--cat-lavanda);
  --pilar-tecnologia:      var(--cat-roxo);
  --pilar-performance:     var(--cat-magenta);
  --pilar-reconhecimento:  var(--cat-coral);

  /* Mapa fixo — fatores ranking */
  --fator-volume:       var(--cat-roxo);
  --fator-conversao:    var(--cat-violeta);
  --fator-crescimento:  var(--cat-magenta);
  --fator-regularidade: var(--cat-lavanda);
  --fator-engajamento:  var(--cat-rosa);

  /* Mapa fixo — tipos notificação */
  --notif-conteudo:        var(--cat-lavanda);
  --notif-ranking:         var(--cat-magenta);
  --notif-reconhecimento:  var(--cat-orquidea);
  --notif-agenda:          var(--cat-coral);

  /* ---------- Gradientes assinatura ---------- */
  --grad-brand: linear-gradient(135deg, #6A35FF 0%, #B142FF 40%, #FF2D8A 75%, #FF3D3D 100%);
  --grad-brand-v: linear-gradient(180deg, #6A35FF 0%, #B142FF 40%, #FF2D8A 75%, #FF3D3D 100%);
  --grad-conic: conic-gradient(from 220deg, #6A35FF, #B142FF, #FF2D8A, #FF3D3D, #6A35FF);
  --grad-soft: linear-gradient(135deg, rgba(106,53,255,.16), rgba(255,45,138,.10));

  /* ---------- Glow & Sombras ---------- */
  --glow-purple:   rgba(106, 53, 255, .45);
  --glow-magenta:  rgba(255, 45, 138, .40);
  --glow-violet:   rgba(177, 66, 255, .40);
  --glow-red:      rgba(255, 61, 61, .38);
  --glow-lavender: rgba(142, 123, 255, .40);
  --glow-orchid:   rgba(217, 107, 255, .38);
  --glow-rose:     rgba(255, 107, 168, .38);
  --glow-coral:    rgba(255, 122, 102, .35);
  --glow-plum:     rgba(122, 77, 219, .42);
  --glow-wine:     rgba(194, 58, 99, .40);

  --shadow-glow-purple:  0 0 28px -6px var(--glow-purple);
  --shadow-glow-magenta: 0 0 28px -6px var(--glow-magenta);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, .55);
  --shadow-pop:   0 12px 32px rgba(0, 0, 0, .40);

  /* Brilho ambiente (hero/topo) */
  --ambient-a: rgba(106, 53, 255, .16);
  --ambient-b: rgba(255, 45, 138, .09);

  /* Sobreposições */
  --overlay-hover: rgba(255, 255, 255, .04);
  --overlay-scrim: rgba(4, 6, 12, .62);

  /* ---------- Tipografia Google Fonts ---------- */
  --font-display: "Exo 2", "Avenir Next", Futura, system-ui, sans-serif;
  --font-body: Montserrat, -apple-system, "Segoe UI", system-ui, sans-serif;

  --fs-hero: 40px;   /* Exo 2 800, tracking +2% */
  --fs-h1:   28px;   /* Exo 2 700 */
  --fs-h2:   21px;   /* Exo 2 600 */
  --fs-h3:   17px;   /* Exo 2 600 */
  /* +1px nos três degraus em 03/08 (pedido do dono: fontes pequenas no aparelho real) */
  --fs-body: 16px;   /* Montserrat 400 */
  --fs-sm:   14px;
  --fs-xs:   12px;

  --lh-tight: 1.15;
  --lh-body:  1.55;
  --track-caps: .09em;
  --track-hero: .02em;

  /* ---------- Espaçamento (base 4pt) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* ---------- Raios ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- Transições ---------- */
  --t-fast: .15s;
  --t-med:  .3s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---------- Camadas (z-index) ---------- */
  --z-nav:   40;
  --z-drop:  60;
  --z-modal: 80;
  --z-toast: 90;
}

/* ============================================================
   TEMA CLARO — overrides completos
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;

  --bg:        #F3F3F8;
  --bg-alt:    #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #ECECF3;
  --border:        #E2E3EC;
  --border-strong: #C8CAD8;

  --text:          #14161F;
  --text-2:        #3A3F4E;
  /* mesmo clareio de legibilidade do tema escuro, invertido: aqui os secundários
     ESCURECEM (6,1:1 sobre branco; os antigos davam 4,9:1 e 2,1:1) */
  --text-muted:    #5C6272;
  --text-disabled: #8F94A6;

  --ink-brand:  #5527D6;
  --ink-accent: #D9186E;

  --success: #1F9C46;
  --warning: #A96A00;
  --error:   #DE2B2B;
  --info:    #8F2BD9;
  --success-bg: rgba(31, 156, 70, .10);
  --warning-bg: rgba(169, 106, 0, .10);
  --error-bg:   rgba(222, 43, 43, .10);
  --info-bg:    rgba(143, 43, 217, .10);

  --glow-purple:   rgba(106, 53, 255, .22);
  --glow-magenta:  rgba(255, 45, 138, .20);
  --glow-violet:   rgba(177, 66, 255, .20);
  --glow-red:      rgba(255, 61, 61, .18);
  --glow-lavender: rgba(142, 123, 255, .20);
  --glow-orchid:   rgba(217, 107, 255, .18);
  --glow-rose:     rgba(255, 107, 168, .18);
  --glow-coral:    rgba(255, 122, 102, .16);
  --glow-plum:     rgba(122, 77, 219, .20);
  --glow-wine:     rgba(194, 58, 99, .18);

  --shadow-modal: 0 24px 64px rgba(20, 22, 35, .22);
  --shadow-pop:   0 12px 32px rgba(20, 22, 35, .16);

  --ambient-a: rgba(106, 53, 255, .08);
  --ambient-b: rgba(255, 45, 138, .05);

  --overlay-hover: rgba(20, 22, 35, .04);
  --overlay-scrim: rgba(20, 22, 35, .40);

  --grad-soft: linear-gradient(135deg, rgba(106,53,255,.08), rgba(255,45,138,.05));
}

/* ============================================================
   @import — Google Fonts
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700;800&family=Montserrat:wght@400;600&display=swap');