/* Fonte da verdade da paleta e dos tokens (aprovada na Etapa 1). O tema é aplicado via [data-theme] no <html>. */
:root {
  --marinho-900: #0B1F3A;
  --marinho-700: #1E3A66;
  --marinho-500: #2F5A99;
  --ceu-400: #6FB2FF;
  --ceu-300: #8EC5FF;
  --ceu-100: #E6F2FF;
  --papel: #F6F8FB;
  --branco: #FFFFFF;
  --ambar: #F5A524;
  --ambar-escuro: #8A5A00;
  --verde: #1FA971;
  --verde-escuro: #0E6B45;
  --tinta: #0E1726;
  --tinta-suave: #4E5D73;

  --bg: var(--papel);
  --surface: var(--branco);
  --surface-2: var(--ceu-100);
  --text: var(--tinta);
  --text-muted: var(--tinta-suave);
  --primary: var(--marinho-900);
  --on-primary: var(--branco);
  --line: #DCE3EE;
  --ok-bg: #E3F6EE; --ok-fg: var(--verde-escuro);
  --warn-bg: #FFF3DC; --warn-fg: var(--ambar-escuro);
  --danger-fg: #B42318;
  --board-bg: var(--marinho-900); --board-tile: #13294B; --board-text: #C9D6EA;
  --tabbar-bg: rgb(255 255 255 / .92);
  --board-accent: var(--ceu-300);
  --accent: var(--ambar);
  --hover-line: var(--ceu-300);
  --focus: var(--ceu-400);
  --toast-bg: var(--marinho-900);
  /* Preenchimentos e detalhes que a paleta "todas" troca por degradês. */
  --primary-fill: var(--primary);
  --on-primary-fill: var(--on-primary);
  --board-mark: var(--ambar);
  --trio-faixa: none;

  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-scale: 1;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px;
  --shadow: 0 1px 2px rgb(11 31 58 / .06), 0 8px 24px rgb(11 31 58 / .06);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --touch: 48px;
  --appbar-h: 88px;
  --tabbar-h: 68px;
  --content-max: 720px;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #07111F;
  --surface: #0F1E33;
  --surface-2: #16294A;
  --text: #E8EEF7;
  --text-muted: #A3B2C7;
  --primary: var(--ceu-400);
  --on-primary: #07111F;
  --line: #22385C;
  --ok-bg: rgb(31 169 113 / .16); --ok-fg: #6FE0B0;
  --warn-bg: rgb(245 165 36 / .16); --warn-fg: #FFC864;
  --danger-fg: #FF8A80;
  --board-bg: #0C1C33; --board-tile: #16294A;
  --tabbar-bg: rgb(15 30 51 / .92);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
  color-scheme: dark;
}

/*
 * Temas por companhia ([data-cia] no <html>). A base acima só serve de reserva: o app sempre aplica uma paleta.
 * Cores de texto e botões escurecidas a partir da cor da marca para manter contraste AA;
 * a cor viva da marca aparece no painel, nos detalhes e no ponto da companhia.
 */

/*
 * Paleta padrão do app ([data-cia="todas"], com todas as companhias), nos modos claro e escuro: une as três marcas em equilíbrio.
 * Base neutra levemente fria; painel, botões e chips selecionados no mesmo degradê tricolor (--trio): azul da Azul,
 * vermelho da Latam e laranja da Gol em partes iguais; ícones alternam entre as quatro cores (--tom-*).
 */
[data-cia="todas"] {
  /* Cores das três companhias e degradê dos cards grandes e do chip "Todas": cada cor segura um trecho (Azul no alto à esquerda, Latam no meio, Gol embaixo à direita). */
  --todas-azul: #0B4FB8;
  --todas-latam: #D7193F;
  --todas-gol: #FF7A1A;
  --todas-degrade: linear-gradient(135deg, var(--todas-azul) 0%, var(--todas-azul) 22%, var(--todas-latam) 40%, var(--todas-latam) 58%, var(--todas-gol) 76%, var(--todas-gol) 100%);
  /* Degradê tricolor (Azul → Latam → Gol) do painel, dos botões e do chip "Todas" selecionado. */
  --trio: linear-gradient(135deg, #0033A0 0%, #E31837 50%, #FF6600 100%);
  --on-primary-fill: #FFFFFF;
  --bg: #F8F7FB;
  --surface-2: #F0EFF6;
  --primary: #1D2F8C;
  --primary-fill: var(--trio);
  --line: #E3E0EC;
  --board-bg: var(--todas-degrade);
  --board-tile: rgb(255 255 255 / .18);
  --board-text: #FFFFFF;
  --board-accent: #FFE2C8;
  --board-mark: #FFFFFF;
  --accent: #E85D00;
  --hover-line: #F5B48A;
  --focus: #0093CC;
  --toast-bg: var(--trio);
  --trio-faixa: linear-gradient(90deg, var(--todas-azul) 0%, var(--todas-azul) 22%, var(--todas-latam) 40%, var(--todas-latam) 58%, var(--todas-gol) 76%, var(--todas-gol) 100%);
  --tom-1-bg: #FFEBDD; --tom-1-fg: #B84300;
  --tom-2-bg: #ECE9FA; --tom-2-fg: #2A1696;
  --tom-3-bg: #DFF1FB; --tom-3-fg: #0B5AA8;
  --tom-4-bg: #FCE6EC; --tom-4-fg: #B0124A;
  --tabbar-bg: rgb(255 255 255 / .92);
  --shadow: 0 1px 2px rgb(29 47 140 / .06), 0 8px 24px rgb(29 47 140 / .06);
}
[data-theme="dark"][data-cia="todas"] {
  --bg: #0A0B1C;
  --surface: #13152F;
  --surface-2: #1C1F42;
  --primary: #AFC0FF;
  --trio: linear-gradient(135deg, #16337E 0%, #A8182F 50%, #B84A03 100%);
  --primary-fill: var(--trio);
  --on-primary: #0A0B1C;
  --on-primary-fill: #FFFFFF;
  --line: #2A2D5C;
  --board-bg: var(--todas-degrade);
  --board-tile: rgb(255 255 255 / .16);
  --board-text: #F3F4FB;
  --board-accent: #FFD9B8;
  --board-mark: #FFFFFF;
  --accent: #FF9A52;
  --hover-line: #8A5A6E;
  --focus: #5BC8F5;
  --toast-bg: var(--trio);
  --tom-1-bg: rgb(255 138 61 / .16); --tom-1-fg: #FFA766;
  --tom-2-bg: rgb(140 123 255 / .2); --tom-2-fg: #C3B8FF;
  --tom-3-bg: rgb(91 200 245 / .16); --tom-3-fg: #86D6F8;
  --tom-4-bg: rgb(255 92 122 / .16); --tom-4-fg: #FF9DB1;
  --tabbar-bg: rgb(19 21 47 / .92);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
}

/* Gol: laranja da marca (#FF6B00) com tons quentes. */
[data-cia="gol"] {
  --bg: #FFF8F3;
  --surface-2: #FFEEE2;
  --primary: #B84300;
  --line: #F2DDCD;
  --board-bg: #A93A00; --board-tile: #C24A00; --board-text: #FFE3CF;
  --board-accent: #FFD7B8;
  --hover-line: #FFB27A;
  --focus: #FF6B00;
  --toast-bg: #5A2200;
  --tabbar-bg: rgb(255 248 243 / .92);
  --shadow: 0 1px 2px rgb(169 58 0 / .07), 0 8px 24px rgb(169 58 0 / .07);
}
[data-theme="dark"][data-cia="gol"] {
  --bg: #140C07;
  --surface: #1F140C;
  --surface-2: #2E1D10;
  --primary: #FF8A3D;
  --on-primary: #140C07;
  --line: #3D2715;
  --board-bg: #241307; --board-tile: #3A200C; --board-text: #F2D3BC;
  --board-accent: #FFB27A;
  --hover-line: #8A4A1E;
  --focus: #FF8A3D;
  --tabbar-bg: rgb(31 20 12 / .92);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
}

/* Latam: índigo (#1B0088) com coral (#E8114B) como destaque. */
[data-cia="latam"] {
  --bg: #F7F6FC;
  --surface-2: #ECE9FA;
  --primary: #1B0088;
  --line: #DDD8F2;
  --board-bg: #1B0088; --board-tile: #2A13A0; --board-text: #D9D3F7;
  --board-accent: #FF8FA6;
  --accent: #E8114B;
  --hover-line: #FF8FA6;
  --focus: #E8114B;
  --toast-bg: #1B0088;
  --tabbar-bg: rgb(255 255 255 / .92);
  --shadow: 0 1px 2px rgb(27 0 136 / .07), 0 8px 24px rgb(27 0 136 / .07);
}
[data-theme="dark"][data-cia="latam"] {
  --bg: #0B0820;
  --surface: #15113A;
  --surface-2: #211B52;
  --primary: #B7A9FF;
  --on-primary: #0B0820;
  --line: #2D2666;
  --board-bg: #120C3D; --board-tile: #211B52; --board-text: #CFC8F5;
  --board-accent: #FF8FA6;
  --accent: #FF5C7A;
  --hover-line: #5A4BB0;
  --focus: #FF5C7A;
  --tabbar-bg: rgb(21 17 58 / .92);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
}

/* Azul: azul royal (#0B4EA2) com ciano (#00A3E0) como destaque. */
[data-cia="azul"] {
  --bg: #F4F8FD;
  --surface-2: #E3EEFB;
  --primary: #0B4EA2;
  --line: #D3E1F3;
  --board-bg: #0A3F86; --board-tile: #12509E; --board-text: #CFE3F8;
  --board-accent: #7FD6F5;
  --hover-line: #7FD6F5;
  --focus: #00A3E0;
  --toast-bg: #0A3F86;
  --tabbar-bg: rgb(255 255 255 / .92);
  --shadow: 0 1px 2px rgb(10 63 134 / .07), 0 8px 24px rgb(10 63 134 / .07);
}
[data-theme="dark"][data-cia="azul"] {
  --bg: #061529;
  --surface: #0C2140;
  --surface-2: #12305A;
  --primary: #5BB4FF;
  --on-primary: #061529;
  --line: #1C3D6B;
  --board-bg: #08203F; --board-tile: #12305A; --board-text: #C4D9F2;
  --board-accent: #7FD6F5;
  --hover-line: #2F6DB5;
  --focus: #5BB4FF;
  --tabbar-bg: rgb(12 33 64 / .92);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
}