/* Weex Design System — Color Tokens */
/* Fonte: Brand Guide oficial (Versões em Cores) */
/* Roxo Weex: R65 G23 B135 → #411787  ·  Amarelo Weex: R255 G224 B63 → #FFE03F */

/* ════════════════════════════════════════════════════════════════════════ */
/*  CINCO LINGUAGENS DE COR — nunca se misturam. Um hue = um sentido.        */
/*                                                                            */
/*  1. MARCA      roxo + amarelo + gradientes — identidade.                   */
/*  2. NEUTROS    rampa slate — texto, superfícies, bordas.                   */
/*  3. SEMÂNTICA  ok / warn / err / info — validação e feedback do sistema.   */
/*  4. RECOMPENSA ouro + estrela — o "prêmio" (gamificação). NÃO é o verde    */
/*                de sucesso; é uma linguagem própria.                        */
/*  5. DADOS      escalas ordinais (tiers da Força, termômetro) +             */
/*                paleta CATEGÓRICA (--cat-*) para atividades, avatares,      */
/*                jogo de pares e gráficos.                                   */
/*                                                                            */
/*  Regras:                                                                   */
/*   • UM verde (--color-ok) para todo "bom": sucesso, quente, excelente.     */
/*   • UMA família de azul (--color-info*): info + único azul de dados.       */
/*   • Categorização NÃO-semântica usa SEMPRE --cat-* (nunca hue avulso).     */
/*   • Ouro só via --reward-* (proibido hardcode).                            */
/*   • Contraste: ver notas em TEXTO; amarelo e lima NUNCA como cor de texto. */
/* ════════════════════════════════════════════════════════════════════════ */

:root {

  /* ═══ 1 · MARCA ═══ */

  /* ── ROXO — cor primária oficial ── */
  /* Rampa = saída de deriveTheme(Weex) (campaign-theme.js · OKLCH matiz-âncora + curva L/C). */
  /* Baseline GERADO — não editar à mão: as campanhas re-derivam estes tokens em runtime.    */
  /* 500=Cor A e 600=Cor B são pinados; os demais degraus seguem a curva. Ver Fase C (trava). */
  --color-purple-50:  #f1efff;
  --color-purple-100: #dad3ff;
  --color-purple-200: #baaaff;
  --color-purple-300: #9b7df8;
  --color-purple-400: #7a53da;
  --color-purple-500: #5926b7;   /* gradiente início (= Cor A) */
  --color-purple-600: #411787;   /* ← ROXO WEEX OFICIAL — cor primária (= Cor B) */
  --color-purple-700: #2d1060;
  --color-purple-800: #1c0b3d;
  --color-purple-900: #110629;

  /* Gradientes de marca */
  --gradient-brand:   linear-gradient(135deg, #5926b7, #411787); /* @kind color */
  --gradient-brand-h: linear-gradient(160deg, #5926b7 0%, #411787 100%); /* @kind color */
  /* FIXO: linguagem OURO/recompensa (pontos, bônus, voucher) — não deriva por campanha. */
  --gradient-yellow:  linear-gradient(135deg, #FFE03F, #FBB03B); /* @kind color */
  /* Segue a marca (ink→brand) — via var(); re-deriva por campanha. */
  --gradient-dark:    linear-gradient(90deg, var(--brand-deep), var(--brand)); /* @kind color */

  /* ── AMARELO — accent oficial ── */
  --color-yellow-100: #FFFDE0;
  --color-yellow-200: #FFF3A3;
  --color-yellow-300: #FFE87A;
  --color-yellow-400: #FFE03F;   /* ← AMARELO WEEX OFICIAL */
  --color-yellow-500: #FBB03B;   /* gradiente fim / hover */
  --color-yellow-600: #E8960A;

  /* ═══ 2 · NEUTROS / SUPERFÍCIES ═══ */
  /* Duas telas de fundo legítimas, com nomes distintos:                 */
  /*  • bg-page  → plataforma admin (slate, denso, B2B)                  */
  /*  • bg-brand → app participante / superfícies de marca (lavanda)     */
  --color-bg-page:     #f1f5f9;   /* slate-100 — canvas da plataforma admin */
  --color-bg-brand:    #f4f1fc;   /* lavanda — canvas do app participante / marca */
  --color-bg-card:     #ffffff;
  --color-bg-elevated: #f8f9fa;
  --color-bg-hover:    var(--color-purple-50);   /* = roxo 50 (acompanha a rampa) */
  --color-bg-selected: var(--color-purple-100);  /* = roxo 100 (acompanha a rampa) */
  --color-bg-selected-soft: #eae6ff;   /* roxo 50/100 — linha selecionada (Table, Ranking) */
  --color-bg-overlay:  rgba(15, 6, 32, 0.60);
  --color-bg-platform: var(--surface-deep);  /* ilha escura (Toast/Vídeo/Sequência) — segue --surface-deep */
  --color-bg-app:       #F9F7FE;  /* superfície da tela do app participante (mock mobile) */
  --color-bg-app-frame: var(--color-purple-100);  /* moldura atrás do mock — tint de marca (roxo 100) */

  /* ── BORDAS ── */
  --color-border:       #e2e8f0;
  --color-border-faint: #f1f5f9;
  --color-border-focus: var(--color-purple-300);  /* = roxo 300 — segue a marca/rampa */
  --color-border-brand: #411787;

  /* ── TEXTO ── */
  /* Rampa NEUTRA = slate. É a verdade do produto: plataforma admin e   */
  /* os dados/ranking do app participante usam estes valores.           */
  --color-text-1: #1e293b;   /* títulos e corpo principal */
  --color-text-2: #64748b;   /* secundário / muted */
  --color-text-3: #94a3b8;   /* faint / metadados */
  --color-text-4: #cbd5e1;   /* desabilitado / placeholder */

  /* Ênfase de MARCA = roxo. Papel próprio (não substitui a rampa neutra). */
  --color-text-brand:      #411787; /* links, labels de marca, ênfase */
  --color-text-brand-deep: #1a0040; /* títulos sobre superfície de marca */
  --color-text-brand-muted:#7c5fac; /* secundário sobre superfície de marca (AA em corpo) */
  --color-text-brand-faint:#9a84bf; /* TERCIÁRIO — AA só em texto grande (≥18px ou ≥14px bold). Nunca em corpo. */
  --color-text-brand-ghost:#c4b7da; /* NÃO-TEXTO — só separadores, ícones e bordas decorativas (1.98:1, reprova AA). */
  --color-text-on-brand:   #ffffff;
  --color-text-on-yellow:  #411787; /* texto roxo sobre amarelo — amarelo NUNCA é cor de texto */

  /* ── SOBRE SUPERFÍCIE DE MARCA (on-brand) ──                                */
  /* Texto/linha/fill brancos sobre roxo. Fecha a lacuna que fazia cada       */
  /* componente dark inventar um rgba(255,255,255,…) próprio. ESCADA ÚNICA:   */
  /* 4 níveis de texto + 2 de linha + 2 de fill. Nunca use rgba(255,255,255)  */
  /* solto — escolha o degrau pelo papel. (Para STATUS sobre dark continue    */
  /* usando var(--color-ok/err) sob [data-surface="dark"].)                   */
  --color-on-brand:        #ffffff;                 /* títulos, valor-herói, ícone pleno */
  --color-on-brand-muted:  rgba(255,255,255,0.72);  /* apoio, subtítulo, label */
  --color-on-brand-faint:  rgba(255,255,255,0.50);  /* metadado, escala */
  --color-on-brand-dim:    rgba(255,255,255,0.40);  /* texto suprimido / item inativo / numeração futura */
  --color-on-brand-line:   rgba(255,255,255,0.12);  /* hairline / divisória sobre marca */
  --color-on-brand-line-strong: rgba(255,255,255,0.28); /* borda de ênfase — anel de etapa, bullet ativo */
  --color-on-brand-fill:   rgba(255,255,255,0.15);  /* fundo de chip / item ativo sobre marca */
  --color-on-brand-fill-soft: rgba(255,255,255,0.06); /* fill fantasma — tile bloqueado / faixa inativa */

  /* ── TRILHOS DE PROGRESSO ──                                                  */
  /* O fundo "vazio" de QUALQUER barra/anel. Um trilho por superfície —          */
  /* nunca um rgba/slate solto. O PREENCHIMENTO não mora aqui: PROGRESSO         */
  /* (avançar/ganhar) = var(--gradient-brand) [ou var(--accent) sobre marca];    */
  /* MEDIÇÃO (avaliar) = cor semântica/tier SÓLIDA. Raio sempre --radius-full.   */
  --track:          var(--color-border);        /* medição/diagnóstico (admin slate) */
  --track-brand:    var(--color-purple-50);     /* progresso gamificado (card/app) */
  --track-on-brand: var(--color-on-brand-fill); /* qualquer barra sobre superfície de marca/escura */

  /* ── SOBRE SUPERFÍCIE ESCURA NEUTRA (não-marca) ──                         */
  /* Branco sobre slate escuro (tooltip de gráfico = --color-text-1). Distinto */
  /* do on-brand (roxo) e dos status on-dark.                                  */
  --color-on-dark:        #ffffff;                 /* texto sobre slate escuro */
  --color-on-dark-muted:  rgba(255,255,255,0.70);  /* rótulo/secundário sobre slate escuro */

  /* ═══ 3 · SEMÂNTICA DE SISTEMA ═══ */
  /* --color-ok é O verde do produto: sucesso, "quente" e "excelente" o reusam. */
  --color-ok:        #16a34a;
  --color-ok-bg:     #dcfce7;
  --color-ok-border: #bbf7d0;
  --color-ok-dark:   #14532d;

  --color-warn:        #f59e0b;
  --color-warn-bg:     #fef3c7;
  --color-warn-border: #fde68a;
  --color-warn-dark:   #92400e;

  --color-err:        #dc2626;
  --color-err-bg:     #fef2f2;
  --color-err-border: #fca5a5;
  --color-err-dark:   #991b1b;

  /* CURTIDA — afeição (coração do Mural). Vermelho próprio, distinto do err (alerta):
     mesmo papel não-status, é a cor fixa da curtida em todo o app. */
  --color-like:    #e23744;
  --color-like-bg: #ffe4e4;

  /* Variantes ON-DARK — o mesmo papel de status, claro o suficiente para LER
     sobre superfície roxa escura (--color-ok/#16a34a reprovaria contraste lá).
     Não consuma diretamente: marque o container com [data-surface="dark"] e
     continue usando var(--color-ok)/var(--color-err) — o escopo abaixo troca. */
  --color-ok-on-dark:  #4ade80;   /* ~6:1 sobre o roxo da marca */
  --color-err-on-dark: #f87171;

  /* Status sobre SUPERFÍCIE DE MARCA (data-surface="dark") — tom-aware.        */
  /* Default = on-dark (marca escura / Weex / admin sem tema). [data-brand-tone  */
  /* ="light"] reescreve p/ o normal, pois aí a superfície de marca é clara.     */
  --status-ok-on-brand:  var(--color-ok-on-dark);
  --status-err-on-brand: var(--color-err-on-dark);

  /* Azul = ÚNICA família fria do sistema. info + (em DADOS) o tier "Muito boa". */
  --color-info:        #2563eb;
  --color-info-bg:     #dbeafe;
  --color-info-border: #bfdbfe;
  --color-info-dark:   #1e40af;

  /* Tints semânticos — fundo de chip/realce a ~15% (InsightBanner, Acordeão). */
  --color-ok-tint:   rgba(22,163,74,0.15);
  --color-warn-tint: rgba(245,158,11,0.18);
  --color-info-tint: rgba(37,99,235,0.15);

  /* ═══ 4 · RECOMPENSA (gamificação) ═══ */
  /* Linguagem do "prêmio" — distinta do verde de sucesso. ÚNICA fonte do ouro. */
  --color-star:    #FFE03F;  /* estrelas — amarelo oficial */
  --reward-bg:     #fff6d6;  /* fundo do chip de pontos/recompensa */
  --reward-border: #fbd64e;  /* borda do chip */
  --reward-text:   #92610a;  /* número/label de pontos (AA sobre reward-bg) */
  --reward-gold:   #f0b500;  /* preenchimento da estrela do chip */

  /* DEPRECADO — o verde-lima foi aposentado (destoava da marca e falhava como texto). */
  /* "Campanha ativa" agora usa o verde de sucesso. Mantido como alias p/ não quebrar. */
  --color-accent-green:      var(--color-ok);
  --color-accent-green-dark: var(--color-ok-dark);

  /* ═══ 5 · DADOS ═══ */

  /* ── PALETA CATEGÓRICA — categorização NÃO-semântica ──                    */
  /* Atividades, avatares, jogo de pares, séries de gráfico. 6 matizes em     */
  /* OKLCH com MESMA L (0.56) e C (0.13): peso visual igual, harmonia garantida.*/
  /* Use os sólidos como preenchimento; texto/iniciais em branco (≥ grande).  */
  --cat-1: #7764ba;  /* violeta (vizinho da marca) — oklch(0.56 0.13 292) */
  --cat-2: #2779bc;  /* azul  — oklch(0.56 0.13 248) */
  --cat-3: #008b8b;  /* teal  — oklch(0.56 0.13 194) */
  --cat-4: #2d8949;  /* verde — oklch(0.56 0.13 150) */
  --cat-5: #a46400;  /* âmbar — oklch(0.56 0.13 70)  */
  --cat-6: #ab517f;  /* rosa  — oklch(0.56 0.13 350) */
  /* Tints (fundo de tile/chip) — mesma matiz, L 0.95 / C 0.045 */
  --cat-1-soft: #eeeaff;
  --cat-2-soft: #d8f2ff;
  --cat-3-soft: #cdf9f7;
  --cat-4-soft: #daf8df;
  --cat-5-soft: #ffeacf;
  --cat-6-soft: #ffe3f3;
  --color-text-on-cat: #ffffff;   /* texto/iniciais sobre --cat-* sólido (uso grande/UI) */

  /* ── TIERS — Força da Campanha (organizador, score 0–100) ── */
  /* Escala ascendente: piso sóbrio → ouro reservado ao topo raro (100).      */
  /* Single-source: cada tier referencia a linguagem dona da cor.             */
  --tier-minimo:       var(--color-text-2);    /* slate — 50–70 "No mínimo" */
  --tier-minimo-bg:    var(--color-bg-page);
  --tier-boa:          var(--color-purple-600); /* roxo Weex — 71–79 "Boa" */
  --tier-boa-bg:       var(--color-purple-50);
  --tier-muito-boa:    var(--color-info-dark);  /* azul (único azul de dados) — 80–89 "Muito boa" */
  --tier-muito-boa-bg: var(--color-info-bg);
  --tier-excelente:    var(--color-ok);         /* verde de sucesso — 90–99 "Excelente" */
  --tier-excelente-bg: var(--color-ok-bg);
  --tier-maxima:       var(--color-yellow-600); /* dourado — 100 "Campanha máxima" (raro) */
  --tier-maxima-bg:    #fff8e1;

  /* ── TEMPERATURA — Termômetro de Engajamento (durante a campanha) ── */
  /* Reusa a semântica: quente=ok, morno=warn, frio=err. */
  --temp-quente:     var(--color-ok);    /* 🔥 70–100 */
  --temp-quente-bg:  var(--color-ok-bg);
  --temp-morno:      var(--color-warn);  /* 🌤 50–69 */
  --temp-morno-bg:   var(--color-warn-bg);
  --temp-frio:       var(--color-err);   /* ❄️ 0–49 */
  --temp-frio-bg:    var(--color-err-bg);

  /* ── MEDALHAS — tiers de Conquista (bronze/prata/ouro) ── */
  /* Fonte única do visual das medalhas. O ouro é FIXO (não usa --accent, que é  */
  /* white-label por campanha): medalha é sempre dourada, independe do branding. */
  --medal-bronze:        linear-gradient(135deg, #E8A977, #B26A35); /* @kind other */
  --medal-bronze-shadow: 0 3px 11px rgba(160, 90, 30, .30); /* @kind other */
  --medal-bronze-solid:  #B26A35;
  --medal-bronze-track:  rgba(178, 106, 53, .22);
  --medal-prata:         linear-gradient(135deg, #E6ECF3, #94A3B8); /* @kind other */
  --medal-prata-shadow:  0 3px 11px rgba(100, 116, 139, .28); /* @kind other */
  --medal-prata-solid:   #7E8CA0;
  --medal-prata-track:   rgba(126, 140, 160, .24);
  --medal-ouro:          linear-gradient(135deg, #FFE03F, #FBB03B); /* @kind other */
  --medal-ouro-shadow:   0 3px 11px rgba(232, 150, 10, .32); /* @kind other */
  --medal-ouro-solid:    #E8960A;
  --medal-ouro-track:    rgba(232, 150, 10, .22);

  /* ── FOCUS RING (acessibilidade) ── */
  --color-focus-ring: var(--color-purple-300);    /* = roxo 300 — anel de foco, segue a marca/rampa */

  /* ── ESTADOS ── */
  /* estado desabilitado (botões, inputs, controles) */
  --opacity-disabled: 0.5; /* @kind other */

  /* ── ALIASES SEMÂNTICOS ── */
  --brand:         var(--color-purple-600);  /* #411787 */
  --brand-light:   var(--color-purple-500);  /* #5926b7 */
  --brand-deep:    var(--color-purple-800);  /* #1c0b3d */
  --accent:        var(--color-yellow-400);  /* #FFE03F */
  --accent-warm:   #e4c604;  /* OKLCH-darken do accent (papel warm/pressed). Distinto do --color-yellow-500/#FBB03B do gradiente amarelo. */
  --surface:       var(--color-bg-card);
  --border:        var(--color-border);
  --text:          var(--color-text-1);
  --text-muted:    var(--color-text-2);
  --text-faint:    var(--color-text-3);
  --surface-page:  var(--color-bg-page);   /* canvas admin (slate) */
  --surface-brand: var(--color-bg-brand);  /* canvas app/marca (lavanda) */

  /* ── BRANDING POR CAMPANHA (white-label) ──                                  */
  /* Entradas + proxies derivadas. Aqui ficam os valores-base da WEEX; a        */
  /* derivação por campanha (campaign-theme.js → window.WeexBranding) sobrescreve  */
  /* estes tokens em runtime na raiz. Ver guideline "Branding por Campanha".     */
  --brand-grad-from: var(--color-purple-500);    /* Cor A — início do gradiente */
  --brand-grad-to:   var(--color-purple-600);    /* Cor B — fim / marca sólida  */
  --brand-accent:    var(--color-yellow-400);    /* Cor de destaque             */
  --brand-strong:    var(--color-purple-600);    /* proxy escura — avatares, ícones disponíveis, pódio nº1 */
  --on-brand-legible: #ffffff;                   /* tinta SOBRE --brand-legible (branco na marca escura; --on-accent na clara) */
  --brand-legible:   var(--brand);                /* UI cor-de-marca (texto/ícone/CTA sutil) que precisa continuar legível: segue a marca, mas vira --accent quando a marca é clara (data-brand-tone=light) */
  --brand-soft:      var(--color-bg-selected);   /* proxy clara — pódio 2º/3º, tints selecionados */
  --surface-deep:    var(--color-purple-800);    /* moldura profunda (ilha escura). Runtime: brandLight ? accent-profundo : ink */
  --on-accent:       var(--color-text-on-yellow);/* texto sobre o destaque (inverte por contraste) */
}

/* ════════════════════════════════════════════════════════════════════════ */
/*  SUPERFÍCIE ESCURA — status semântico tom-aware sobre superfície de marca.   */
/*  Marque o container de marca com data-surface="dark"; ok/err viram a         */
/*  variante legível pela cor REAL da superfície: on-dark em marca escura,      */
/*  normal em marca clara (--gradient-brand fica claro). Ilhas SEMPRE escuras   */
/*  usam data-surface="celebration". A SUPERFÍCIE decide, não o dev.            */
/* ════════════════════════════════════════════════════════════════════════ */
[data-surface="dark"] {
  --color-ok:  var(--status-ok-on-brand);
  --color-err: var(--status-err-on-brand);
}
/* Marca CLARA: superfície de marca é clara → status no tom normal (legível).   */
[data-brand-tone="light"] {
  --status-ok-on-brand:  #16a34a;   /* = --color-ok normal */
  --status-err-on-brand: #dc2626;   /* = --color-err normal */
  --brand-legible:       var(--accent);   /* marca clara → segue o destaque (contraste) */
  --on-brand-legible:    var(--on-accent); /* … e a tinta sobre ele acompanha o destaque */
}

/* ═══ CELEBRAÇÃO · superfície SEMPRE escura ════════════════════════════════ */
/*  Card raro e OverlayConclusao usam var(--gradient-celebration) (escuro em    */
/*  qualquer marca) → texto branco garantido. Heros comuns NÃO usam isto: eles  */
/*  mantêm o gradiente OFICIAL da marca e o texto segue o tom (escuro em marca  */
/*  clara, via Fase 0). Distingue "ilha de celebração" de "superfície de marca".*/
[data-surface="celebration"] {
  --color-ok:  var(--color-ok-on-dark);
  --color-err: var(--color-err-on-dark);
  --color-on-brand:             #ffffff;
  --color-on-brand-muted:       rgba(255,255,255,0.72);
  --color-on-brand-faint:       rgba(255,255,255,0.50);
  --color-on-brand-dim:         rgba(255,255,255,0.40);
  --color-on-brand-line:        rgba(255,255,255,0.12);
  --color-on-brand-line-strong: rgba(255,255,255,0.28);
  --color-on-brand-fill:        rgba(255,255,255,0.15);
  --color-on-brand-fill-soft:   rgba(255,255,255,0.06);
  --color-text-on-brand:        #ffffff;
}