/* TeamGo: tokens do design system. Cores: SÓ a paleta da identidade TeamGo (pacote "Team Go", nov/2026).
   Neutros claros #FBF7F6 / #E7DFDD / #D0C4BA e escuros #4D4C4E / #3C3B3F / #2B2B2D; acento primário #AE94D8 / #7E63AA / #685392;
   "cores diversas para o sistema": #E66262 #E6A262 #E6D962 #AEE662 #62E6CA #629AE6 #E662DD.
   Escalas usadas: a cor cheia e a de 50% (a de 12% foi cancelada em 07/11/2026).
   -bg = a cor da identidade a 50% sobre o cartão do tema (#FBF7F6 no claro, #3C3B3F no escuro);
   -ink = texto sobre -bg ou sobre o cartão: o neutro de texto do tema (a cor fica no fundo, no ponto e no ícone).
   Fora da paleta, só os passos intermediários dos neutros de superfície e texto (claro e escuro) e as misturas a 50% das cores da paleta.
   Fonte única de cores, tipografia, raios, espaçamento e sombras.
   Usado pelo app (index.html) e pela referência visual (../docs/design-system.html).
   Regra: no CSS do app, use sempre var(--token); valor solto só com motivo (ex.: SVG em data URI). */

:root,[data-theme="light"]{ /* [data-theme="light"] permite ler o tema claro mesmo com o app escuro (ex.: PDF) */
  /* superfícies: neutros claros da identidade, com os passos intermediários (branco dos cartões, bloco suave) */
  --page:#e7dfdd;        /* fundo atrás da moldura do app */
  --surface:#fbf7f6;     /* moldura do app, menus, popovers */
  --card:#ffffff;        /* cartões, modais */
  --soft:#f3edeb;        /* bloco suave dentro de cartão; fundo de hover */
  --field:#ffffff;       /* fundo de campo de formulário */
  --track:#e7dfdd;       /* trilho de barra de progresso e switch */
  --scrim:#2b2b2d66;     /* véu atrás de modal (#2b2b2d a 40%) */
  /* texto: neutros escuros da identidade e um cinza quente intermediário para rótulos */
  --ink:#2b2b2d;         /* texto principal */
  --sub:#4d4c4e;         /* texto secundário */
  --muted:#7d7773;       /* rótulos, placeholders, texto terciário */
  /* linhas e bordas */
  --line:#e7dfdd;        /* divisórias */
  --bd:#d0c4ba;          /* borda de campo e botão */
  --pillbd:#4d4c4e;      /* borda das pílulas de status */
  /* ação (também a barra lateral) */
  --acc:#2b2b2d;         /* ação principal (botão primário, item ativo) e barra lateral */
  --on-acc:#fbf7f6;      /* texto sobre --acc e sobre o botão de perigo */
  --logo-bg:transparent; /* símbolo Go sem fundo: a cor do símbolo acompanha o tema (img/logo-go-*.svg) */
  /* destaques (os -bg de azul, violeta, vermelho e verde) */
  --g1:linear-gradient(115deg,#aec8ee 0%,#d4c6e7 55%,#f0acac 100%);
  --g2:linear-gradient(115deg,#d4eeac 0%,#aec8ee 55%,#d4c6e7 100%);
  /* matizes: a cor cheia (ponto, borda, barra, ícone), -bg (a mesma a 50%) e -ink (texto). Status, farol, setores, tags e avatares saem daqui. */
  --red:#e66262;--red-bg:#f0acac;--red-ink:#2b2b2d;          /* bloqueada, crítico, erro; botão de perigo */
  --orange:#e6a262;--orange-bg:#f0ccac;--orange-ink:#2b2b2d; /* em andamento, prazo próximo */
  --yellow:#e6d962;--yellow-bg:#f0e8ac;--yellow-ink:#2b2b2d; /* atenção */
  --green:#aee662;--green-bg:#d4eeac;--green-ink:#2b2b2d;    /* concluída, no prazo */
  --sky:#62e6ca;--sky-bg:#aeeee0;--sky-ink:#2b2b2d;          /* verde-água */
  --blue:#629ae6;--blue-bg:#aec8ee;--blue-ink:#2b2b2d;       /* em análise */
  --violet:#ae94d8;--violet-bg:#d4c6e7;--violet-ink:#685392; /* esperando (acento primário: o tom mais escuro é da paleta) */
  --pink:#e662dd;--pink-bg:#f0acea;--pink-ink:#2b2b2d;       /* magenta */
  --gray:#8e8682;        /* a fazer, finalizada */
  --chart-muted:#d0c4ba; /* barra "esperando", etapa não iniciada, farol finalizado */
  --medal-bronze:#e6a262;--medal-silver:#d0c4ba;--medal-gold:#e6d962;

  /* marca e cores fixas (iguais nos dois temas): só cores da paleta */
  --brand:#7e63aa;       /* acento primário do TeamGo e do Gô: destaque, novidade, hoje */
  --emerald:#685392;     /* etapa concluída e cartões de "feito" com texto claro (acento primário escuro) */
  --amber:#7e63aa;       /* etapa 2 de formulário (acento primário) */
  --on-color:#fbf7f6;    /* texto sobre --brand, --emerald, --amber */
  --on-green:#2b2b2d;    /* texto sobre as cores cheias claras (verde, amarelo, verde-água, avatares) */

  /* sombras */
  --shadow-xs:0 1px 3px #2b2b2d33;                              /* botão de switch */
  --shadow-btn:0 0 2px #2b2b2d14,0 4px 8px #2b2b2d1f;       /* botão primário flutuante */
  --shadow-pop:0 18px 48px -12px #2b2b2d33;                     /* menus e popovers */
  --shadow-float:0 8px 28px #2b2b2d33;                      /* avisos flutuantes */
  --shadow-fab:0 10px 30px #2b2b2d3d;                       /* botão Ajuda e afins */
  --shadow-tip:0 8px 24px #2b2b2d4d;                        /* dica do menu */
  --shadow-dialog:0 24px 60px -12px #2b2b2d4d;              /* diálogos sobrepostos */
  --shadow-panel:0 8px 64px #2b2b2d3d,0 0 4px #2b2b2d14;    /* painel do Gô */
  --shadow-sm:0 4px 12px #2b2b2d0d;                         /* ícone de emoji */
  --shadow-badge:0 6px 18px #2b2b2d2e;                      /* selo do tutorial */
  --shadow-fab-off:0 4px 14px #2b2b2d1f;                    /* botão flutuante desabilitado */
  --shadow-auth:0 20px 60px -20px #2b2b2d22;                    /* cartão da tela de entrada */
  --shadow-celebrate:0 30px 80px -20px #2b2b2d55;               /* cartão da festa de conclusão */

  /* tipografia: Poppins 400/500/600/700 */
  --font:Poppins,system-ui,sans-serif;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700; /* bold só para números em destaque */
  --lh-none:1;--lh-tight:1.25;--lh-snug:1.35;--lh-base:1.45;--lh-relaxed:1.55;
  --fs-2xs:10px;   /* contadores mínimos */
  --fs-xs:11px;    /* rótulos, cabeçalho de tabela, pílulas */
  --fs-sm:12px;    /* texto de apoio, botões pequenos */
  --fs-md:13px;    /* texto padrão de controles */
  --fs-base:14px;  /* corpo */
  --fs-lg:16px;    /* títulos de cartão */
  --fs-xl:18px;    /* título de modal */
  --fs-2xl:20px;   /* título de página e de tarefa */
  --fs-3xl:24px;   /* título da tela de entrada */
  --fs-display:26px; /* números de indicador */

  /* raios */
  --r-xs:6px;      /* pílulas pequenas, barras */
  --r-sm:8px;      /* botões pequenos, abas */
  --r-md:10px;     /* campos, botões */
  --r-lg:12px;     /* blocos internos */
  --r-xl:16px;     /* menus, popovers, cartões menores */
  --r-2xl:20px;    /* diálogos */
  --r-3xl:24px;    /* cartões e modais */
  --r-4xl:28px;    /* painel do Gô */
  --r-shell:40px;  /* moldura do app */
  --r-full:999px;  /* pílulas e botões redondos (círculo: use 50%) */

  /* espaçamento: --sp-N = N × 2px */
  --sp-1:2px;--sp-2:4px;--sp-3:6px;--sp-4:8px;--sp-5:10px;--sp-6:12px;--sp-7:14px;
  --sp-8:16px;--sp-10:20px;--sp-12:24px;--sp-14:28px;--sp-16:32px;--sp-20:40px;

  /* movimento */
  --t-fast:.15s;   /* hover, cor, borda */
  --t-base:.2s;    /* abrir e recolher */
  --t-slow:.3s;    /* deslocamentos maiores, destaque do tutorial */
  --t-slower:.4s;  /* entradas suaves */

  /* camadas (z-index), da mais baixa para a mais alta */
  --z-side:4;        /* barra lateral */
  --z-side-btn:5;    /* botão de recolher a barra */
  --z-sleep:15;      /* aviso de atualização */
  --z-sleep-top:16;
  --z-overlay:20;    /* véu de modal */
  --z-float:30;      /* botões flutuantes (Ajuda, tutorial) */
  --z-float-pop:31;  /* painéis abertos por eles */
  --z-popover:40;    /* filtros, toast */
  --z-menu:60;       /* menus de notificação e conta */
  --z-celebrate:80;  /* festa de conclusão */
  --z-tip:1000;      /* dica do menu: sempre por cima */

  color-scheme:light;
}

:root[data-theme="dark"]{
  /* superfícies e texto: neutros escuros da identidade, com um fundo um passo abaixo; texto com os neutros claros e um cinza quente intermediário */
  --page:#1f1f21;--surface:#2b2b2d;--card:#3c3b3f;--soft:#4d4c4e;--field:#4d4c4e;--track:#4d4c4e;--scrim:#2b2b2daa;
  --ink:#fbf7f6;--sub:#d0c4ba;--muted:#b3aba5;
  --line:#4d4c4e;--bd:#5e5d60;--pillbd:#7d7773;
  --acc:#fbf7f6;--on-acc:#2b2b2d;   /* ação e barra lateral claras no escuro */
  --g1:linear-gradient(115deg,#4f6a92 0%,#75688c 55%,#914e50 100%);
  --g2:linear-gradient(115deg,#759050 0%,#4f6a92 55%,#75688c 100%);
  /* cor cheia igual à do claro; -bg = a mesma a 50% sobre #3c3b3f; texto claro */
  --red:#e66262;--red-bg:#914e50;--red-ink:#fbf7f6;
  --orange:#e6a262;--orange-bg:#916e50;--orange-ink:#fbf7f6;
  --yellow-bg:#918a50;--yellow-ink:#fbf7f6;
  --green:#aee662;--green-bg:#759050;--green-ink:#fbf7f6;
  --sky-bg:#4f9084;--sky-ink:#fbf7f6;
  --blue:#629ae6;--blue-bg:#4f6a92;--blue-ink:#fbf7f6;
  --violet:#ae94d8;--violet-bg:#75688c;--violet-ink:#fbf7f6;
  --pink-bg:#914e8e;--pink-ink:#fbf7f6;
  --gray:#8e8682;--chart-muted:#4d4c4e;
  color-scheme:dark;
}