/*
 * Tokens do design system (direção A "Campo" com a identidade Robotec, D-040; .claude/DESIGN.md). Duas camadas:
 *   1. Primitivos: a paleta de origem do RobotecCenter (--robotec-*, hex exatos) e os tons derivados dela para passar
 *      o contraste (mesmo matiz, medidos pela WCAG 2.2). Só esta folha usa primitivos.
 *   2. Semânticos: o que os componentes usam (--bg, --sf, --el, --bd, --bf, --tx, --tx2, --pr, --pr-fundo, --prc, --ac,
 *      --ok, --wa, --er, --selo-nv-*, --selo-v-*), os tons por tema (--tint, --pr-tonal, --ac-tonal) e os derivados.
 *      --pr é a primária como texto, ícone, borda e foco; --pr-fundo é o preenchimento (o ciano da marca, sempre com
 *      --prc, texto escuro, por cima). No escuro as duas são o ciano puro; no claro o ciano puro não passa como texto
 *      (1,9:1 sobre o cartão), então --pr é o ciano escuro derivado.
 * Tema: data-tema="claro|escuro|sistema" no <html> (App.razor lê o cookie rs-tema). "sistema" (ou sem atributo)
 * segue prefers-color-scheme. Nada de script inline: a troca manual grava o cookie e muda o atributo por módulo JS.
 * As variáveis --bs-* do Bootstrap ficam mapeadas para os semânticos até o Bootstrap sair (transição).
 */

/* ---------- Fontes self-hosted (IBM Plex, SIL OFL 1.1: fonts/OFL-IBM-Plex.txt). Subconjuntos oficiais da IBM:
   Latin1 = latin e Latin2 = latin-ext. A ordem importa: nas faixas sobrepostas vale a última declarada (Latin1). */
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Regular-Latin2.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Medium-Latin2.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-SemiBold-Latin2.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IBMPlexMono-Regular-Latin2.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

/* ---------- 1. Primitivos (não use fora desta folha) ---------- */
:root {
    /* Paleta de origem: RobotecCenter (Styles/app.css, PaletaDeGraficos.cs e o MudTheme do MainLayout), hex exatos. */
    --robotec-ciano: #2CCCD3;
    --robotec-grafite: #333333;
    --robotec-cinza: #9AA0A6;
    --robotec-neutra: #9E9E9E;
    --robotec-fundo: #CCDCDC;
    --robotec-superficie: #E7E7E7;
    --robotec-cartao: #FAFAFA;
    --robotec-terciaria: #555555;
    --robotec-alta: #0DBB0A;
    --robotec-baixa: #FF0000;
    --robotec-detrator: #D93B2B;
    --robotec-alerta: #FF7E23;
    --robotec-info: #5A5283;

    /* Derivados para o tema claro (mesmo matiz da origem, luminosidade ajustada até passar o contraste). */
    --nevoa-100: #E1EAEA;      /* #CCDCDC clareado (matiz 180°, saturação 18,6%): fundo de leitura longa */
    --nevoa-300: #BCCBCB;      /* borda decorativa (divisórias, cartões) */
    --cinza-600: #737A82;      /* matiz do #9AA0A6: borda de controle (≥ 3:1 nos dois temas) */
    --cinza-700: #585E64;      /* matiz do #9AA0A6: texto secundário no claro (≥ 4,5:1 até sobre o #CCDCDC) */
    --ciano-800: #156265;      /* matiz do #2CCCD3: texto, ícone, borda e foco em ciano sobre claro */
    --verde-100: #D4F0D4;
    --verde-600: #2E9A2B;
    --verde-800: #076D06;      /* matiz do #0DBB0A (≥ 4,5:1 até sobre o #CCDCDC) */
    --verde-900: #065705;
    --laranja-100: #FBE1CF;
    --laranja-500: #D9691F;
    --laranja-800: #9D4100;    /* matiz do #FF7E23 (≥ 4,5:1 até sobre o #CCDCDC) */
    --laranja-900: #7A3300;
    --vermelho-700: #AF2C1F;   /* matiz do #D93B2B (≥ 4,5:1 até sobre o #CCDCDC) */

    /* Derivados para o tema escuro: base quase preta como o fundo do logo, camadas pouco elevadas. */
    --noite-950: #0C1112;
    --noite-900: #151B1C;
    --noite-800: #1F2729;
    --noite-700: #2F393B;
    --gelo-50: #EDEEEC;        /* quase branco neutro: sem halo de branco puro sobre quase preto */
    --cinza-200: #C9CDD0;      /* matiz do #9AA0A6, claro: o acento (Ensinar) no escuro, o par invertido da terciária */
    --verde-200: #7FE07C;
    --verde-950: #143519;
    --laranja-200: #FFB480;
    --laranja-600: #B85F1F;
    --laranja-950: #3F2D1D;
    --vermelho-300: #FF6252;   /* matiz do #D93B2B */

    /* Tipografia (escala da direção A: 13/18, 15/22, 17/26, 20/28, 24/32). */
    --fonte-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --texto-legenda: 0.8125rem;
    --linha-legenda: 1.125rem;
    --texto-apoio: 0.9375rem;
    --linha-apoio: 1.375rem;
    --texto-corpo: 1.0625rem;
    --linha-corpo: 1.625rem;
    --texto-titulo: 1.25rem;
    --linha-titulo: 1.75rem;
    --texto-tela: 1.5rem;
    --linha-tela: 2rem;
    --peso-normal: 400;
    --peso-medio: 500;
    --peso-forte: 600;

    /* Forma: raios 8 (selo), 16 (cartão), 28 (composer) e pílula. Sem sombra. */
    --raio-selo: 0.5rem;
    --raio-campo: 0.75rem;
    --raio-cartao: 1rem;
    --raio-composer: 1.75rem;
    --raio-pilula: 999px;

    /* Espaçamento em base 4. */
    --esp-1: 0.25rem;
    --esp-2: 0.5rem;
    --esp-3: 0.75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;

    /* Alvos de toque: 48 (padrão), 56 (primário grande), 52 (microfone), 44 (secundário dentro de cartão). */
    --alvo: 3rem;
    --alvo-grande: 3.5rem;
    --alvo-mic: 3.25rem;
    --alvo-compacto: 2.75rem;

    /* Layout. */
    --largura-gaveta: 18.5rem;
    --largura-conteudo: 48rem;
    --altura-topo: 3.5rem;
    --duracao-rapida: 120ms;
    --duracao-media: 200ms;
}

/* ---------- 2. Semânticos: tema claro (padrão) ---------- */
:root {
    color-scheme: light;
    --bg: var(--nevoa-100);
    --sf: var(--robotec-cartao);
    --el: var(--robotec-fundo);
    --bd: var(--nevoa-300);
    --bf: var(--cinza-600);
    --tx: var(--robotec-grafite);
    --tx2: var(--cinza-700);
    --pr: var(--ciano-800);
    --pr-fundo: var(--robotec-ciano);
    --prc: var(--noite-950);
    --ac: var(--robotec-terciaria);
    --acc: var(--robotec-cartao);
    --ok: var(--verde-800);
    --wa: var(--laranja-800);
    --er: var(--vermelho-700);
    --erc: var(--robotec-cartao);
    --selo-nv-fundo: var(--laranja-100);
    --selo-nv-texto: var(--laranja-900);
    --selo-nv-borda: var(--laranja-500);
    --selo-v-fundo: var(--verde-100);
    --selo-v-texto: var(--verde-900);
    --selo-v-borda: var(--verde-600);
    /* Marca: arco de baixo do símbolo e do "O" do logotipo (ciano nos dois temas); o resto é a cor do texto. */
    --marca-arco: var(--robotec-ciano);
    /* Login: foto do RobotecCenter no desktop claro; halo do símbolo no escuro. */
    --conta-foto: url("/images/marca/fundo-login-claro.webp");
    --conta-halo: none;
    --conta-alinhamento: flex-start;
    /* Tons (containers tonais, Material 3): a cor sobre a superfície, sem sombra. A proporção é por tema: no escuro o
       ciano puro clareia demais a superfície, e o texto secundário e o erro por cima caem abaixo de 4,5:1. */
    --tint: color-mix(in srgb, var(--pr-fundo) 18%, var(--sf));
    --pr-tonal: color-mix(in srgb, var(--pr-fundo) 24%, var(--sf));
    --ac-tonal: color-mix(in srgb, var(--ac) 12%, var(--sf));

    /* Triplas RGB (para rgba() do Bootstrap e sobreposições). */
    --tx-rgb: 51, 51, 51;
    --tx2-rgb: 88, 94, 100;
    --bg-rgb: 225, 234, 234;
    --sf-rgb: 250, 250, 250;
    --el-rgb: 204, 220, 220;
    --pr-rgb: 21, 98, 101;
    --pr-fundo-rgb: 44, 204, 211;
    --ac-rgb: 85, 85, 85;
    --ok-rgb: 7, 109, 6;
    --wa-rgb: 157, 65, 0;
    --er-rgb: 175, 44, 31;
}

/* ---------- Tema escuro: escolha manual ---------- */
:root[data-tema="escuro"] {
    color-scheme: dark;
    --bg: var(--noite-950);
    --sf: var(--noite-900);
    --el: var(--noite-800);
    --bd: var(--noite-700);
    --bf: var(--cinza-600);
    --tx: var(--gelo-50);
    --tx2: var(--robotec-cinza);
    --pr: var(--robotec-ciano);
    --pr-fundo: var(--robotec-ciano);
    --prc: var(--noite-950);
    --ac: var(--cinza-200);
    --acc: var(--noite-950);
    --ok: var(--robotec-alta);
    --wa: var(--robotec-alerta);
    --er: var(--vermelho-300);
    --erc: var(--noite-950);
    --selo-nv-fundo: var(--laranja-950);
    --selo-nv-texto: var(--laranja-200);
    --selo-nv-borda: var(--laranja-600);
    --selo-v-fundo: var(--verde-950);
    --selo-v-texto: var(--verde-200);
    --selo-v-borda: var(--verde-600);
    --marca-arco: var(--robotec-ciano);
        --conta-foto: none;
    --conta-halo: url("/images/marca/simbolo-halo-escuro.svg");
    --conta-alinhamento: center;
    --tint: color-mix(in srgb, var(--pr-fundo) 10%, var(--sf));
    --pr-tonal: color-mix(in srgb, var(--pr-fundo) 14%, var(--sf));
    --ac-tonal: color-mix(in srgb, var(--ac) 10%, var(--sf));
    --tx-rgb: 237, 238, 236;
    --tx2-rgb: 154, 160, 166;
    --bg-rgb: 12, 17, 18;
    --sf-rgb: 21, 27, 28;
    --el-rgb: 31, 39, 41;
    --pr-rgb: 44, 204, 211;
    --pr-fundo-rgb: 44, 204, 211;
    --ac-rgb: 201, 205, 208;
    --ok-rgb: 13, 187, 10;
    --wa-rgb: 255, 126, 35;
    --er-rgb: 255, 98, 82;
}

/* ---------- Tema escuro: "sistema" (ou sem atributo) com o sistema escuro. Mesmos valores do bloco acima. ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]):not([data-tema="escuro"]) {
        color-scheme: dark;
        --bg: var(--noite-950);
        --sf: var(--noite-900);
        --el: var(--noite-800);
        --bd: var(--noite-700);
        --bf: var(--cinza-600);
        --tx: var(--gelo-50);
        --tx2: var(--robotec-cinza);
        --pr: var(--robotec-ciano);
        --pr-fundo: var(--robotec-ciano);
        --prc: var(--noite-950);
        --ac: var(--cinza-200);
        --acc: var(--noite-950);
        --ok: var(--robotec-alta);
        --wa: var(--robotec-alerta);
        --er: var(--vermelho-300);
        --erc: var(--noite-950);
        --selo-nv-fundo: var(--laranja-950);
        --selo-nv-texto: var(--laranja-200);
        --selo-nv-borda: var(--laranja-600);
        --selo-v-fundo: var(--verde-950);
        --selo-v-texto: var(--verde-200);
        --selo-v-borda: var(--verde-600);
        --marca-arco: var(--robotec-ciano);
                --conta-foto: none;
        --conta-halo: url("/images/marca/simbolo-halo-escuro.svg");
        --conta-alinhamento: center;
        --tint: color-mix(in srgb, var(--pr-fundo) 10%, var(--sf));
        --pr-tonal: color-mix(in srgb, var(--pr-fundo) 14%, var(--sf));
        --ac-tonal: color-mix(in srgb, var(--ac) 10%, var(--sf));
        --tx-rgb: 237, 238, 236;
        --tx2-rgb: 154, 160, 166;
        --bg-rgb: 12, 17, 18;
        --sf-rgb: 21, 27, 28;
        --el-rgb: 31, 39, 41;
        --pr-rgb: 44, 204, 211;
        --pr-fundo-rgb: 44, 204, 211;
        --ac-rgb: 201, 205, 208;
        --ok-rgb: 13, 187, 10;
        --wa-rgb: 255, 126, 35;
        --er-rgb: 255, 98, 82;
    }
}

/* ---------- Derivados (valem nos dois temas porque partem dos semânticos) ---------- */
:root {
    /* Tons de erro e sucesso (os da primária e do acento são por tema, nos blocos acima). */
    --er-tonal: color-mix(in srgb, var(--er) 12%, var(--sf));
    --ok-tonal: color-mix(in srgb, var(--ok) 12%, var(--sf));
    /* Estados de interação (sobreposição do texto, como no M3). */
    --sobre-hover: rgba(var(--tx-rgb), 0.06);
    --sobre-pressionado: rgba(var(--tx-rgb), 0.12);
    --veu: rgba(0, 0, 0, 0.45);
    /* Foco: anel de 3 px na primária (ciano escuro no claro, ciano puro no escuro: ≥ 3:1 nos dois), com um respiro
       da cor da superfície. */
    --foco-largura: 3px;
    --foco-anel: 0 0 0 2px var(--sf), 0 0 0 calc(2px + var(--foco-largura)) var(--pr);
    /* Item ativo de navegação (gaveta, abas do admin): o tom --pr-tonal sozinho não chega a 3:1 contra o fundo, então
       o estado também ganha uma barra de 3 px na primária (≥ 3:1 nos dois temas), desenhada no fundo e não no
       box-shadow (que é do foco). Uso: background: var(--indicador-ativo), var(--pr-tonal). */
    --indicador-ativo: linear-gradient(var(--pr), var(--pr)) no-repeat 0.25rem center / 0.1875rem 60%;
    /* Marca do checkbox marcado: quase preta sobre o ciano da marca (--pr-fundo), nos dois temas. */
    --check-imagem: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230c1112' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");

    /* ---------- Mapeamento do Bootstrap 5.3 (transição: as telas antigas herdam o tema) ---------- */
    --bs-body-font-family: var(--fonte-sans);
    --bs-font-sans-serif: var(--fonte-sans);
    --bs-font-monospace: var(--fonte-mono);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--tx);
    --bs-body-color-rgb: var(--tx-rgb);
    --bs-body-bg: var(--bg);
    --bs-body-bg-rgb: var(--bg-rgb);
    --bs-emphasis-color: var(--tx);
    --bs-emphasis-color-rgb: var(--tx-rgb);
    --bs-secondary-color: var(--tx2);
    --bs-secondary-color-rgb: var(--tx2-rgb);
    --bs-secondary-bg: var(--el);
    --bs-secondary-bg-rgb: var(--el-rgb);
    --bs-tertiary-color: var(--tx2);
    --bs-tertiary-bg: var(--el);
    --bs-tertiary-bg-rgb: var(--el-rgb);
    --bs-heading-color: var(--tx);
    --bs-link-color: var(--pr);
    --bs-link-color-rgb: var(--pr-rgb);
    --bs-link-hover-color: var(--pr);
    --bs-link-hover-color-rgb: var(--pr-rgb);
    --bs-code-color: var(--tx);
    --bs-highlight-color: var(--tx);
    --bs-highlight-bg: var(--selo-nv-fundo);
    --bs-border-color: var(--bd);
    --bs-border-color-translucent: var(--bd);
    --bs-border-radius: var(--raio-selo);
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: var(--raio-campo);
    --bs-border-radius-xl: var(--raio-cartao);
    --bs-border-radius-pill: var(--raio-pilula);
    --bs-focus-ring-color: rgba(var(--pr-rgb), 0.35);
    --bs-form-valid-color: var(--ok);
    --bs-form-valid-border-color: var(--ok);
    --bs-form-invalid-color: var(--er);
    --bs-form-invalid-border-color: var(--er);

    --bs-primary: var(--pr);
    --bs-primary-rgb: var(--pr-rgb);
    --bs-secondary: var(--tx2);
    --bs-secondary-rgb: var(--tx2-rgb);
    --bs-success: var(--ok);
    --bs-success-rgb: var(--ok-rgb);
    --bs-info: var(--ac);
    --bs-info-rgb: var(--ac-rgb);
    --bs-warning: var(--wa);
    --bs-warning-rgb: var(--wa-rgb);
    --bs-danger: var(--er);
    --bs-danger-rgb: var(--er-rgb);
    --bs-light: var(--el);
    --bs-light-rgb: var(--el-rgb);
    --bs-dark: var(--tx);
    --bs-dark-rgb: var(--tx-rgb);

    --bs-primary-text-emphasis: var(--pr);
    --bs-primary-bg-subtle: var(--pr-tonal);
    --bs-primary-border-subtle: color-mix(in srgb, var(--pr) 40%, var(--sf));
    --bs-secondary-text-emphasis: var(--tx);
    --bs-secondary-bg-subtle: var(--el);
    --bs-secondary-border-subtle: var(--bd);
    --bs-success-text-emphasis: var(--selo-v-texto);
    --bs-success-bg-subtle: var(--selo-v-fundo);
    --bs-success-border-subtle: var(--selo-v-borda);
    --bs-info-text-emphasis: var(--tx);
    --bs-info-bg-subtle: var(--ac-tonal);
    --bs-info-border-subtle: color-mix(in srgb, var(--ac) 40%, var(--sf));
    --bs-warning-text-emphasis: var(--selo-nv-texto);
    --bs-warning-bg-subtle: var(--selo-nv-fundo);
    --bs-warning-border-subtle: var(--selo-nv-borda);
    --bs-danger-text-emphasis: var(--er);
    --bs-danger-bg-subtle: var(--er-tonal);
    --bs-danger-border-subtle: color-mix(in srgb, var(--er) 45%, var(--sf));
    --bs-light-text-emphasis: var(--tx);
    --bs-light-bg-subtle: var(--el);
    --bs-light-border-subtle: var(--bd);
    --bs-dark-text-emphasis: var(--tx);
    --bs-dark-bg-subtle: var(--el);
    --bs-dark-border-subtle: var(--bd);
}