/* navsupply-ui: tokens. Cópia fiel do NAVQUOTE (backend/static/styles.css,
   onda 30): os mesmos nomes de token nos dois apps, em português. Os dois
   temas redefinem os MESMOS tokens. Fora só os --cais-* (a cena do cais do
   NAVQUOTE). A fonte (Archivo, OFL) vem de fonts/, ao lado deste arquivo. */

/* ---------- fonte (OFL, fonts/OFL-Archivo.txt) ---------- */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variable-normal-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variable-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens: tema claro (padrão) ---------- */

:root {
  color-scheme: light;

  /* superfícies e traços */
  --papel: #EEF1F4;            /* fundo da área de trabalho */
  --papel-fundo: #F5F7F9;      /* faixas dentro da folha (gaveta, pedido) */
  --folha: #FFFFFF;            /* superfícies de trabalho */
  --linha: #D6DCE3;
  --linha-fraca: #E8ECF0;
  --hover: #EEF1F4;
  --selecao: #E7EEF6;          /* linha com gaveta aberta (UI-2, L10: frio, não creme) */
  --codigo-repetido: #F0F6FD;  /* UI-15: mesmo código em 2+ linhas (azul bem sutil) */
  --zebra: #F6F8FA;            /* UI-16: linha par das tabelas do Admin */

  /* texto */
  --tinta: #15233B;
  --tinta-fraca: #5C677A;

  /* marca */
  --navy: #16224A;             /* botão primário */
  --navy-hover: #232D5B;
  --navy-texto: #EEF1F4;       /* texto sobre navy */
  --navy-texto-fraco: #A9B2C7;
  --navy-traco: rgba(238, 241, 244, .14);
  --navy-hover-lateral: rgba(238, 241, 244, .07);
  --navy-marcador: #16224A;    /* marcador/barra navy sobre a folha */
  --lombada: #16224A;          /* barra lateral, login, topo do celular */
  --cab-tabela: #16224A;       /* cabeçalho de tabela */
  --cab-tabela-texto: #EEF1F4;
  --ouro: #C6A15B;             /* O acento: ativo, foco, selo */
  --ouro-tinta: #7D6530;       /* dourado legível sobre branco */

  /* estados (texto + marcador quadrado) */
  --ok: #2E7D4F;
  --atencao: #B07A17;
  --atencao-tinta: #8A5F12;    /* texto âmbar com contraste AA */
  --erro: #B23A2E;
  --info: #2F5FA8;
  --neutro: #8A94A6;
  --ok-fundo: #EDF6F0;
  --atencao-fundo: #FBF4E6;
  --erro-fundo: #FBEFED;
  --info-fundo: #EDF2FA;
  --erro-traco: #E2B4AE;

  /* controles */
  --campo: #FFFFFF;
  --campo-borda: #98A3B3;
  --campo-borda-forte: #8F9AAB;
  --seta-select: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2710%27%20height%3D%276%27%20viewBox%3D%270%200%2010%206%27%3E%3Cpath%20d%3D%27M1%201l4%204%204-4%27%20fill%3D%27none%27%20stroke%3D%27%235C677A%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --barra-fundo: #DDE3EA;
  --skel: #E3E8EE;
  --lapis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C677A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E");
  --lombada-borda: transparent;

  /* flutuantes */
  --sombra: 0 8px 24px rgba(21, 35, 59, .18);
  --sombra-rodape: 0 -6px 18px rgba(21, 35, 59, .07);
  --veu: rgba(21, 35, 59, .45);
  --dica-fundo: #15233B;
  --dica-texto: #EEF1F4;
  --toast-fundo: #16224A;
  --toast-texto: #EEF1F4;
  --toast-ok: #5DBB8A;
  --toast-erro: #E8806F;
  --selo-atencao: #E5B45A;     /* UI-16: selo âmbar do sino (sobre a lombada) */
  --selo-texto: #0B1226;       /* número dentro do selo */
  --branco: #FFFFFF;           /* texto sobre a lombada e o botão primário */
  --codigo-fundo: #0B1226;
  --codigo-texto: #DCE0EC;

  /* medidas */
  --raio: 2px;                 /* controles e folhas */
  --raio-flutuante: 6px;       /* modal, menu, dica */
  --h-controle: 34px;
  --lateral: 232px;
  --trilho: 56px;
  --gutter: 24px;
  --t: 150ms;

  --fonte: "Archivo", "Bahnschrift", "Segoe UI", system-ui, sans-serif;
}

/* ---------- tokens: tema escuro navy (bloco 1: sistema escuro, sem escolha) ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papel: #0F1730;
    --papel-fundo: #131D3C;
    --folha: #16224A;
    --linha: #3C4A80;
    --linha-fraca: #2C3868;
    --hover: #1C2A57;
    --selecao: #222C52;
    --codigo-repetido: #1B2B5E;
    --zebra: #192550;
    --tinta: #E9ECF2;
    --tinta-fraca: #A9B2C7;
    --navy: #4A5A99;
    --navy-hover: #5667A8;
    --navy-texto: #EEF1F4;
    --navy-texto-fraco: #A9B2C7;
    --navy-traco: rgba(238, 241, 244, .12);
    --navy-hover-lateral: rgba(238, 241, 244, .06);
    --navy-marcador: #8E9BD0;
    --lombada: #070B18;
    --cab-tabela: #0B1226;
    --cab-tabela-texto: #E9ECF2;
    --ouro: #C6A15B;
    --ouro-tinta: #D8B878;
    --ok: #5DBB8A;
    --atencao: #E0A93E;
    --atencao-tinta: #E8B65A;
    --erro: #E8806F;
    --info: #7FA6E6;
    --neutro: #7D88A3;
    --ok-fundo: rgba(93, 187, 138, .12);
    --atencao-fundo: rgba(224, 169, 62, .12);
    --erro-fundo: rgba(232, 128, 111, .12);
    --info-fundo: rgba(127, 166, 230, .12);
    --erro-traco: rgba(232, 128, 111, .45);
    --campo: #0F1730;
    --campo-borda: #6370A6;
    --campo-borda-forte: #7D88A3;
    --seta-select: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2710%27%20height%3D%276%27%20viewBox%3D%270%200%2010%206%27%3E%3Cpath%20d%3D%27M1%201l4%204%204-4%27%20fill%3D%27none%27%20stroke%3D%27%23A9B2C7%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
    --barra-fundo: #2A3660;
    --skel: #22305C;
    --lapis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A9B2C7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E");
    --lombada-borda: #26325C;
    --sombra: 0 8px 24px rgba(3, 6, 16, .55);
    --sombra-rodape: 0 -6px 18px rgba(3, 6, 16, .35);
    --veu: rgba(3, 6, 16, .6);
    --dica-fundo: #E9ECF2;
    --dica-texto: #15233B;
    --toast-fundo: #0B1226;
    --codigo-fundo: #0B1226;
    --codigo-texto: #DCE0EC;
  }
}

/* ---------- tokens: tema escuro (bloco 2: escolhido no botão; CÓPIA do bloco 1) ---------- */

:root[data-theme="dark"] {
  color-scheme: dark;
  --papel: #0F1730;
  --papel-fundo: #131D3C;
  --folha: #16224A;
  --linha: #3C4A80;
  --linha-fraca: #2C3868;
  --hover: #1C2A57;
  --selecao: #222C52;
  --codigo-repetido: #1B2B5E;
  --zebra: #192550;
  --tinta: #E9ECF2;
  --tinta-fraca: #A9B2C7;
  --navy: #4A5A99;
  --navy-hover: #5667A8;
  --navy-texto: #EEF1F4;
  --navy-texto-fraco: #A9B2C7;
  --navy-traco: rgba(238, 241, 244, .12);
  --navy-hover-lateral: rgba(238, 241, 244, .06);
  --navy-marcador: #8E9BD0;
  --lombada: #070B18;
  --cab-tabela: #0B1226;
  --cab-tabela-texto: #E9ECF2;
  --ouro: #C6A15B;
  --ouro-tinta: #D8B878;
  --ok: #5DBB8A;
  --atencao: #E0A93E;
  --atencao-tinta: #E8B65A;
  --erro: #E8806F;
  --info: #7FA6E6;
  --neutro: #7D88A3;
  --ok-fundo: rgba(93, 187, 138, .12);
  --atencao-fundo: rgba(224, 169, 62, .12);
  --erro-fundo: rgba(232, 128, 111, .12);
  --info-fundo: rgba(127, 166, 230, .12);
  --erro-traco: rgba(232, 128, 111, .45);
  --campo: #0F1730;
  --campo-borda: #6370A6;
  --campo-borda-forte: #7D88A3;
  --seta-select: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2710%27%20height%3D%276%27%20viewBox%3D%270%200%2010%206%27%3E%3Cpath%20d%3D%27M1%201l4%204%204-4%27%20fill%3D%27none%27%20stroke%3D%27%23A9B2C7%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --barra-fundo: #2A3660;
  --skel: #22305C;
  --lapis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A9B2C7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E");
  --lombada-borda: #26325C;
  --sombra: 0 8px 24px rgba(3, 6, 16, .55);
  --sombra-rodape: 0 -6px 18px rgba(3, 6, 16, .35);
  --veu: rgba(3, 6, 16, .6);
  --dica-fundo: #E9ECF2;
  --dica-texto: #15233B;
  --toast-fundo: #0B1226;
  --codigo-fundo: #0B1226;
  --codigo-texto: #DCE0EC;
}