/* =============================================================================
   Flight Ops App - tokens visuais - TEMA v1 (azul-aco dessaturado)
   Gerado em 2026-09-20.

   REGRA UNICA DESTE ARQUIVO: toda cor do sistema mora aqui. Nenhum hexadecimal
   solto em componente, em JSX ou em SVG. Trocar a identidade tem que ser
   reescrever este arquivo, e nada mais.

   Tres blocos:
     :root                              -> tema claro (padrao)
     html[data-theme="dark"]            -> tema escuro
     html[data-theme="dark"] .pdf-page  -> reancora o claro dentro do escuro

   Os tokens --pdf-* NAO aparecem no bloco escuro de proposito. O tema escuro e
   da TELA; o documento gerado (ficha de avaliacao, relatorio de voo, relatorio de diretoria)
   e sempre claro. Se um dia --pdf-* for redefinido no escuro, a impressao sai
   com fundo preto.

   Todos os pares cor/fundo usados na interface foram calculados pela formula de
   luminosidade relativa da WCAG 2.1 e passam em AA nos dois temas. A tabela
   completa esta em docs/tema-v1.md e nos mockups em design/.
   ============================================================================= */

/* ---- invariantes: nao mudam com o tema ---- */
:root {
  /* AI contributor: Codex (OpenAI), 2026-10-03 — shared modal overlay. */
  --overlay-background: rgba(0, 0, 0, 0.4);
  --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono: 'JetBrains Mono','Cascadia Code','Fira Code',monospace;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --border-width-indicator: 3px;
  /* AI contributor: Claude (Anthropic), 2026-10-05 — one look for every indicator card (catalog M19 StatCard on a
     white panel: sunken surface, soft border) and for every progress bar (catalog A19 ProgressBar). */
  --stat-card-background: var(--surface-sunken);
  --stat-card-border: var(--border-default);
  --stat-card-radius: var(--radius-lg);
  --stat-card-shadow: var(--shadow-xs);
  /* Text of every indicator card (same as the Backoffice / Apontamento cards): small secondary label above, the value
     in the largest step of the scale. */
  --stat-card-padding: var(--space-4);
  --stat-label-size: var(--fs-xs);
  --stat-label-color: var(--text-secondary);
  --stat-label-weight: 400;
  --stat-value-size: var(--fs-xl);
  --stat-value-weight: 700;
  --stat-value-color: var(--text-primary);
  --stat-value-tracking: -0.02em;
  --stat-value-line-height: 1.3;
  --progress-height: var(--space-2);
  --progress-track: var(--gray-100);
  --progress-fill: var(--interactive-default);
  /* docs/tarefas/2026-09-23-correcoes-pos-conferencia.md, etapa 1 — escala
     revisada em 23/09/2026. A antiga (dropdown 10, sticky 20, modal 30,
     overlay 40, toast 50) tinha dois defeitos:
     1) overlay (40) do ui/Dialog era MAIOR que modal (30) — o veu do
        fundo pintava por cima do proprio conteudo do dialogo, capturando
        todo clique; o Radix lia isso como clique fora e fechava (sintoma
        relatado: "aparece um layer por cima que e clicado e a modal
        desaparece", em Desativar/Editar e no painel da lateral abaixo de
        900px);
     2) dropdown (10) era MENOR que sticky (20) da .topbar — um
        ui/DropdownMenu ou ui/Select portalado pro body, se caisse atras
        da faixa sticky, ficaria escondido por ela (nao observado ainda,
        mas certo pela ordem).
     Ordem nova: sticky < overlay < modal < dropdown < toast. Dropdown
     acima de modal de proposito — o ui/Select de organizacao do
     UserForm e os menus de acao sao portalados pro body, e um menu
     aberto DENTRO de um dialogo precisa aparecer por cima dele. */
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-dropdown: 50;
  --z-toast: 60;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 250ms;
  /* Codex (OpenAI), 2026-10-03 — lighting area entrance requested by user. */
  --duration-chart: 1500ms;
  /* Claude Code — Claude Opus 5.5, 2026-10-22 — short entrance of the shared charts on the screen (mockup docs/mockups/2026-10-22-graficos-shadcn.html). */
  --duration-chart-entry: 350ms;
  --ease-default: cubic-bezier(0.4,0,0.2,1);
  --ease-in: cubic-bezier(0.4,0,1,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  /* A01 Button: altura Medium do catalogo visual. Nao derivar de padding,
     porque <button> e links com aparencia de botao herdariam line-height
     diferente e deixariam de alinhar. */
  --control-height-md: 36px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  /* Escala tipografica (docs/tarefas/2026-09-23-tema-shadcn.md, etapa 1) —
     substitui o minimo de 16px herdado do app antigo (CLAUDE.md, secao
     Interface, revogado em 23/09/2026). Mesma escala do mockup shadcn
     dashboard-01 aprovado pelo Anderson (docs/mockups/2026-09-23-layout.html).
     Nao muda entre temas — tipografia nao e cor. */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  /* Layout da area autenticada (docs/tarefas/2026-09-21-layout-e-modulos.md,
     etapa 1) — o .page de 720px (secao 5 do base.css) era dimensionado para
     a tela de login e nao cabe barra lateral + conteudo. Area autenticada
     ganha largura propria. */
  --layout-max-width: 1440px;
  --layout-sidebar-width: 240px;
  --layout-sidebar-width-collapsed: 64px;
  --layout-gutter: var(--space-6);
  /* Altura da barra superior fixa (.topbar). O html reserva essa altura e mais
     o espaco de um rotulo ao rolar ate um campo (scroll-padding-top), para o
     campo focado pela validacao nao ficar sob a barra (cenario E, 11/10/2026). */
  --layout-topbar-height: 52px;
  /* Mapa (docs/tarefas/2026-09-24-mapas-openstreetmap.md, etapa 2) — o
     Leaflet mede o pai; container sem altura EXPLICITA da mapa em branco.
     Nao muda entre temas nem e cor, mas mora aqui pela mesma razao de tudo
     o mais nesta secao: um lugar so, nunca pixel solto no componente. */
  --map-height: 320px;
  --pdf-header-bg: #1F3B4D;
  --pdf-accent: #2F5D7C;
  --pdf-text: #1A2129;
  --pdf-muted: #5C6873;
  --pdf-border: #D3DAE1;
  --pdf-row-even: #F6F8FA;
  /* AI contributor: Claude (Anthropic) — Claude Sonnet 5.5, 2026-10-15 — "request colour" scale (decision A119): the 20 choices of the main Gantt bar of a crew request.
     No new hex: each one is an existing token (chart series, brand, feedback border, catalogue yellow, text) or a mix of two of them, so it follows the dark theme
     by itself (declared on the same element that receives the theme's own tokens). The Gantt draws the bar with a 22% fill of the colour and the colour as border. */
  --request-color-blue: var(--chart-series-1);
  --request-color-teal: var(--chart-series-2);
  --request-color-green: var(--chart-series-3);
  --request-color-sky: var(--chart-series-4);
  --request-color-olive: var(--chart-series-5);
  --request-color-slate: var(--chart-series-6);
  --request-color-brand: var(--interactive-default);
  --request-color-steel: var(--feedback-info-border);
  --request-color-emerald: var(--feedback-success-border);
  --request-color-amber: var(--feedback-warning-border);
  --request-color-red: var(--feedback-error-border);
  --request-color-yellow: var(--catalog-yellow);
  --request-color-cyan: color-mix(in srgb, var(--chart-series-1) 50%, var(--chart-series-2));
  --request-color-jade: color-mix(in srgb, var(--chart-series-2) 50%, var(--chart-series-3));
  --request-color-moss: color-mix(in srgb, var(--chart-series-3) 50%, var(--chart-series-5));
  --request-color-lime: color-mix(in srgb, var(--chart-series-5) 55%, var(--catalog-yellow));
  --request-color-coral: color-mix(in srgb, var(--feedback-warning-border) 50%, var(--feedback-error-border));
  --request-color-plum: color-mix(in srgb, var(--interactive-default) 55%, var(--feedback-error-border));
  --request-color-violet: color-mix(in srgb, var(--chart-series-1) 55%, var(--feedback-error-border));
  --request-color-graphite: var(--text-secondary);
}

/* ---- TEMA CLARO (padrao) ---- */
:root {
  --blue-900: #142B3B;
  --blue-700: #1C3A4F;
  --blue-500: #2F5D7C;
  --gray-0: #FFFFFF;
  --gray-100: #E4EAEF;
  --gray-300: #A9B5C0;
  --gray-500: #616E7A;
  --gray-900: #141C24;
  --bu-50: #EFF4F8;
  --bu-100: #DAE6EF;
  --bu-200: #C0D4E2;
  --bu-300: #9DB8CC;
  --bu-400: #6E90AB;
  --bu-500: #2F5D7C;
  --bu-600: #26506C;
  --bu-700: #1E4058;
  --bu-800: #183446;
  --bu-900: #132A39;
  --success-50: #EDF7F2;
  --success-100: #D6EDE2;
  --success-500: #1A6B4A;
  --success-700: #145639;
  --warning-50: #FDF2E8;
  --warning-100: #FAE2CC;
  --warning-500: #9A4A12;
  --warning-700: #7C3A0D;
  --error-50: #FDF0F0;
  --error-100: #FADEDE;
  --error-500: #B02127;
  --error-700: #8E191F;
  --info-50: #EFF4F8;
  --info-100: #DAE6EF;
  --info-500: #2F5D7C;
  --info-700: #254B65;
  --surface-default: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EDF1F5;
  --text-primary: #141C24;
  --text-secondary: #4C5966;
  --text-muted: #616E7A;
  --text-on-brand: #FFFFFF;
  --text-on-bu: #FFFFFF;
  --text-on-danger: #FFFFFF;
  --border-default: #DDE4EA;
  --border-strong: #87929E;
  --border-focus: #2F5D7C;
  --border-active: #2F5D7C;
  --interactive-default: #2F5D7C;
  --interactive-hover: #26506C;
  --interactive-active: #1E4058;
  --interactive-disabled: #B4BFC9;
  --feedback-success-bg: #EDF7F2;
  --feedback-success-text: #1A6B4A;
  --feedback-success-border: #38866A;
  --feedback-warning-bg: #FDF2E8;
  --feedback-warning-text: #9A4A12;
  --feedback-warning-border: #B4652B;
  --feedback-error-bg: #FDF0F0;
  --feedback-error-text: #B02127;
  --feedback-error-border: #C25158;
  --feedback-info-bg: #EFF4F8;
  --feedback-info-text: #2F5D7C;
  --feedback-info-border: #587F9C;
  --module-instruction: #1F5C7E;
  --module-personnel: #0F6E6A;
  --module-hr: #41703A;
  --module-backoffice: #5E6B7A;
  --module-reports: #2C6E9B;
  --module-settings: #6B7076;
  --tab-idle-text: #4C5966;
  --tab-active-text: #0F1720;
  --tab-active-bg: #E4EDF4;
  --tab-active-indicator: #2F5D7C;
  --tab-hover-bg: #E7EDF3;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F5F8;
  /* Codex (OpenAI), 2026-10-13 — all neutral badges: background at 60% intensity; border, icon and text at 70%, approved by the user. */
  --badge-neutral-bg: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
  --badge-neutral-border: color-mix(in srgb, var(--border-default) 70%, transparent);
  --badge-neutral-text: color-mix(in srgb, var(--text-secondary) 70%, var(--bg-primary));
  --badge-neutral-icon: color-mix(in srgb, var(--text-secondary) 70%, var(--bg-primary));
  --bg-tertiary: #EDF1F5;
  --bg-hover: #E7EDF3;
  --accent-slate: #5E6B7A;
  --accent-cyan: #0F6E6A;
  --accent-purple: #5E6B7A;
  --accent-teal: #2C6E9B;
  --status-green: #1A6B4A;
  --status-red: #B02127;
  --status-amber: #9A4A12;
  /* AI contributor: Claude (Anthropic) — Claude Opus 5.5, 2026-10-06 — identity yellow for catalogue items (colour 7 of
     grades and levels, user request); no status meaning: amber stays the alert colour. */
  --catalog-yellow: #C9A227;
  --color-error: #B02127;
  --color-success: #1A6B4A;
  --color-warning: #9A4A12;
  --color-instruction: #1F5C7E;
  --color-personnel: #0F6E6A;
  --color-hr: #41703A;
  --color-backoffice: #5E6B7A;
  --color-reports: #2C6E9B;
  --color-settings: #6B7076;
  --chart-series-1: #00539A;
  --chart-series-2: #00A19D;
  --chart-series-3: #006D2C;
  --chart-series-4: #2895C2;
  --chart-series-5: #618720;
  --chart-series-6: #6C7A88;
  --shadow-xs: 0 1px 2px rgba(20,28,36,0.05);
  --shadow-sm: 0 1px 3px rgba(20,28,36,0.08),0 1px 2px rgba(20,28,36,0.04);
  --shadow-md: 0 4px 6px rgba(20,28,36,0.07),0 2px 4px rgba(20,28,36,0.04);
  --shadow-lg: 0 10px 15px rgba(20,28,36,0.08),0 4px 6px rgba(20,28,36,0.04);
  --shadow-xl: 0 20px 25px rgba(20,28,36,0.10),0 8px 10px rgba(20,28,36,0.04);
}

/* ---- TEMA ESCURO ----
   Nao e o claro invertido. A hierarquia vem da luminosidade da superficie
   (sunken -> default -> raised), porque sombra nao funciona sobre fundo escuro.
   Nem preto puro no fundo, nem branco puro no texto: os dois cansam a vista. */
html[data-theme="dark"] {
  --blue-900: #0B1219;
  --blue-700: #121C26;
  --blue-500: #8FBBD9;
  --gray-0: #141C24;
  --gray-100: #232E3A;
  --gray-300: #5E6E7E;
  --gray-500: #A4B1BE;
  --gray-900: #E2E8EE;
  --bu-50: #132029;
  --bu-100: #1A2C38;
  --bu-200: #24404F;
  --bu-300: #8FBBD9;
  --bu-400: #7FB0D0;
  --bu-500: #8FBBD9;
  --bu-600: #A6C9E1;
  --bu-700: #BDD8E9;
  --bu-800: #D4E6F1;
  --bu-900: #EAF2F8;
  --success-50: #0F241C;
  --success-100: #153528;
  --success-500: #5FCB9C;
  --success-700: #8ADCB8;
  --warning-50: #291A0F;
  --warning-100: #3A2715;
  --warning-500: #F2A765;
  --warning-700: #F7C193;
  --error-50: #2A1416;
  --error-100: #3B1C1F;
  --error-500: #FF9A9A;
  --error-700: #FFB8B8;
  --info-50: #121F29;
  --info-100: #1A2E3C;
  --info-500: #8FBBD9;
  --info-700: #B0D0E6;
  --surface-default: #141C24;
  --surface-raised: #1B242E;
  --surface-sunken: #0E141A;
  --text-primary: #E2E8EE;
  --text-secondary: #A4B1BE;
  --text-muted: #8D9AA7;
  --text-on-brand: #FFFFFF;
  --text-on-bu: #0E141A;
  --text-on-danger: #2A1416;
  --border-default: #28323D;
  --border-strong: #5E6E7E;
  --border-focus: #8FBBD9;
  --border-active: #8FBBD9;
  --interactive-default: #2F6B8F;
  --interactive-hover: #3A7CA3;
  --interactive-active: #275C7C;
  --interactive-disabled: #3B4854;
  --feedback-success-bg: #0F241C;
  --feedback-success-text: #5FCB9C;
  --feedback-success-border: #2E7A5A;
  --feedback-warning-bg: #291A0F;
  --feedback-warning-text: #F2A765;
  --feedback-warning-border: #95591F;
  --feedback-error-bg: #2A1416;
  --feedback-error-text: #FF9A9A;
  --feedback-error-border: #B14A50;
  --feedback-info-bg: #121F29;
  --feedback-info-text: #8FBBD9;
  --feedback-info-border: #4C7B99;
  --module-instruction: #7FB6D6;
  --module-personnel: #4FBCB6;
  --module-hr: #93C489;
  --module-backoffice: #A3B1C2;
  --module-reports: #4E93C4;
  --module-settings: #9BA2AA;
  --tab-idle-text: #A4B1BE;
  --tab-active-text: #F4F8FC;
  --tab-active-bg: #20303D;
  --tab-active-indicator: #8FBBD9;
  --tab-hover-bg: #232E3A;
  --bg-primary: #141C24;
  --bg-secondary: #0E141A;
  /* Codex (OpenAI), 2026-10-13 — all neutral badges: background at 60% intensity; border, icon and text at 70%, approved by the user. */
  --badge-neutral-bg: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
  --badge-neutral-border: color-mix(in srgb, var(--border-default) 70%, transparent);
  --badge-neutral-text: color-mix(in srgb, var(--text-secondary) 70%, var(--bg-primary));
  --badge-neutral-icon: color-mix(in srgb, var(--text-secondary) 70%, var(--bg-primary));
  --bg-tertiary: #0A1015;
  --bg-hover: #232E3A;
  --accent-slate: #A3B1C2;
  --accent-cyan: #4FBCB6;
  --accent-purple: #A3B1C2;
  --accent-teal: #4E93C4;
  --status-green: #5FCB9C;
  --status-red: #FF9A9A;
  --status-amber: #F2A765;
  --catalog-yellow: #E8C547;
  --color-error: #FF9A9A;
  --color-success: #5FCB9C;
  --color-warning: #F2A765;
  --color-instruction: #7FB6D6;
  --color-personnel: #4FBCB6;
  --color-hr: #93C489;
  --color-backoffice: #A3B1C2;
  --color-reports: #4E93C4;
  --color-settings: #9BA2AA;
  --chart-series-1: #2970B2;
  --chart-series-2: #00AAA8;
  --chart-series-3: #288546;
  --chart-series-4: #399FCE;
  --chart-series-5: #6F9436;
  --chart-series-6: #8B97A4;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45),0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.50),0 2px 4px rgba(0,0,0,0.32);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.55),0 4px 8px rgba(0,0,0,0.35);
  --shadow-xl: 0 20px 32px rgba(0,0,0,0.60),0 8px 12px rgba(0,0,0,0.38);
}

/* ---- PDF: claro dentro do tema escuro ----
   Especificidade (0,2,1) vence html[data-theme="dark"] (0,1,1). */
html[data-theme="dark"] .pdf-page {
  --blue-900: #142B3B;
  --blue-700: #1C3A4F;
  --blue-500: #2F5D7C;
  --gray-0: #FFFFFF;
  --gray-100: #E4EAEF;
  --gray-300: #A9B5C0;
  --gray-500: #616E7A;
  --gray-900: #141C24;
  --bu-50: #EFF4F8;
  --bu-100: #DAE6EF;
  --bu-200: #C0D4E2;
  --bu-300: #9DB8CC;
  --bu-400: #6E90AB;
  --bu-500: #2F5D7C;
  --bu-600: #26506C;
  --bu-700: #1E4058;
  --bu-800: #183446;
  --bu-900: #132A39;
  --success-50: #EDF7F2;
  --success-100: #D6EDE2;
  --success-500: #1A6B4A;
  --success-700: #145639;
  --warning-50: #FDF2E8;
  --warning-100: #FAE2CC;
  --warning-500: #9A4A12;
  --warning-700: #7C3A0D;
  --error-50: #FDF0F0;
  --error-100: #FADEDE;
  --error-500: #B02127;
  --error-700: #8E191F;
  --info-50: #EFF4F8;
  --info-100: #DAE6EF;
  --info-500: #2F5D7C;
  --info-700: #254B65;
  --surface-default: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EDF1F5;
  --text-primary: #141C24;
  --text-secondary: #4C5966;
  --text-muted: #616E7A;
  --text-on-brand: #FFFFFF;
  --text-on-bu: #FFFFFF;
  --text-on-danger: #FFFFFF;
  --border-default: #DDE4EA;
  --border-strong: #87929E;
  --border-focus: #2F5D7C;
  --border-active: #2F5D7C;
  --interactive-default: #2F5D7C;
  --interactive-hover: #26506C;
  --interactive-active: #1E4058;
  --interactive-disabled: #B4BFC9;
  --feedback-success-bg: #EDF7F2;
  --feedback-success-text: #1A6B4A;
  --feedback-success-border: #38866A;
  --feedback-warning-bg: #FDF2E8;
  --feedback-warning-text: #9A4A12;
  --feedback-warning-border: #B4652B;
  --feedback-error-bg: #FDF0F0;
  --feedback-error-text: #B02127;
  --feedback-error-border: #C25158;
  --feedback-info-bg: #EFF4F8;
  --feedback-info-text: #2F5D7C;
  --feedback-info-border: #587F9C;
  --module-instruction: #1F5C7E;
  --module-personnel: #0F6E6A;
  --module-hr: #41703A;
  --module-backoffice: #5E6B7A;
  --module-reports: #2C6E9B;
  --module-settings: #6B7076;
  --tab-idle-text: #4C5966;
  --tab-active-text: #0F1720;
  --tab-active-bg: #E4EDF4;
  --tab-active-indicator: #2F5D7C;
  --tab-hover-bg: #E7EDF3;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F5F8;
  /* Codex (OpenAI), 2026-10-13 — all neutral badges: background at 60% intensity; border, icon and text at 70%, approved by the user. */
  --badge-neutral-bg: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
  --badge-neutral-border: color-mix(in srgb, var(--border-default) 70%, transparent);
  --badge-neutral-text: color-mix(in srgb, var(--text-secondary) 70%, var(--bg-primary));
  --badge-neutral-icon: color-mix(in srgb, var(--text-secondary) 70%, var(--bg-primary));
  --bg-tertiary: #EDF1F5;
  --bg-hover: #E7EDF3;
  --accent-slate: #5E6B7A;
  --accent-cyan: #0F6E6A;
  --accent-purple: #5E6B7A;
  --accent-teal: #2C6E9B;
  --status-green: #1A6B4A;
  --status-red: #B02127;
  --status-amber: #9A4A12;
  --catalog-yellow: #C9A227;
  --color-error: #B02127;
  --color-success: #1A6B4A;
  --color-warning: #9A4A12;
  --color-instruction: #1F5C7E;
  --color-personnel: #0F6E6A;
  --color-hr: #41703A;
  --color-backoffice: #5E6B7A;
  --color-reports: #2C6E9B;
  --color-settings: #6B7076;
  --chart-series-1: #00539A;
  --chart-series-2: #00A19D;
  --chart-series-3: #006D2C;
  --chart-series-4: #2895C2;
  --chart-series-5: #618720;
  --chart-series-6: #6C7A88;
  --shadow-xs: 0 1px 2px rgba(20,28,36,0.05);
  --shadow-sm: 0 1px 3px rgba(20,28,36,0.08),0 1px 2px rgba(20,28,36,0.04);
  --shadow-md: 0 4px 6px rgba(20,28,36,0.07),0 2px 4px rgba(20,28,36,0.04);
  --shadow-lg: 0 10px 15px rgba(20,28,36,0.08),0 4px 6px rgba(20,28,36,0.04);
  --shadow-xl: 0 20px 25px rgba(20,28,36,0.10),0 8px 10px rgba(20,28,36,0.04);
  color-scheme: light;
}

/* Informa ao navegador qual e a cor nativa de barra de rolagem, campo e menu. */
:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }