/* KM em Dia · tokens da identidade (Direção D, "Pista")
   Uso: <link rel="stylesheet" href="css/tokens.css"> antes do CSS do app.
   Tema: segue o sistema. Para forçar, use <html data-theme="light"> ou <html data-theme="dark">.
   Regra de status: âmbar e vermelho nunca aparecem sozinhos. Sempre com a palavra (Atenção, Vencido)
   e com a forma (triângulo, X). "Em dia" é neutro, com ✓, porque o limão é a cor da marca. */

/* ---------- fontes locais (licença OFL, ver fontes/) ---------- */
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-style:normal;font-display:swap;src:url('../fontes/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-style:normal;font-display:swap;src:url('../fontes/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;font-style:normal;font-display:swap;src:url('../fontes/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;font-style:normal;font-display:swap;src:url('../fontes/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;font-style:normal;font-display:swap;src:url('../fontes/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')}
/* Archivo itálica: só para títulos de marketing que imitam a marca. O logo em si é sempre o SVG. */
@font-face{font-family:'Archivo';font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap;src:url('../fontes/archivo-italic-variavel.woff2') format('woff2')}

:root{
  /* ---------- marca (iguais nos dois temas) ---------- */
  --kmd-lima:#C6F03A;        /* destaque único. Só como fundo, com --kmd-on-lima em cima (13,9:1) */
  --kmd-on-lima:#13160A;
  --kmd-azul:#4257E3;        /* cartão do hodômetro e calendário. Texto branco (5,6:1) */
  --kmd-on-azul:#FFFFFF;
  --kmd-azul-suave:#E6E9FF;  /* texto secundário sobre o azul (4,71:1) */
  --kmd-asfalto:#0C0D0E;     /* fundo do ícone e do logo negativo */

  /* ---------- superfícies e texto: tema claro ---------- */
  --kmd-bg:#ECEEEB;          /* concreto */
  --kmd-surface:#FFFFFF;
  --kmd-surface-2:#F3F4F1;
  --kmd-line:#DADDD7;
  --kmd-fg:#111214;          /* 18,7:1 no surface */
  --kmd-muted:#5B6066;       /* 6,3:1 no surface, 5,4:1 no bg */
  --kmd-ink:#141517;         /* cartão escuro de destaque no tema claro */
  --kmd-on-ink:#F4F5F2;
  --kmd-ink-muted:#A7ACB1;

  /* ---------- status (separados da marca) ---------- */
  --kmd-warn:#8A5200;        /* texto de atenção sobre fundo claro (6,4:1) */
  --kmd-warn-fill:#F7B93E;   /* selo de atenção; texto em --kmd-on-fill */
  --kmd-bad:#B3261E;         /* texto de vencido sobre fundo claro (6,5:1) */
  --kmd-bad-fill:#FF7B67;    /* selo de vencido; texto em --kmd-on-fill */
  --kmd-on-fill:#1A0F05;     /* 10,7:1 no âmbar, 7,4:1 no coral */
  --kmd-ok:var(--kmd-fg);    /* em dia: neutro, sempre com ✓ */

  /* ---------- tipografia ---------- */
  --kmd-font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --kmd-font-marca:'Archivo','Arial Black',sans-serif;
  --kmd-num:tabular-nums;               /* font-variant-numeric em todo número */
  --kmd-fs-hero:56px;  --kmd-lh-hero:.92; --kmd-ls-hero:-.05em;   /* número herói: "9 dias", "86.400" */
  --kmd-fs-h1:30px;    --kmd-lh-h1:1.08;  --kmd-ls-h1:-.035em;    /* manchete do painel */
  --kmd-fs-h2:20px;    --kmd-lh-h2:1.2;   --kmd-ls-h2:-.02em;     /* título de seção e de cartão */
  --kmd-fs-body:15px;  --kmd-lh-body:1.5;
  --kmd-fs-small:13px;
  --kmd-fs-label:12px;                  /* selos e legendas, sempre peso 700 */
  --kmd-fw-regular:400; --kmd-fw-medium:600; --kmd-fw-bold:700; --kmd-fw-black:800;

  /* ---------- espaçamento (base 4) ---------- */
  --kmd-s1:4px; --kmd-s2:8px; --kmd-s3:12px; --kmd-s4:16px; --kmd-s5:20px; --kmd-s6:24px; --kmd-s8:32px; --kmd-s10:40px;
  --kmd-toque:44px;          /* área mínima de toque */

  /* ---------- raios: três tamanhos, um por nível ---------- */
  --kmd-r-lg:26px;           /* cartões grandes (hodômetro, detalhe) */
  --kmd-r-md:20px;           /* cartões de peça */
  --kmd-r-sm:14px;           /* campos, blocos internos */
  --kmd-r-pill:999px;        /* botões, abas, selos */

  /* ---------- sombras: quase nenhuma; a separação vem da cor ---------- */
  --kmd-sombra-folha:0 -8px 32px rgba(12,13,14,.18);   /* só na folha que sobe de baixo */
  --kmd-sombra-foco:0 0 0 3px var(--kmd-lima);

  /* ---------- movimento ---------- */
  --kmd-t-rapido:120ms;      /* toque em botão */
  --kmd-t-medio:220ms;       /* troca de aba, abrir selo */
  --kmd-t-lento:420ms;       /* folha que sobe, barra de peças enchendo */
  --kmd-ease:cubic-bezier(.2,.7,.2,1);

  color-scheme:light;
}

/* ---------- tema escuro ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --kmd-bg:#0C0D0E; --kmd-surface:#17181A; --kmd-surface-2:#212326; --kmd-line:#2C2F33;
    --kmd-fg:#F2F3F0; --kmd-muted:#9EA3A9;
    --kmd-ink:#212326; --kmd-on-ink:#F2F3F0; --kmd-ink-muted:#9EA3A9;
    --kmd-warn:#F7B93E; --kmd-bad:#FF8A78;
    --kmd-sombra-folha:0 -8px 32px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --kmd-bg:#0C0D0E; --kmd-surface:#17181A; --kmd-surface-2:#212326; --kmd-line:#2C2F33;
  --kmd-fg:#F2F3F0; --kmd-muted:#9EA3A9;
  --kmd-ink:#212326; --kmd-on-ink:#F2F3F0; --kmd-ink-muted:#9EA3A9;
  --kmd-warn:#F7B93E; --kmd-bad:#FF8A78;
  --kmd-sombra-folha:0 -8px 32px rgba(0,0,0,.5);
  color-scheme:dark;
}

@media (prefers-reduced-motion:reduce){
  :root{--kmd-t-rapido:0ms;--kmd-t-medio:0ms;--kmd-t-lento:0ms}
}