/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — fonte única de verdade para cor, tipografia, espaço,
   raio, sombra e movimento em todo o produto. Importado por base.html.

   ── Identidade Temple (manual de marca D³, setembro/2026) ───────────
   Desde 24/09/2026 os VALORES aqui são os da marca Temple: paleta
   preto / verdigris / pearl aqua / almond cream / platinum, Cabinet
   Grotesk, botões em cápsula, ícones de traço (icons.css). Os NOMES de
   variável foram preservados de propósito (--accent, --text-secondary,
   --border-color, --emerald…): trocar o valor aqui re-skina o produto
   inteiro sem tocar em cada template — foi assim que esta troca de
   marca coube numa passada só.

   White-label (só neste repo): Temple é o PADRÃO. Tenant que escolheu
   cor/logo/favicon próprios continua com eles — --tenant-accent entra
   por base.html e sobrepõe o acento e os derivados dele.

   Onde o manual e a WCAG discordam, a regra foi: manter o MATIZ da
   marca e mexer só na luminosidade até passar AA (4.5:1 texto, 3:1
   componente). Números medidos, não estimados:
     • Verdigris #00A89A como TEXTO sobre claro rende 2.53–2.97:1 —
       reprova. No tema claro, texto/ícone de destaque usa a sombra 40
       da própria paleta do manual (#00645C, 6.01:1 sobre platinum). No
       escuro o verdigris puro passa (5.55–6.20:1 sobre as superfícies).
     • Verdigris como FUNDO com texto branco em cima: 2.97:1 — reprova.
       Por isso o botão principal é o do manual — pearl aqua com texto
       PRETO (13.11:1) — e onde o acento vira fundo sólido o texto usa
       --on-accent, nunca #fff fixo.
     • As 5 cores funcionais do manual (sucesso #5F8F73, erro #B85C5C,
       atenção #B68A4C, informação #5F7F9A, neutro #8B8B8B) reprovam
       como texto sobre claro (3.02–4.30:1). Cada uma tem 3 variantes:
       texto no claro (mais escura), texto no escuro (mais clara) e
       -solid (fundo com texto branco) — todas ≥4.5:1.
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Paleta da marca — valores LITERAIS do manual, pra quem precisa
       da cor de identidade e não de um papel (logo, ramos do mapa,
       gradiente de fundo, e-mail). Nunca como texto sem conferir o
       contraste acima: quem precisa de papel usa os tokens semânticos
       (--accent, --text-*, --emerald…) dos blocos de tema. ─────── */
    --brand-black: #000000;       /* base escura — 50% de uso */
    --brand-verdigris: #00A89A;   /* cor principal — 20% */
    --brand-pearl: #A9D5CF;       /* secundária — 15% (botão principal). O manual
                                     também imprime #ADCFD1 (pág. 12 e mockups
                                     de botão); vale o da página oficial da
                                     cor (pág. 9), que é o dos arquivos de logo. */
    --brand-almond: #E0D0C0;      /* apoio — 10% (respiro, botão de apoio) */
    --brand-platinum: #ECEDEC;    /* base clara — 5% */

    /* Tints/shades da tabela do manual (págs. 14–18). Os de pearl são os
       estados do botão principal na pág. 29 — medidos no PDF: hover
       #CBE5E2, pressed #87AAA5. */
    --verdigris-700: #00645C;     /* shade 40 — texto de destaque no claro */
    --verdigris-800: #00433D;     /* shade 60 — hover de link no claro */
    --pearl-300: #CBE5E2;         /* tint 40 — hover do botão principal */
    --pearl-600: #87AAA5;         /* shade 20 — pressed do botão principal */
    --almond-200: #ECE2D9;        /* tint 40 — hover do botão de apoio */
    --almond-600: #B3A699;        /* shade 20 — pressed/borda do botão de apoio */
    --almond-800: #59534C;        /* shade 60 — texto sobre fundo almond (6.25:1) */

    /* ── Tipografia — Cabinet Grotesk única (manual pág. 25; a prévia de
       marca: "hierarquia usando apenas a própria família"). Servida por
       fonts.css (@font-face do arquivo variável), carregado ANTES deste
       arquivo.
         --font-sans     → Cabinet Grotesk (corpo — herdado por tudo)
         --font-title    → alias (h1–h6, cabeçalhos)
         --font-display  → alias (ênfase numérica: R$, KPIs)
         --font-accent   → alias (rótulos em maiúsculas, eyebrow)
       Os três aliases seguem existindo porque os call sites marcam a
       INTENÇÃO — se um dia a secundária do manual (PP Editorial Old,
       comercial) for licenciada, é aqui que ela entra, sem varrer
       template.

       A Cabinet Grotesk não tem algarismos tabulares (sem `tnum`,
       medido no arquivo: "1" tem 292 de avanço, "0" tem 636). As
       declarações `font-variant-numeric: tabular-nums` continuam no
       CSS — inofensivas agora, valem sozinhas se a família ganhar a
       feature. Colunas de valor alinham pela direita, não por dígito. */
    --font-sans: 'Cabinet Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: var(--font-sans);
    --font-title: var(--font-sans);
    --font-accent: var(--font-sans);

    /* ── Escala tipográfica — degraus do Dynamic Type da Apple (Large).
       Nomes PRESERVADOS (--text-xs .. --text-3xl são lidos em ~50
       lugares). --text-base 17px é o piso de leitura; --text-table
       (15px) é o degrau compacto de tabela/lista densa (decisão do
       usuário); --text-2xs (11px) é micro-rótulo raro. ───────────── */
    --text-2xs: .6875rem;  /* 11px — Caption 2, piso; raro */
    --text-xs: .75rem;     /* 12px — Caption 1: legenda, badge */
    --text-sm: .8125rem;   /* 13px — Footnote: texto secundário, cabeçalho de tabela */
    --text-table: .9375rem;/* 15px — Subhead: corpo de tabela/lista densa */
    --text-base: 1.0625rem;/* 17px — Body: corpo padrão do produto */
    --text-md: 1.0625rem;  /* 17px — inputs e ênfase (≥16px evita o zoom automático de campo no iOS Safari) */
    --text-lg: 1.25rem;    /* 20px — Title 3: título de card/seção */
    --text-xl: 1.375rem;   /* 22px — Title 2: título de página */
    --text-2xl: 1.75rem;   /* 28px — Title 1: valor de KPI grande */
    --text-3xl: 2.125rem;  /* 34px — Large Title */

    /* ── Peso — o arquivo variável entrega todos os degraus reais
       (inclusive o 600/SemiBold, que o pacote do Fontshare não traz
       como estático). ────────────────────────────────────────────── */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* ── Leading — três degraus. ───────────────────────────────────── */
    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-normal: 1.5;

    /* ── Tracking — a prévia de marca fixa "espaço entre letras 0%" pra
       família inteira (a Cabinet já vem espaçada pra display; o aperto
       óptico negativo que existia aqui era da escala Apple sobre a
       Gotham). Os nomes continuam pra não quebrar os consumidores. A
       única exceção é o rótulo pequeno em caixa-alta, onde um respiro
       mínimo evita as letras colarem abaixo de 13px. ──────────────── */
    --tracking-tight: 0;
    --tracking-snug: 0;
    --tracking-normal: 0;
    --tracking-caps: .04em;

    /* ── Espaço (múltiplos de 4px) ─────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* ── Raio — o manual põe CÁPSULA em botão/estado (formas
       "arredondadas, proporções consistentes") e cantos contidos em
       painel, linha e campo (~8–14px nas telas de referência, pág. 31).
       Por isso os degraus desceram em relação à escala Apple anterior
       (12/16/20) e --radius-full virou a forma do controle.
       Regra de concentricidade continua: raio_interno = raio_externo −
       padding. ──────────────────────────────────────────────────── */
    --radius-xs: 4px;    /* etiqueta inline, controle mínimo */
    --radius-sm: 6px;    /* chip, linha compacta */
    --radius-md: 10px;   /* input, item de lista, tile */
    --radius-lg: 14px;   /* card, modal, painel */
    --radius-xl: 18px;   /* sheet/painel grande */
    --radius-full: 999px;/* botão, pill de status, avatar */

    /* ── Alvo de toque — 44×44 (HIG), 32 nos controles compactos. ── */
    --tap-target-min: 44px;

    /* ── Sombra — discreta, nunca "cartão flutuando". O manual proíbe
       sombra no logo (pág. 5); aqui ela só separa camada. ─────────── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04);
    --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, .14), 0 4px 8px -4px rgba(0, 0, 0, .06);
    --shadow-xl: 0 24px 48px -10px rgba(0, 0, 0, .22), 0 8px 16px -6px rgba(0, 0, 0, .1);

    /* ── Breakpoints — documental (media query não lê var()) ───
       sm: 640px  ·  md: 1024px (sidebar vira drawer abaixo disso)  ·  lg: 1280px */

    /* ── Movimento ─────────────────────────────────────────────── */
    --dur-fast: .12s;
    --dur-base: .18s;
    --dur-slow: .3s;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* ── Z-index — escala única. --z-drawer > --z-backdrop de
       propósito: .sidebar e .sidebar-backdrop são IRMÃOS no DOM
       (pt-ui.js cria o backdrop em document.body). Com o backdrop
       numericamente maior, o scrim com blur pintava por cima do drawer
       inteiro e o menu ficava ilegível no celular (medido em 390px). */
    --z-sticky: 20;
    --z-dropdown: 30;
    --z-backdrop: 40;
    --z-drawer: 45;
    --z-modal: 50;
    --z-toast: 60;

    /* ── Fundos SÓLIDOS para texto branco em cima (botão, banner,
       badge cheio, toast de sucesso/erro). Matiz do manual, luminosidade
       ajustada até ≥4.5:1 contra branco — nunca dependem do tema. ── */
    --cyan-solid: #5A7892;     /* informação  — manual #5F7F9A (4.21 → 4.63) */
    --emerald-solid: #547E65;  /* sucesso     — manual #5F8F73 (3.71 → 4.62) */
    --amber-solid: #916E3B;    /* atenção     — manual #B68A4C (3.12 → 4.67) */
    --rose-solid: #B65858;     /* erro        — manual #B85C5C (4.45 → 4.64) */
    --gray-solid: #757575;     /* neutro      — manual #8B8B8B (3.41 → 4.61) */
    --accent-solid: #00645C;   /* verdigris shade 40 — 7.05:1 com branco */
    /* Superfície GRANDE preenchida com o acento e texto branco por cima
       (cabeçalho-herói de página). Não é o --accent: no escuro ele é o
       verdigris claro, feito pra ser TEXTO, e branco em cima reprova.
       Com white-label, a cor do tenant (contrato de antes). */
    --accent-fill: var(--tenant-accent, #00645C);

    /* ── Material Regular (vidro) — blur e saturação são a mesma física
       nos dois temas; só a COR do material varia (blocos abaixo). ── */
    --material-blur-thin: 12px;
    --material-blur: 20px;
    --material-blur-regular: var(--material-blur);
    --material-blur-thick: 32px;
    --material-saturate: 160%;
}

/* ══════════════════════════════════════════════════════════════════
   PRESETS DE ESCALA TIPOGRÁFICA — preferência do usuário, aplicada por
   `<html data-font-scale="...">` renderizado pelo SERVIDOR (sem flash
   de tamanho no primeiro paint). Cada preset é um degrau REAL do
   Dynamic Type (Small / Large / xLarge / xxLarge), não multiplicador:
   corpo e título crescem em taxas diferentes.

   "medio" não tem bloco: é o :root acima. Seletor SEM `:root` de
   propósito — mesma especificidade, vence por ordem, e funciona também
   num elemento ANINHADO (a amostra ao vivo em Configurações).
   `--space-*` são px FIXOS e não escalam. ───────────────────────── */
[data-font-scale="pequeno"] {
    --text-2xs: .6875rem;   /* 11px */
    --text-xs: .6875rem;    /* 11px */
    --text-sm: .75rem;      /* 12px */
    --text-table: .8125rem; /* 13px */
    --text-base: .9375rem;  /* 15px */
    --text-md: 1rem;        /* 16px — não 15: é o token dos inputs, e abaixo de 16px o iOS dá zoom ao focar */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.625rem;   /* 26px */
    --text-3xl: 2rem;       /* 32px */
}

[data-font-scale="grande"] {
    --text-2xs: .8125rem;    /* 13px */
    --text-xs: .875rem;      /* 14px */
    --text-sm: .9375rem;     /* 15px */
    --text-table: 1.0625rem; /* 17px */
    --text-base: 1.1875rem;  /* 19px */
    --text-md: 1.1875rem;    /* 19px */
    --text-lg: 1.375rem;     /* 22px */
    --text-xl: 1.5rem;       /* 24px */
    --text-2xl: 1.875rem;    /* 30px */
    --text-3xl: 2.25rem;     /* 36px */
}

[data-font-scale="muito-grande"] {
    --text-2xs: .9375rem;    /* 15px */
    --text-xs: 1rem;         /* 16px */
    --text-sm: 1.0625rem;    /* 17px */
    --text-table: 1.1875rem; /* 19px */
    --text-base: 1.3125rem;  /* 21px */
    --text-md: 1.3125rem;    /* 21px */
    --text-lg: 1.5rem;       /* 24px */
    --text-xl: 1.625rem;     /* 26px */
    --text-2xl: 2rem;        /* 32px */
    --text-3xl: 2.375rem;    /* 38px */
}

/* ══════════════════════════════════════════════════════════════════
   TEMA CLARO — "base clara" do manual. Página em platinum (#ECEDEC),
   superfície no tint 80 dela (#FBFBFB), recuo no tint 40 (#F3F4F3):
   três degraus da MESMA cor da marca em vez de cinzas soltos. Texto
   preto (a base escura como tinta), secundário/terciário como preto
   com alfa — assenta dentro da superfície e funciona sobre o vidro.

   Medido (WCAG): --text-secondary .62 → 6.17:1 sobre #FBFBFB e 5.88:1
   sobre #ECEDEC. --text-tertiary .42 → 3.01:1: decorativo por design,
   abaixo de AA de propósito (mesmo papel que já tinha antes).
   ══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
    --bg-primary: #ECEDEC;
    --bg-secondary: #FBFBFB;
    --bg-tertiary: #F3F4F3;

    --text-primary: #000000;
    --text-secondary: rgba(0, 0, 0, .62);
    --text-tertiary: rgba(0, 0, 0, .42);

    --border-color: rgba(0, 0, 0, .12);
    --border-strong: #BCBDBC;          /* platinum shade 20 */

    --card-shadow: 0 1px 2px 0 rgba(0, 0, 0, .04);
    --card-shadow-hover: 0 6px 16px -4px rgba(0, 0, 0, .10), 0 2px 4px -2px rgba(0, 0, 0, .05);

    /* Acento — texto/ícone/link/foco. Verdigris shade 40 (ver nota do
       topo: o verdigris puro reprova como texto no claro). --on-accent
       é a cor do texto QUANDO o acento vira fundo sólido. */
    /* White-label: sem cor escolhida pelo tenant, vale o acento Temple.
       Com cor, base.html injeta --tenant-accent e rederiva o resto (botão
       principal, item ativo, fundo) — ver o bloco `portal_cor_primaria`. */
    --accent: var(--tenant-accent, #00645C);
    --accent-hover: #00433D;
    --accent-light: rgba(0, 168, 154, .12);
    --accent-ring: rgba(0, 168, 154, .30);
    --on-accent: #FFFFFF;
    --focus-ring: #00645C;             /* 6.82:1 sobre a superfície */

    /* Estados — texto sobre o tint deles mesmos ≥4.6:1 */
    --emerald: #4B705A;
    --emerald-light: rgba(95, 143, 115, .14);
    --amber: #836335;
    --amber-light: rgba(182, 138, 76, .16);
    --rose: #A74949;
    --rose-light: rgba(184, 92, 92, .12);
    --cyan: #4F6A81;
    --cyan-light: rgba(95, 127, 154, .14);

    /* Apoio (almond) — "respiro visual" do manual */
    --support: var(--brand-almond);
    --support-light: rgba(224, 208, 192, .45);
    --support-ink: var(--almond-800);

    /* ── Botão principal — pearl aqua + texto preto (manual págs. 28–29).
       No claro o manual pede BORDA verdigris: "só a cor, o botão some
       no fundo" (pearl sobre platinum mede 1.37:1). A terceira variante
       da pág. 28 (teal médio com texto platinum) NÃO foi adotada: mede
       2.48:1 e reprova AA. ────────────────────────────────────────── */
    --btn-primary-bg: var(--brand-pearl);
    --btn-primary-text: #000000;
    --btn-primary-border: var(--brand-verdigris);
    --btn-primary-hover-bg: var(--pearl-300);
    --btn-primary-active-bg: var(--pearl-600);
    /* Botão de apoio (almond) — mesma regra da borda no fundo claro */
    --btn-support-border: var(--almond-600);
    /* Desabilitado — o manual só especifica no escuro (#333/#666);
       aqui é o mesmo par na escala da base clara. */
    --btn-disabled-bg: #DCDDDC;
    --btn-disabled-text: rgba(0, 0, 0, .38);
    /* Botão de contraste (.btn-dark) — preto no claro, platinum no escuro */
    --btn-contrast-bg: #000000;
    --btn-contrast-text: var(--brand-platinum);

    /* ── Material Regular — superfície clara translúcida ───────────── */
    --material-bg: rgba(251, 251, 251, .72);
    --material-bg-solid: #FBFBFB;
    --material-border: rgba(0, 0, 0, .08);
    --material-highlight: rgba(255, 255, 255, .85);
    --material-shadow-over-plain: var(--shadow-sm);
    --material-shadow-over-content: var(--shadow-lg);

    /* ── Fundo ambiente (body::before) — manchas das cores da marca,
       não do acento de texto: no claro o acento é o shade 40, escuro
       demais pra luz ambiente. ──────────────────────────────────── */
    --mesh-1: rgba(0, 168, 154, .10);
    --mesh-2: rgba(169, 213, 207, .45);
    --mesh-3: rgba(224, 208, 192, .40);

    /* ── Sidebar — item ativo é a cápsula pearl do botão principal
       (forma + preenchimento marcam o estado, não só a cor). ─────── */
    --sidebar-text: var(--text-primary);
    --sidebar-text-hover: var(--text-primary);
    --sidebar-text-active: #000000;
    --sidebar-label: var(--text-secondary);
    --sidebar-separator: var(--border-color);
    --sidebar-hover-bg: rgba(0, 0, 0, .05);
    --sidebar-active-bg: var(--brand-pearl);
    --sidebar-active-border: var(--brand-verdigris);
}

/* ══════════════════════════════════════════════════════════════════
   TEMA ESCURO — o território nativo da marca ("base escura 50%",
   "priorizamos degradês mais escuros"). Fundo preto puro, superfícies
   nos tints 8%/12% do preto. Texto primário branco; secundário e
   terciário são o platinum da marca com alfa (o manual reserva a base
   clara pra "textos secundários, legendas").

   Medido: --text-secondary .60 → 6.23:1 sobre #141414, 6.41:1 sobre o
   preto. Verdigris como acento: 6.20:1 sobre #141414, 5.16:1 sobre o
   próprio tint.
   ══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #141414;
    --bg-tertiary: #1F1F1F;

    --text-primary: #FFFFFF;
    --text-secondary: rgba(236, 237, 236, .60);
    --text-tertiary: rgba(236, 237, 236, .40);

    --border-color: rgba(236, 237, 236, .13);
    --border-strong: #333333;

    --card-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    --card-shadow-hover: 0 10px 25px rgba(0, 0, 0, .7);

    --accent: var(--tenant-accent-dark, var(--brand-verdigris));
    --accent-hover: #33B9AE;           /* verdigris tint 20 */
    --accent-light: rgba(0, 168, 154, .14);
    --accent-ring: rgba(0, 168, 154, .35);
    --on-accent: #000000;              /* 7.07:1 sobre o verdigris */
    --focus-ring: var(--brand-platinum);

    --emerald: #669A7C;
    --emerald-light: rgba(95, 143, 115, .16);
    --amber: #B68A4C;
    --amber-light: rgba(182, 138, 76, .16);
    --rose: #C47777;
    --rose-light: rgba(184, 92, 92, .16);
    --cyan: #7491A9;
    --cyan-light: rgba(95, 127, 154, .16);

    --support: var(--brand-almond);
    --support-light: rgba(224, 208, 192, .14);
    --support-ink: var(--brand-almond);

    --btn-primary-bg: var(--brand-pearl);
    --btn-primary-text: #000000;
    --btn-primary-border: var(--brand-pearl);
    --btn-primary-hover-bg: var(--pearl-300);
    --btn-primary-active-bg: var(--pearl-600);
    --btn-support-border: var(--brand-almond);
    --btn-disabled-bg: #333333;        /* manual, pág. 29 */
    --btn-disabled-text: #666666;
    --btn-contrast-bg: var(--brand-platinum);
    --btn-contrast-text: #000000;

    --material-bg: rgba(20, 20, 20, .72);
    --material-bg-solid: var(--bg-secondary);
    --material-border: rgba(236, 237, 236, .10);
    --material-highlight: rgba(255, 255, 255, .08);
    --material-shadow-over-plain: var(--shadow-sm);
    --material-shadow-over-content: var(--shadow-lg);

    --mesh-1: rgba(0, 168, 154, .22);
    --mesh-2: rgba(0, 100, 92, .20);
    --mesh-3: rgba(169, 213, 207, .07);

    --sidebar-text: var(--text-secondary);
    --sidebar-text-hover: var(--text-primary);
    --sidebar-text-active: #000000;
    --sidebar-label: var(--text-secondary);
    --sidebar-separator: var(--border-color);
    --sidebar-hover-bg: rgba(255, 255, 255, .06);
    --sidebar-active-bg: var(--brand-pearl);
    --sidebar-active-border: var(--brand-pearl);
}

/* ══════════════════════════════════════════════════════════════════
   PONTE COM O BOOTSTRAP 5.3 — os templates usam ~400 utilitários de cor
   dele (.text-primary 86×, .bg-secondary 57×, .btn-dark 25×…), que sem
   isto saem no azul/verde/cinza padrão do Bootstrap, fora da paleta.
   Os utilitários `.bg-*`, `.border-*` e `.text-*` leem `--bs-*-rgb`
   (tripla r,g,b — var() não converte hex, por isso os números estão
   escritos por extenso). O valor aqui é o -SOLID (fundo com texto
   branco, que é como `.bg-*` é usado: badge, card cheio, barra de
   progresso). As cores de TEXTO por tema (`.text-primary` etc.) são
   religadas aos tokens semânticos em design-system.css — um valor só
   não serve aos dois papéis (medido: texto no escuro exige luminância
   que reprova com branco em cima). ──────────────────────────────── */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --bs-font-sans-serif: var(--font-sans);
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--bg-secondary);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-tertiary);
    --bs-secondary-bg: var(--bg-tertiary);
    --bs-tertiary-bg: var(--bg-tertiary);
    --bs-border-color: var(--border-color);
    --bs-border-color-translucent: var(--border-color);
    --bs-heading-color: var(--text-primary);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-hover);
    --bs-code-color: var(--accent);
    --bs-highlight-bg: var(--support-light);
    --bs-focus-ring-color: var(--accent-ring);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-xl);
    --bs-border-radius-pill: var(--radius-full);

    --bs-primary-rgb: 0, 100, 92;       /* #00645C */
    --bs-secondary-rgb: 94, 94, 94;     /* #5E5E5E — platinum shade 60 */
    --bs-success-rgb: 84, 126, 101;     /* #547E65 */
    --bs-danger-rgb: 182, 88, 88;       /* #B65858 */
    --bs-warning-rgb: 145, 110, 59;     /* #916E3B */
    --bs-info-rgb: 90, 120, 146;        /* #5A7892 */
    --bs-dark-rgb: 0, 0, 0;
    --bs-black-rgb: 0, 0, 0;

    --bs-form-valid-color: var(--emerald);
    --bs-form-valid-border-color: var(--emerald);
    --bs-form-invalid-color: var(--rose);
    --bs-form-invalid-border-color: var(--rose);
}

[data-theme="light"],
:root {
    --bs-light-rgb: 243, 244, 243;      /* #F3F4F3 — platinum tint 40 */
    --bs-link-color-rgb: 0, 100, 92;
    --bs-link-hover-color-rgb: 0, 67, 61;
}

[data-theme="dark"] {
    --bs-light-rgb: 31, 31, 31;         /* #1F1F1F — .bg-light vira recuo escuro */
    --bs-link-color-rgb: 0, 168, 154;
    --bs-link-hover-color-rgb: 51, 185, 174;
}

/* Respeita a preferência do sistema por menos movimento. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}