/* Muub · tokens de design (07/11/2026)
   Única fonte dos valores visuais: cor, fonte, forma, sombra e movimento. Regras de uso em DESIGN.md (mesma pasta).
   Tela nenhuma escreve hex, sombra ou fonte solta: usa estes nomes. Claro é o tema padrão; escuro troca só os neutros. */

@font-face{font-family:'Urbanist';font-style:normal;font-display:swap;font-weight:100 900;src:url('fontes/urbanist-latin-wght-normal.woff2') format('woff2-variations')}
@font-face{font-family:'Urbanist';font-style:normal;font-display:swap;font-weight:100 900;src:url('fontes/urbanist-latin-ext-wght-normal.woff2') format('woff2-variations');unicode-range:U+0100-02BA,U+1E00-1EFF}
@font-face{font-family:'Geist Mono';font-style:normal;font-display:swap;font-weight:100 900;src:url('fontes/geist-mono-latin-wght-normal.woff2') format('woff2-variations')}
@font-face{font-family:'Geist Mono';font-style:normal;font-display:swap;font-weight:100 900;src:url('fontes/geist-mono-latin-ext-wght-normal.woff2') format('woff2-variations');unicode-range:U+0100-02BA,U+1E00-1EFF}

:root{
  /* Destaque: um verde só. Por cima dele, sempre a tinta escura. */
  --acento:#c8f25a;          /* fundo da ação principal, seleção, progresso */
  --acento-forte:#b4dc48;    /* botão redondo (+), item ativo do trilho, cabeça da linha do tempo */
  --acento-hover:#d5f780;
  --sobre-acento:#141a06;    /* texto e ícone em cima do verde */
  --acento-texto:#456500;    /* verde usado como texto sobre fundo claro */
  --marca-ponto:#b4dc48;     /* ponto da logo e detalhe verde dos ícones chapados (no escuro vira o verde claro) */

  /* Neutros quentes (tema claro) */
  --fundo:#f6f3ef;           /* creme da tela, com grade de pontos */
  --ponto:rgb(18 10 11/.07); /* pontos da grade do fundo */
  --sup:#fff;                /* painel, cartão, menu */
  --sup2:#f4f0eb;            /* campo, chip, hover, trilha vazia */
  --tinta:#1a1312;           /* texto principal */
  --mudo:#8a817c;            /* texto secundário, ícone parado */
  --fio:rgb(18 10 11/.06);   /* divisória rara (lista, cabeçalho de painel) */
  --doca:#1d1816;            /* pílulas escuras flutuantes */
  --doca-t:#e9e2dc;
  --foco:#5e54a0;            /* contorno de foco do teclado: nunca o verde */

  /* Estados */
  --verde:#8fd18f;           /* pronto, conectado, concluído (ponto e selo) */
  --ok-texto:#2e7d3a;
  --alerta:#f5b84a;
  --alerta-texto:#8a5a00;
  --erro:#e5362f;            /* também o vermelho do “ao vivo” e do YouTube */
  --erro-texto:#b4232f;

  /* Profundidade: painéis flutuam por sombra, não por borda */
  --sombra:0 1px 2px rgb(18 10 11/.05),0 10px 30px -14px rgb(18 10 11/.16);
  --sombra-alta:0 2px 8px rgb(18 10 11/.06),0 30px 60px -24px rgb(18 10 11/.24);
  --sombra-acento:0 8px 18px -8px rgb(150 190 40/.5);

  /* Tipografia */
  --f:'Urbanist',system-ui,sans-serif;
  --fm:'Geist Mono',ui-monospace,monospace;

  /* Forma */
  --r-pilula:999px;          /* botões, chips, campos de uma linha, docas, abas */
  --r-modal:24px;
  --r-painel:22px;           /* painéis e colunas */
  --r-flutua:18px;           /* menus, notificações, assistente */
  --r-midia:16px;            /* miniaturas e capas */
  --r-campo:12px;            /* campo de várias linhas, ícone em caixa */
  --r-item:10px;             /* item de menu */

  /* Medidas do casco */
  --topo-h:64px;
  --trilho-l:80px;           /* faixa reservada ao trilho na esquerda */

  /* Movimento. Tudo que anda usa mola (Motion, motion.dev): "duração visual em s · quique de 0 a 1".
     No protótipo, docs/muub-app/movimento.js lê daqui; no React, { type: 'spring', visualDuration, bounce }. */
  --ease:cubic-bezier(.16,1,.3,1); /* só para cor e fundo (CSS) */
  --rapido:.15s;
  --entrada:.3s;
  --mola-suave:.4 .1;        /* troca de tela, véus, painéis grandes */
  --mola-firme:.3 .2;        /* menus, avisos, dicas, indicador que desliza */
  --mola-toque:.2 .35;       /* aperto e solto de botão */
  --saida:.14s;              /* tudo que sai: rápido, sem quique */
  --escalonar:.03s;          /* atraso entre itens de uma lista que entra */

  /* Cores de categoria (etiquetas de conteúdo), trilhas do editor, motores de IA e redes: identificam origem, nunca são ação */
  --cat-azul:#5b8def;--cat-roxo:#9b6cf0;--cat-laranja:#ff8a3d;--cat-verde:#8fd18f;
  --trilha-video:#c8f25a;--trilha-texto:#e9d36a;--trilha-audio:#b9b0ec;--trilha-musica:#7fd38a;--trilha-efeito:#ff7a9a;
  --motor-claude:linear-gradient(135deg,#e8ae91,#785b79);--motor-codex:linear-gradient(135deg,#c8f25a,#678843);--motor-gemini:linear-gradient(135deg,#9b8cff,#576ca6);--motor-cursor:linear-gradient(135deg,#d9dce3,#737d92);
  --sobre-foto:#fff;                        /* texto e ícone em cima de foto ou vídeo */
  --vidro-claro:rgb(255 255 255/.82);        /* selo, tempo e play claros sobre foto */
  --vidro-escuro:rgb(0 0 0/.5);              /* pílula escura sobre foto (views, legenda) */
  --tom-verde:#8cc63f;--tom-musgo:#5f8a2f;--tom-broto:#b2d45c;--tom-caramelo:#c47a43; /* Início Vivo: verdes e um laranja amarronzado (degradê de fundo e cor de área, nunca ação) */
  --ag-azul:#d6e3f5;--ag-menta:#d3eee4;--ag-pessego:#f3d9c6;--ag-lilas:#e7dcf5;--ag-salvia:#dfe8c4;--ag-neutro:#ece6df; /* placa dos agentes de IA */
  --rede-youtube:#e5362f;--rede-instagram:linear-gradient(135deg,#f9a03f,#d6249f 60%,#7a3ad8);--rede-tiktok:#111;

  color-scheme:light
}

:root[data-tema=escuro]{
  --acento-texto:#c8f25a;--marca-ponto:#c8f25a;
  --fundo:#0f0b0a;--ponto:rgb(255 236 220/.05);--sup:#1b1513;--sup2:#241c19;--tinta:#f4ede8;--mudo:#9b908a;--fio:rgb(255 240 230/.06);
  --doca:#2a2220;--foco:#cbc5e8;
  --ok-texto:#8bd98b;--alerta-texto:#f5c27a;--erro-texto:#ff9a94;
  --sombra:0 1px 0 rgb(255 240 230/.03) inset,0 14px 34px -18px rgb(0 0 0/.8);
  --sombra-alta:0 1px 0 rgb(255 240 230/.04) inset,0 30px 70px -26px rgb(0 0 0/.9);
  color-scheme:dark
}