/* Tokens do visual A, Grafite Console (docs/design/DESIGN-SYSTEM.md, seção 7).
   Único lugar com as cores e fontes da plataforma: todos os produtos herdam daqui.
   Tema: escuro (padrão do arquivo), claro e automático (segue o sistema operacional).
   A tag <html data-tema="claro|escuro|auto"> decide qual conjunto vale (docs/design/DESIGN-SYSTEM.md, seção 9).
   ATENÇÃO: o bloco claro aparece duas vezes (escolhido e automático) e os dois precisam ser idênticos;
   test_tema.py confere. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.77bc02670657.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.f7016cd446d2.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.196e3cbc5fee.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2");
}

:root {
  --qt-font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --qt-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --qt-radius: 6px;
  --qt-radius-card: 8px;

  /* Tema escuro (Grafite Console): vale também quando não há atributo data-tema */
  color-scheme: dark;
  --qt-bg: #0C0E11;
  --qt-surface: #12151A;
  --qt-raised: #181C22;
  --qt-active: #1B2027;
  --qt-border: #232830;
  --qt-border-input: #5C6573;
  --qt-text: #E6E9EE;
  --qt-text-soft: #C3C9D2;
  --qt-muted: #8A93A1;
  --qt-brand: #1291C6;
  --qt-brand-text: #4FB6E3;
  --qt-on-brand: #04131C;
  --qt-success: #3FCF8E;
  --qt-warning: #E3B341;
  --qt-danger: #F0716B;

  /* Complementos usados nas telas de referência (seções 1 e 3 do design system) */
  --qt-success-text: #6FE0AB;
  --qt-warning-text: #EBC25F;
  --qt-danger-text: #F58E88;
  --qt-brand-chip-text: #5BC0EB;
  --qt-link-hover: #8ED0F0;
  --qt-menu-text: #A5ADBA;
  --qt-menu-ativo: #FFFFFF;
  --qt-neutral-dot: #6B7482;
  --qt-row-divider: #1C2128;

  /* Fundos e bordas translúcidos de status (pílula, chip, alerta) */
  --qt-success-fundo: #3FCF8E1F;
  --qt-success-borda: #3FCF8E40;
  --qt-warning-fundo: #E3B3411F;
  --qt-warning-borda: #E3B34140;
  --qt-danger-fundo: #F0716B1F;
  --qt-danger-borda: #F0716B40;
  --qt-brand-fundo: #1291C61F;
  --qt-brand-borda: #1291C640;
  --qt-neutral-fundo: #6B74821F;

  /* Outros */
  --qt-grade: #ffffff08;
  --qt-qr-fundo: #FFFFFF;
  --qt-logo-escura: block;
  --qt-logo-clara: none;
}

/* Tema claro escolhido pelo usuário */
:root[data-tema="claro"] {
  color-scheme: light;
  --qt-bg: #F4F5F7;
  --qt-surface: #FFFFFF;
  --qt-raised: #EEF0F3;
  --qt-active: #E2E7ED;
  --qt-border: #DCE0E5;
  --qt-border-input: #858E9B;
  --qt-text: #14181F;
  --qt-text-soft: #363E4A;
  --qt-muted: #5A6472;
  --qt-brand: #1291C6;
  --qt-brand-text: #0A6A94;
  --qt-on-brand: #04131C;
  --qt-success: #1E9E62;
  --qt-warning: #C28A0A;
  --qt-danger: #D8433B;
  --qt-success-text: #11673F;
  --qt-warning-text: #7D5400;
  --qt-danger-text: #B02A23;
  --qt-brand-chip-text: #0A6A94;
  --qt-link-hover: #08506F;
  --qt-menu-text: #3F4754;
  --qt-menu-ativo: #14181F;
  --qt-neutral-dot: #8A93A1;
  --qt-row-divider: #EAEDF1;
  --qt-success-fundo: #1E9E621F;
  --qt-success-borda: #1E9E6240;
  --qt-warning-fundo: #C28A0A1F;
  --qt-warning-borda: #C28A0A40;
  --qt-danger-fundo: #D8433B1F;
  --qt-danger-borda: #D8433B40;
  --qt-brand-fundo: #1291C61F;
  --qt-brand-borda: #1291C640;
  --qt-neutral-fundo: #8A93A11F;
  --qt-grade: #0000000A;
  --qt-qr-fundo: #FFFFFF;
  --qt-logo-escura: none;
  --qt-logo-clara: block;
}

/* Automático: segue o sistema operacional (só vale quando o usuário não escolheu escuro) */
@media (prefers-color-scheme: light) {
  :root[data-tema="auto"] {
    color-scheme: light;
    --qt-bg: #F4F5F7;
    --qt-surface: #FFFFFF;
    --qt-raised: #EEF0F3;
    --qt-active: #E2E7ED;
    --qt-border: #DCE0E5;
    --qt-border-input: #858E9B;
    --qt-text: #14181F;
    --qt-text-soft: #363E4A;
    --qt-muted: #5A6472;
    --qt-brand: #1291C6;
    --qt-brand-text: #0A6A94;
    --qt-on-brand: #04131C;
    --qt-success: #1E9E62;
    --qt-warning: #C28A0A;
    --qt-danger: #D8433B;
    --qt-success-text: #11673F;
    --qt-warning-text: #7D5400;
    --qt-danger-text: #B02A23;
    --qt-brand-chip-text: #0A6A94;
    --qt-link-hover: #08506F;
    --qt-menu-text: #3F4754;
    --qt-menu-ativo: #14181F;
    --qt-neutral-dot: #8A93A1;
    --qt-row-divider: #EAEDF1;
    --qt-success-fundo: #1E9E621F;
    --qt-success-borda: #1E9E6240;
    --qt-warning-fundo: #C28A0A1F;
    --qt-warning-borda: #C28A0A40;
    --qt-danger-fundo: #D8433B1F;
    --qt-danger-borda: #D8433B40;
    --qt-brand-fundo: #1291C61F;
    --qt-brand-borda: #1291C640;
    --qt-neutral-fundo: #8A93A11F;
    --qt-grade: #0000000A;
    --qt-qr-fundo: #FFFFFF;
    --qt-logo-escura: none;
    --qt-logo-clara: block;
  }
}