/* MB 360 — tokens do guia visual novo (Etapa 1). GERADO de _dev/docs/design/tokens.json em 2026-10-03 por _dev/bin/tokens_do_guia.py. Não editar à mão. */
:root {
  --cor-marca: #0A1D3A;
  --cor-marca-atencao: #EA5811;
  --cor-atencao-forte: #D0490A;
  --cor-marca-parede: #08212E;
  --cor-acao: #0088FF;
  --cor-acao-texto: #1E6EF4;
  --cor-acao-tint: rgba(0,136,255,.12);
  --cor-acao-forte: #1E6EF4;
  --cor-acao-sobre-tint: #1A5FD3;
  --cor-ok: #34C759;
  --cor-ok-texto: #008932;
  --cor-ok-tint: rgba(52,199,89,.15);
  --cor-ok-forte: #008932;
  --cor-ok-sobre-tint: #00772B;
  --cor-transito: #FF8D28;
  --cor-transito-texto: #C55300;
  --cor-transito-tint: rgba(255,141,40,.16);
  --cor-transito-sobre-tint: #AC4800;
  --cor-pendencia: #FF383C;
  --cor-pendencia-texto: #E9152D;
  --cor-pendencia-tint: rgba(255,56,60,.14);
  --cor-pendencia-sobre-tint: #C51226;
  --cor-quem-treinador: #AC7F5E;
  --cor-quem-recrutador: #00C0E8;
  --cor-fundo: #F2F2F7;
  --cor-papel: #FFFFFF;
  --cor-barra-lateral: #F5F5F7;
  --cor-vidro: rgba(255,255,255,.66);
  --cor-veu: rgba(0,0,0,.2);
  --cor-texto: rgba(0,0,0,.85);
  --cor-texto-2: rgba(0,0,0,.55);
  --cor-texto-3: rgba(0,0,0,.4);
  --cor-separador: rgba(60,60,67,.13);
  --cor-fill: rgba(120,120,128,.12);
  --cor-selecao-tint-menu: rgba(0,136,255,.075);
  --cor-texto-previsto: rgba(0,0,0,.2);
  --cor-bloco-indigo: #564ADE;
  --cor-bloco-roxo: #B02FC2;
  --cor-bloco-teal: #008198;
  --cor-bloco-menta: #008575;
  --cor-bloco-rosa: #E7124D;
  --cor-segmento: #FFFFFF;
  --fonte: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --type-large-title: 700 27px/33px var(--fonte); --fs-large-title: 27px; --lh-large-title: 33px; --fw-large-title: 700;
  --type-title-1: 400 23px/27px var(--fonte); --fs-title-1: 23px; --lh-title-1: 27px; --fw-title-1: 400;
  --type-title-2: 400 18px/23px var(--fonte); --fs-title-2: 18px; --lh-title-2: 23px; --fw-title-2: 400;
  --type-title-3: 600 16px/21px var(--fonte); --fs-title-3: 16px; --lh-title-3: 21px; --fw-title-3: 600;
  --type-headline: 700 14px/17px var(--fonte); --fs-headline: 14px; --lh-headline: 17px; --fw-headline: 700;
  --type-body: 400 13px/16px var(--fonte); --fs-body: 13px; --lh-body: 16px; --fw-body: 400;
  --type-callout: 400 13px/16px var(--fonte); --fs-callout: 13px; --lh-callout: 16px; --fw-callout: 400;
  --type-subheadline: 600 12px/15px var(--fonte); --fs-subheadline: 12px; --lh-subheadline: 15px; --fw-subheadline: 600;
  --type-footnote: 400 12px/15px var(--fonte); --fs-footnote: 12px; --lh-footnote: 15px; --fw-footnote: 400;
  --type-caption: 500 11px/14px var(--fonte); --fs-caption: 11px; --lh-caption: 14px; --fw-caption: 500;
  --linha-tabela: 38px;
  --linha-menu: 32px;
  --controle-regular: 28px;
  --controle-large: 36px;
  --margem: 20px;
  --espaco-entre-blocos: 16px;
  --barra-de-cima: 52px;
  --barra-lateral: 232px;
  --celula-recuo: 12px;
  --alvo-minimo: 20px;
  --alvo-padrao: 28px;
  --telefone-linha: 44px;
  --telefone-controle: 44px;
  --telefone-alvo-minimo: 28px;
  --telefone-margem: 16px;
  --telefone-consulta: '(max-width: 600px), (max-height: 500px) and (pointer: coarse)';
  --icone-padrao: 18px; --icone-padrao-traco: 1.75;
  --icone-tile: 22px; --icone-tile-traco: 1.75;
  --icone-pilula: 12px; --icone-pilula-traco: 2;
  --icone-vazio: 28px; --icone-vazio-traco: 1.5;
  --raio-controle: 7px;
  --raio-selecao: 8px;
  --raio-cartao: 12px;
  --raio-popover: 12px;
  --raio-sheet: 16px;
  --sombra-cartao: 0 1px 2px rgba(0,0,0,.05), 0 0 0 .5px rgba(0,0,0,.05);
  --sombra-flutuante: 0 12px 32px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.1);
  --sombra-lateral: 9px 0 22px -16px rgba(0,0,0,.20), 1px 0 0 rgba(60,60,67,.05);
  --sombra-segmento: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04), 0 0 0 .5px rgba(0,0,0,.04);
  --vidro-filtro: blur(22px) saturate(180%);
  --veu-filtro: none;
  --foco: 0 0 0 3.5px color-mix(in srgb, var(--cor-acao) 25%, transparent);
  --anima-estado: 150ms ease-out; --anima-flutuante: 200ms ease-out;
}
/* Modo escuro: escolha da pessoa, guardada na conta (D8). */
:root[data-modo="escuro"] {
  --cor-marca: #A8BFE2;
  --cor-marca-atencao: #EA5811;
  --cor-atencao-forte: #D0490A;
  --cor-marca-parede: #08212E;
  --cor-acao: #0091FF;
  --cor-acao-texto: #5CB8FF;
  --cor-acao-tint: rgba(0,145,255,.18);
  --cor-acao-forte: #1E6EF4;
  --cor-acao-sobre-tint: #5CB8FF;
  --cor-ok: #30D158;
  --cor-ok-texto: #4AD968;
  --cor-ok-tint: rgba(48,209,88,.2);
  --cor-ok-forte: #008932;
  --cor-ok-sobre-tint: #4AD968;
  --cor-transito: #FF9230;
  --cor-transito-texto: #FFA056;
  --cor-transito-tint: rgba(255,146,48,.2);
  --cor-transito-sobre-tint: #FFA056;
  --cor-pendencia: #FF4245;
  --cor-pendencia-texto: #FF6165;
  --cor-pendencia-tint: rgba(255,66,69,.2);
  --cor-pendencia-sobre-tint: #FF8A8C;
  --cor-quem-treinador: #B78A66;
  --cor-quem-recrutador: #3CD3FE;
  --cor-fundo: #1C1C1E;
  --cor-papel: #2C2C2E;
  --cor-barra-lateral: #232325;
  --cor-vidro: rgba(44,44,46,.66);
  --cor-veu: rgba(0,0,0,.4);
  --cor-texto: rgba(255,255,255,.92);
  --cor-texto-2: rgba(235,235,245,.6);
  --cor-texto-3: rgba(235,235,245,.45);
  --cor-separador: rgba(84,84,88,.6);
  --cor-fill: rgba(120,120,128,.24);
  --cor-selecao-tint-menu: rgba(0,145,255,.13);
  --cor-texto-previsto: rgba(235,235,245,.2);
  --cor-bloco-indigo: #A7AAFF;
  --cor-bloco-roxo: #EA8DFF;
  --cor-bloco-teal: #3BDDEC;
  --cor-bloco-menta: #54DFCB;
  --cor-bloco-rosa: #FF8AC4;
  --cor-segmento: #636366;
  --sombra-cartao: 0 1px 2px rgba(0,0,0,.4), 0 0 0 .5px rgba(255,255,255,.06);
  --sombra-flutuante: 0 12px 32px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.1);
  --sombra-lateral: 9px 0 22px -14px rgba(0,0,0,.45), 1px 0 0 rgba(255,255,255,.04);
  --sombra-segmento: 0 3px 8px rgba(0,0,0,.3), 0 0 0 .5px rgba(255,255,255,.05);
}
@media (prefers-reduced-motion: reduce) { :root { --anima-estado: 0ms; --anima-flutuante: 0ms; } }
/* No telefone: a régua do iPhone (tokens.json › densidade.telefone e tipografia.telefone). */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
  :root {
    --type-large-title: 700 calc(34px * var(--letra-escala, 1))/calc(41px * var(--letra-escala, 1)) var(--fonte); --fs-large-title: calc(34px * var(--letra-escala, 1)); --lh-large-title: calc(41px * var(--letra-escala, 1));
    --type-title-1: 400 calc(28px * var(--letra-escala, 1))/calc(34px * var(--letra-escala, 1)) var(--fonte); --fs-title-1: calc(28px * var(--letra-escala, 1)); --lh-title-1: calc(34px * var(--letra-escala, 1));
    --type-title-2: 400 calc(22px * var(--letra-escala, 1))/calc(28px * var(--letra-escala, 1)) var(--fonte); --fs-title-2: calc(22px * var(--letra-escala, 1)); --lh-title-2: calc(28px * var(--letra-escala, 1));
    --type-title-3: 600 calc(20px * var(--letra-escala, 1))/calc(25px * var(--letra-escala, 1)) var(--fonte); --fs-title-3: calc(20px * var(--letra-escala, 1)); --lh-title-3: calc(25px * var(--letra-escala, 1));
    --type-headline: 700 calc(17px * var(--letra-escala, 1))/calc(22px * var(--letra-escala, 1)) var(--fonte); --fs-headline: calc(17px * var(--letra-escala, 1)); --lh-headline: calc(22px * var(--letra-escala, 1));
    --type-body: 400 calc(17px * var(--letra-escala, 1))/calc(22px * var(--letra-escala, 1)) var(--fonte); --fs-body: calc(17px * var(--letra-escala, 1)); --lh-body: calc(22px * var(--letra-escala, 1));
    --type-callout: 400 calc(16px * var(--letra-escala, 1))/calc(21px * var(--letra-escala, 1)) var(--fonte); --fs-callout: calc(16px * var(--letra-escala, 1)); --lh-callout: calc(21px * var(--letra-escala, 1));
    --type-subheadline: 600 calc(15px * var(--letra-escala, 1))/calc(20px * var(--letra-escala, 1)) var(--fonte); --fs-subheadline: calc(15px * var(--letra-escala, 1)); --lh-subheadline: calc(20px * var(--letra-escala, 1));
    --type-footnote: 400 calc(13px * var(--letra-escala, 1))/calc(18px * var(--letra-escala, 1)) var(--fonte); --fs-footnote: calc(13px * var(--letra-escala, 1)); --lh-footnote: calc(18px * var(--letra-escala, 1));
    --type-caption: 500 calc(12px * var(--letra-escala, 1))/calc(16px * var(--letra-escala, 1)) var(--fonte); --fs-caption: calc(12px * var(--letra-escala, 1)); --lh-caption: calc(16px * var(--letra-escala, 1));
    --linha-tabela: 44px; --linha-menu: 44px;
    --controle-regular: 44px; --controle-large: 44px;
    --alvo-minimo: 28px; --alvo-padrao: 44px; --margem: 16px;
  }
  .alvo-dedo::after { content: ''; position: absolute; left: 50%; top: 50%;
    width: max(100%, var(--alvo-padrao)); height: max(100%, var(--alvo-padrao)); transform: translate(-50%, -50%); }
}