/* ==========================================================================
   Spectrahsci — tema visual (cores, fontes, tamanhos, cantos, espaços)

   Este arquivo é o guia do visual do site inteiro. Nenhuma página escreve
   cor, fonte ou medida própria: todas usam as variáveis daqui (skill
   `spectrahsci-theme`). Carregado ANTES de qualquer outro CSS em toda página.

   COMO TROCAR...
   - a cor principal da marca:  --pal-teal-500 (e --pal-teal-300, a do hover)
   - a cor de fundo:            --pal-navy-900 (página), -800 (cartões), -700
   - a fonte do site:           --font-ui  (e --font-mono, a dos números)
   - a cor dos documentos:      --doc-brand, --doc-heading (PDF e Excel)
   Depois de mudar, suba o ?v= do theme.css em todas as páginas
   (tests/test_theme.py confere que todas usam o mesmo).

   AS CAMADAS (de cima para baixo):
   1. Perfil: os valores de verdade (paleta + fontes). É aqui que se mexe.
      Variáveis --pal-* nunca são usadas fora deste arquivo.
   2. Papéis: o que as páginas usam (--bg-page, --text, --brand, --danger...).
      Cada uma aponta para o perfil.
   3. Escalas: tamanho de fonte, peso, canto, espaço, camadas.
   4. Componentes: botões, foco, estado ativo, cabeçalho.
   5. Gráficos: moldura e cores das séries.
   6. Documentos (PDF, Excel): fundo branco, grupo --doc-*.
   7. Nomes antigos (--navy, --teal...) e a paleta legada (--legacy-*).
   8. Cores de domínio (estados da draga).
   9. Modo claro dos relatórios de campo (.theme-light).

   PERFIS: um perfil é só o bloco 1 com outros valores, num seletor
   :root[data-theme="<id>"] logo abaixo do padrão, com a linha
   "@profile <id> "<Nome>" "<Descrição>"" no comentário (bloco 1b).
   Plano: Spectrahsci_Cortex/08_Planos_Prompts/Plano_Tema_Visual.md
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Fontes servidas pelo site (static/vendor/fonts, licença SIL OFL).
   Inter na interface, JetBrains Mono nos números. Fonte nova entra aqui,
   nunca do Google Fonts (a CSP só aceita fonte do próprio site).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/static/vendor/fonts/inter-5.1.0-latin-wght.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/static/vendor/fonts/inter-5.1.0-latin-ext-wght.woff2') format('woff2-variations');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/static/vendor/fonts/jetbrains-mono-5.1.0-latin-wght.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   1. Perfil padrão
   @profile spectrah "Spectrah" "Navy and teal, the brand colors"
   -------------------------------------------------------------------------- */
:root {
  /* Fundos e bordas (navy) */
  --pal-navy-900: #0d1b2e;   /* fundo da página */
  --pal-navy-800: #112240;   /* cartões, caixas */
  --pal-navy-700: #1a3358;   /* caixa sobre cartão, lista aberta */
  --pal-navy-600: #1e3a58;   /* bordas */

  /* Marca */
  --pal-teal-500: #00b4c8;   /* cor principal da marca */
  --pal-teal-300: #4dd9e8;   /* teal claro: hover, títulos de ferramenta */
  --pal-teal-400: #1ec8da;   /* teal vivo: hover do botão secundário, logotipos */
  --pal-teal-600: #00a0b2;   /* teal apertado (botão pressionado) */
  --pal-sky-400: #4fc3f7;    /* acento: botão primário, foco, links */
  --pal-silver-300: #c8d0d8; /* prata da marca */

  /* Texto */
  --pal-ice-100: #e0eaf4;    /* texto */
  --pal-steel-400: #7a9ab8;  /* texto secundário */
  --pal-steel-500: #7896b4;  /* tom neutro de selo ("em breve") */
  --pal-white: #ffffff;
  --pal-black: #000000;
  --pal-ink-950: #050a10;    /* fundo atrás de janela (modal) */
  --pal-ink-975: #030a14;

  /* Situação */
  --pal-red-400: #e06c75;    /* erro, ação destrutiva */
  --pal-red-200: #ff8a80;    /* erro em texto pequeno sobre fundo escuro */
  --pal-amber-400: #e3b341;  /* aviso */
  --pal-amber-600: #d29922;  /* aviso forte */
  --pal-orange-400: #f0883e; /* atenção: entre aviso e erro */
  --pal-orange-500: #d18a2a; /* atenção apagada (valor interpolado) */
  --pal-amber-300: #e0a45c;  /* aviso de campo e "trabalhando" (GeoPack) */
  --pal-amber-200: #e5c07b;  /* aviso suave */
  --pal-gold-400: #f0b429;   /* dica que chama atenção */
  --pal-orange-300: #ff9800; /* preparando (ponto que pisca) */
  --pal-green-300: #7ed957;  /* confirmar (Apply verde) */
  --pal-green-200: #98c379;  /* valor positivo */
  --pal-gray-500: #6e7c8c;   /* situação: esperando */
  --pal-gray-600: #4a5a6a;   /* situação: sem dado */
  --pal-ink-800: #17212e;    /* texto escuro sobre fundo claro de aviso */
  --pal-green-400: #3fb950;  /* sucesso */

  /* Fontes (a lista inteira: a primeira que o aparelho tiver vence) */
  --font-ui: 'Inter Variable', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono Variable', ui-monospace, Consolas, monospace;
  --font-doc: Arial, Helvetica, sans-serif;  /* PDF e Excel */
  --font-serif: Georgia, serif;              /* glifos dos botões B/I/U */
}


/* --------------------------------------------------------------------------
   1b. Os outros perfis, que cada pessoa escolhe em /account (Appearance;
   decisão do Henrique, 2026-11-02: todos ficam à escolha). Cada perfil troca
   a paleta e, quando precisa, um ou outro papel que a paleta sozinha não
   resolve (fundo claro pede texto forte escuro, as janelas de módulo têm
   tons próprios). Os perfis de fundo claro entram também no seletor do
   bloco "claro", que traz esses papéis, e depois trocam a paleta.
   A linha "@profile <id> "<Nome>" "<Descrição>"" dá o nome e a frase que a
   tela de escolha mostra (em inglês, como o resto do site); a ordem das
   linhas é a ordem da lista. O id nunca muda: fica gravado na conta.
   Para ver sem escolher: qualquer página com ?theme=<id> no endereço, só
   naquela aba (?theme=spectrah mostra o padrão).
   Os documentos (PDF, Excel) continuam na marca em todos; a logo da
   Spectrah (--logo-deep e afins) muda de cor em quase todos.
   -------------------------------------------------------------------------- */

/* @profile spectrah-teal "Spectrah Teal" "Spectrah, with teal buttons and icons" */
/* @profile claro "Light" "Brand colors on white and near-white" */
/* @profile claro-navy "Light Navy" "Light, with navy buttons and icons" */
/* @profile ensolarado "Sunlight" "Highest contrast, for outdoors and bright rooms" */
/* @profile sepia "Sepia" "Warm, yellowish paper tones" */
/* @profile cinza "Black & White" "Shades of gray; warnings keep their colors" */
/* @profile escuro "Dark" "Near-black graphite with the brand teal" */
/* @profile noturno "Night" "Dim and warm, for night shifts" */
/* @profile sereno "Calm" "Low contrast and muted colors, easy on the eyes" */
/* @profile carmim "Crimson" "Brand red on dark wine" */
/* @profile floresta "Forest" "Green on dark green" */
/* @profile violeta "Violet" "Magenta and lilac on dark purple" */

/* Claro: as cores da marca sobre branco e quase branco. Os papéis deste
   bloco valem para todo perfil de fundo claro. */
:root[data-theme="claro"], :root[data-theme="claro-navy"],
:root[data-theme="ensolarado"], :root[data-theme="sepia"], :root[data-theme="cinza"] {
  --pal-navy-900: #f3f6f9;
  --pal-navy-800: #ffffff;
  --pal-navy-700: #e8eef4;
  --pal-navy-600: #d3dde7;
  --pal-teal-500: #0092a5;
  --pal-teal-300: #00a7bb;
  --pal-teal-400: #00a0b3;
  --pal-teal-600: #007a8a;
  --pal-sky-400: #0277bd;
  --pal-silver-300: #5c6c7c;
  --pal-ice-100: #13233a;
  --pal-steel-400: #586c80;
  --pal-steel-500: #7a8ea2;
  --pal-ink-950: #0d1b2e;
  --pal-ink-975: #0d1b2e;
  --pal-red-400: #c62f3b;
  --pal-red-200: #b3261e;
  --pal-amber-400: #9a6f00;
  --pal-amber-600: #835e00;
  --pal-orange-400: #c05a0a;
  --pal-orange-500: #a5651c;
  --pal-amber-300: #a8670f;
  --pal-amber-200: #8c6a1c;
  --pal-gold-400: #a37200;
  --pal-orange-300: #d97706;
  --pal-green-300: #2b9447;
  --pal-green-200: #3d8a37;
  --pal-gray-500: #8593a1;
  --pal-gray-600: #aab6c2;
  --pal-green-400: #1f8a3a;
  --text-strong: #0d1b2e;
  --highlight: #0d1b2e;
  --panel-surface: #ffffff;
  --panel-bg: #f3f6f9;
  --panel-rule: #e1e7ee;
  --panel-border: #d3dde7;
  --panel-accent: #007a8a;
  --panel-text-soft: #3c4f63;
  --ui-series-1: #0092a5;
  --ui-series-2: #a67c00;
  --ui-series-3: #8e44ad;
  --ui-series-4: #1f6fd1;
  --ui-series-5: #3d8a37;
  --ui-series-6: #c62f3b;
  --logo-name: #0d1b2e;
  --logo-text: #0d1b2e;
  --doc-brand: #00b4c8;
  --doc-heading: #0d1b2e;
}

/* Claro com botões e ícones navy (o teal fica só no passar do mouse) */
:root[data-theme="claro-navy"] {
  --btn-fill: #0d1b2e;
  --btn-fill-hover: #1a3358;
  --btn-label: #0d1b2e;
  --btn-line: #0d1b2e;
  --btn-ring: #0d1b2e;
  --btn-hover-line: #0092a5;
  --btn-hover-bright: #007a8a;
  --btn-tint: #0d1b2e;
  --btn-tint-brand: #0d1b2e;
  --icon-accent: #13233a;
  --icon-bright: #0092a5;
  --icon-brand: #0092a5;
}

/* Spectrah Teal: o padrão, com o teal da marca no lugar do azul claro nos
   botões e ícones */
:root[data-theme="spectrah-teal"] {
  --btn-line: var(--brand);
  --btn-tint: var(--brand);
  --icon-accent: var(--brand);
  --icon-bright: var(--brand-hover);
}

/* Escuro: grafite quase preto, teal da marca */
:root[data-theme="escuro"] {
  --logo-deep: #0d1116;
  --logo-sea: #24414b;
  --logo-wave: #1ec8da;
  --logo-wave-deep: #00a0b2;
  --logo-word-shadow: #000000;
  --pal-navy-900: #0a0d11;
  --pal-navy-800: #12161c;
  --pal-navy-700: #1a2028;
  --pal-navy-600: #262e38;
  --pal-ice-100: #e4e9ee;
  --pal-steel-400: #8794a2;
  --pal-steel-500: #7b8794;
  --panel-surface: #12161c;
  --panel-bg: #0a0d11;
  --panel-rule: #1f262f;
  --panel-border: #2a333e;
  --doc-brand: #00b4c8;
  --doc-heading: #0d1b2e;
}

/* Carmim: vermelho da marca sobre fundo vinho escuro */
:root[data-theme="carmim"] {
  --logo-deep: #3b0c19;
  --logo-sea: #a3243a;
  --logo-wave: #f05d6f;
  --logo-wave-deep: #d23f53;
  --logo-word-shadow: #2a0610;
  --pal-navy-900: #170d11;
  --pal-navy-800: #221419;
  --pal-navy-700: #2f1b22;
  --pal-navy-600: #45262f;
  --pal-teal-500: #e0475a;
  --pal-teal-300: #ff7d8c;
  --pal-teal-400: #f05d6f;
  --pal-teal-600: #c23447;
  --pal-sky-400: #ff9b85;
  --pal-silver-300: #dcc5c9;
  --pal-ice-100: #f4e8ea;
  --pal-steel-400: #b8999f;
  --pal-steel-500: #a4878d;
  --pal-red-400: #ff6a3d;
  --pal-red-200: #ff9a7a;
  --panel-surface: #221419;
  --panel-bg: #170d11;
  --panel-rule: #36212a;
  --panel-border: #4a2b34;
  --panel-accent: #ff8f9c;
  --panel-text-soft: #e6d2d6;
  --doc-brand: #00b4c8;
  --doc-heading: #0d1b2e;
}

/* Floresta: verde sobre fundo verde-escuro */
:root[data-theme="floresta"] {
  --logo-deep: #0b2a1c;
  --logo-sea: #1f7a55;
  --logo-wave: #45c68c;
  --logo-wave-deep: #2fa872;
  --logo-word-shadow: #051a10;
  --pal-navy-900: #0c1611;
  --pal-navy-800: #122019;
  --pal-navy-700: #1a2d23;
  --pal-navy-600: #264232;
  --pal-teal-500: #2fb37a;
  --pal-teal-300: #62d6a0;
  --pal-teal-400: #45c68c;
  --pal-teal-600: #23975f;
  --pal-sky-400: #7cc4e0;
  --pal-silver-300: #c3d5cb;
  --pal-ice-100: #e3f0e8;
  --pal-steel-400: #8eab9b;
  --pal-steel-500: #7f9a8b;
  --pal-green-400: #a3d65c;
  --pal-green-300: #b5e06b;
  --panel-surface: #122019;
  --panel-bg: #0c1611;
  --panel-rule: #1f3328;
  --panel-border: #2a4636;
  --panel-accent: #7fe0b2;
  --panel-text-soft: #cfe2d7;
  --doc-brand: #00b4c8;
  --doc-heading: #0d1b2e;
}

/* Sereno: pouco contraste, cores apagadas, para descansar a vista */
:root[data-theme="sereno"] {
  --logo-deep: #26343d;
  --logo-sea: #4d7a84;
  --logo-wave: #8fc0c8;
  --logo-wave-deep: #6ea8b2;
  --logo-word-shadow: #141c21;
  --pal-navy-900: #1f2427;
  --pal-navy-800: #262c30;
  --pal-navy-700: #2e3539;
  --pal-navy-600: #3a4348;
  --pal-teal-500: #6ea8b2;
  --pal-teal-300: #8fc0c8;
  --pal-teal-400: #7eb4bd;
  --pal-teal-600: #5d939c;
  --pal-sky-400: #8fb2c6;
  --pal-silver-300: #b4bec4;
  --pal-ice-100: #d2d8db;
  --pal-steel-400: #8f9aa0;
  --pal-steel-500: #85909a;
  --pal-white: #eef1f2;
  --pal-red-400: #cf8b8b;
  --pal-red-200: #dba3a3;
  --pal-amber-400: #cfb47c;
  --pal-amber-600: #bfa167;
  --pal-orange-400: #d1a07a;
  --pal-orange-500: #bf9572;
  --pal-amber-300: #cfa77c;
  --pal-amber-200: #d3bd8f;
  --pal-gold-400: #d1b37a;
  --pal-orange-300: #d4a26d;
  --pal-green-300: #9cc48f;
  --pal-green-200: #a3c296;
  --pal-green-400: #8fbf8a;
  --panel-surface: #262c30;
  --panel-bg: #1f2427;
  --panel-rule: #333b40;
  --panel-border: #3e474d;
  --panel-accent: #9cc9d0;
  --panel-text-soft: #c4cbcf;
  --ui-series-1: #6ea8b2;
  --ui-series-2: #cfb47c;
  --ui-series-3: #b39ccf;
  --ui-series-4: #8fb2c6;
  --ui-series-5: #9cc48f;
  --ui-series-6: #cf8b8b;
  --doc-brand: #00b4c8;
  --doc-heading: #0d1b2e;
}


/* Ensolarado: o máximo de contraste, para o sol do convés e sala clara.
   Branco puro, texto preto, bordas fortes, cores escuras e saturadas. */
:root[data-theme="ensolarado"] {
  --pal-navy-900: #ffffff;
  --pal-navy-800: #ffffff;
  --pal-navy-700: #eceff2;
  --pal-navy-600: #8a98a6;
  --pal-teal-500: #006d7a;
  --pal-teal-300: #00818f;
  --pal-teal-400: #007784;
  --pal-teal-600: #005660;
  --pal-sky-400: #0050a0;
  --pal-silver-300: #2e3d4c;
  --pal-ice-100: #000000;
  --pal-steel-400: #2b3a49;
  --pal-steel-500: #4d5d6d;
  --pal-red-400: #b0001a;
  --pal-red-200: #a00016;
  --pal-amber-400: #7a5200;
  --pal-amber-600: #6a4700;
  --pal-orange-400: #a04000;
  --pal-orange-500: #8a4a10;
  --pal-amber-300: #8a4f00;
  --pal-amber-200: #6e5010;
  --pal-gold-400: #7f5800;
  --pal-orange-300: #b85c00;
  --pal-green-300: #1d7a35;
  --pal-green-200: #2c6e28;
  --pal-green-400: #106b28;
  --pal-gray-500: #5d6b79;
  --pal-gray-600: #8593a1;
  --text-strong: #000000;
  --highlight: #000000;
  --panel-surface: #ffffff;
  --panel-bg: #f2f4f6;
  --panel-rule: #c8d0d8;
  --panel-border: #8a98a6;
  --panel-accent: #005660;
  --panel-text-soft: #1d2b3a;
  --logo-name: #000000;
  --logo-text: #000000;
  --doc-brand: #00b4c8;
  --doc-heading: #0d1b2e;
}

/* Sépia: papel amarelado, tinta marrom, ocre no lugar do teal */
:root[data-theme="sepia"] {
  --logo-deep: #4a300c;
  --logo-sea: #9a6210;
  --logo-wave: #e0a830;
  --logo-wave-deep: #c98f1c;
  --logo-word-shadow: #2e1e06;
  --pal-navy-900: #f3ead3;
  --pal-navy-800: #fbf5e6;
  --pal-navy-700: #ece1c4;
  --pal-navy-600: #d6c59c;
  --pal-teal-500: #9a6000;
  --pal-teal-300: #b57708;
  --pal-teal-400: #a86b02;
  --pal-teal-600: #7d4d00;
  --pal-sky-400: #8a4b1c;
  --pal-silver-300: #6b5a3e;
  --pal-ice-100: #3b2f1e;
  --pal-steel-400: #6f5f45;
  --pal-steel-500: #8c7b5f;
  --pal-ink-950: #2a2012;
  --pal-ink-975: #2a2012;
  --pal-gray-500: #9a8b70;
  --pal-gray-600: #bfb093;
  --text-strong: #2a2012;
  --highlight: #2a2012;
  --panel-surface: #fbf5e6;
  --panel-bg: #f3ead3;
  --panel-rule: #e4d7b6;
  --panel-border: #d6c59c;
  --panel-accent: #7d4d00;
  --panel-text-soft: #54442c;
  --ui-series-1: #9a6000;
  --ui-series-2: #2f6f7a;
  --ui-series-3: #8e44ad;
  --ui-series-4: #1f5fa8;
  --ui-series-5: #3d7a37;
  --ui-series-6: #b0302f;
  --logo-name: #3b2f1e;
  --logo-text: #3b2f1e;
  --doc-brand: #00b4c8;
  --doc-heading: #0d1b2e;
}

/* Preto e branco: tons de cinza. Erro, aviso e sucesso continuam em
   vermelho, amarelo e verde (os do claro), e as séries dos gráficos também,
   porque sem cor não se distinguem. */
:root[data-theme="cinza"] {
  --logo-deep: #262626;
  --logo-sea: #6b6b6b;
  --logo-wave: #b0b0b0;
  --logo-wave-deep: #8c8c8c;
  --logo-word-shadow: #0a0a0a;
  --pal-navy-900: #f0f0f0;
  --pal-navy-800: #ffffff;
  --pal-navy-700: #e4e4e4;
  --pal-navy-600: #c4c4c4;
  --pal-teal-500: #2b2b2b;
  --pal-teal-300: #555555;
  --pal-teal-400: #404040;
  --pal-teal-600: #111111;
  --pal-sky-400: #1a1a1a;
  --pal-silver-300: #555555;
  --pal-ice-100: #111111;
  --pal-steel-400: #5c5c5c;
  --pal-steel-500: #7a7a7a;
  --pal-ink-950: #111111;
  --pal-ink-975: #111111;
  --pal-gray-500: #8c8c8c;
  --pal-gray-600: #b4b4b4;
  --text-strong: #000000;
  --highlight: #000000;
  --panel-surface: #ffffff;
  --panel-bg: #f0f0f0;
  --panel-rule: #e0e0e0;
  --panel-border: #c4c4c4;
  --panel-accent: #111111;
  --panel-text-soft: #333333;
  --logo-name: #111111;
  --logo-text: #111111;
  --doc-brand: #00b4c8;
  --doc-heading: #0d1b2e;
}

/* Noturno: pouca luz e tons quentes, para o passadiço à noite (a luz azul
   é a que mais atrapalha a visão no escuro). Até o branco é apagado. */
:root[data-theme="noturno"] {
  --logo-deep: #0c0d10;
  --logo-sea: #3d2c1b;
  --logo-wave: #b3743a;
  --logo-wave-deep: #8f5a2a;
  --logo-word: #c9c1b6;
  --logo-word-mid: #8f877e;
  --logo-word-low: #6e6860;
  --logo-word-shadow: #000000;
  --pal-navy-900: #07080a;
  --pal-navy-800: #0d0f12;
  --pal-navy-700: #15181c;
  --pal-navy-600: #22262c;
  --pal-teal-500: #b3743a;
  --pal-teal-300: #c98a4c;
  --pal-teal-400: #bd7e42;
  --pal-teal-600: #965f2c;
  --pal-sky-400: #c28a52;
  --pal-silver-300: #8f877e;
  --pal-ice-100: #a8a198;
  --pal-steel-400: #7d766c;
  --pal-steel-500: #6c665e;
  --pal-white: #c9c1b6;
  --text-on-brand: #07080a;
  --pal-red-400: #b8574f;
  --pal-red-200: #c87068;
  --pal-amber-400: #b8913a;
  --pal-amber-600: #a07c2c;
  --pal-orange-400: #b87038;
  --pal-orange-500: #9c6a34;
  --pal-amber-300: #b08050;
  --pal-amber-200: #b39a6a;
  --pal-gold-400: #b8923a;
  --pal-orange-300: #b87a30;
  --pal-green-300: #7e9a54;
  --pal-green-200: #839a64;
  --pal-green-400: #6f9650;
  --pal-gray-500: #5a5f66;
  --pal-gray-600: #3e434a;
  --panel-surface: #0d0f12;
  --panel-bg: #07080a;
  --panel-rule: #181b20;
  --panel-border: #22272e;
  --panel-accent: #c98a4c;
  --panel-text-soft: #9c958b;
  --ui-series-1: #b3743a;
  --ui-series-2: #8f9a5a;
  --ui-series-3: #9a7aa0;
  --ui-series-4: #6f8aa0;
  --ui-series-5: #7e9a54;
  --ui-series-6: #b8574f;
  --doc-brand: #00b4c8;
  --doc-heading: #0d1b2e;
}

/* Violeta: magenta e lilás sobre roxo escuro */
:root[data-theme="violeta"] {
  --logo-deep: #2a0f3a;
  --logo-sea: #7a2b96;
  --logo-wave: #d474e6;
  --logo-wave-deep: #b452c8;
  --logo-word-shadow: #1a0826;
  --pal-navy-900: #150e1c;
  --pal-navy-800: #1f1529;
  --pal-navy-700: #2a1d38;
  --pal-navy-600: #3d2a50;
  --pal-teal-500: #c456d6;
  --pal-teal-300: #e08cf0;
  --pal-teal-400: #d474e6;
  --pal-teal-600: #a843bc;
  --pal-sky-400: #b4a0ff;
  --pal-silver-300: #d6c8e0;
  --pal-ice-100: #efe6f5;
  --pal-steel-400: #a998b8;
  --pal-steel-500: #9786a6;
  --panel-surface: #1f1529;
  --panel-bg: #150e1c;
  --panel-rule: #2f2140;
  --panel-border: #44305a;
  --panel-accent: #e8a2f5;
  --panel-text-soft: #ddd0e8;
  --doc-brand: #00b4c8;
  --doc-heading: #0d1b2e;
}


/* --------------------------------------------------------------------------
   2. Papéis — o que as páginas usam
   (Os blocos 2, 4 e 7 valem também dentro de .theme-light, para os papéis
   seguirem os valores do modo claro; ver o bloco 9.)
   -------------------------------------------------------------------------- */
:root, .theme-light {
  --bg-page: var(--pal-navy-900);
  --bg-surface: var(--pal-navy-800);
  --bg-raised: var(--pal-navy-700);
  --border: var(--pal-navy-600);

  --text: var(--pal-ice-100);
  --text-muted: var(--pal-steel-400);
  --text-on-brand: var(--pal-white);   /* texto sobre fundo colorido (marca, erro, sucesso) */
  --text-strong: var(--pal-white);     /* títulos em destaque */
  --bg-paper: var(--pal-white);        /* papel branco: croqui, logotipo enviado */

  --brand: var(--pal-teal-500);
  --brand-hover: var(--pal-teal-300);
  --brand-bright: var(--pal-teal-400);
  --brand-pressed: var(--pal-teal-600);
  --brand-alt: var(--pal-silver-300);
  --accent: var(--pal-sky-400);
  --link: var(--pal-sky-400);

  --danger: var(--pal-red-400);
  --danger-soft: var(--danger);
  --warning: var(--pal-amber-400);
  --warning-strong: var(--warning);
  --caution: var(--pal-orange-400);
  --caution-muted: var(--pal-orange-500);
  --success: var(--pal-green-400);
  --positive: var(--success);
  --confirm: var(--success);
  --notice: var(--warning);
  --text-on-notice: var(--pal-ink-800);
  --warning-soft: var(--warning);
  --tip: var(--warning);
  --busy: var(--pal-orange-300);
  --status-waiting: var(--pal-gray-500);
  --status-none: var(--pal-gray-600);
  --danger-pale: var(--danger);
  --info: var(--pal-sky-400);
  --muted-tint: var(--pal-steel-500);

  /* Bases de cor translúcida, sempre usadas por color-mix(..., transparent) */
  --highlight: var(--pal-white);   /* realce claro sobre fundo escuro */
  --shadow: var(--pal-black);      /* sombra */
  --overlay: var(--pal-ink-950);   /* fundo atrás de janela */
  --overlay-deep: var(--pal-ink-975);
  --overlay-lightbox: #050f1e;     /* atrás da imagem ampliada */

  --font-heading: var(--font-ui);
}


/* --------------------------------------------------------------------------
   3. Escalas
   -------------------------------------------------------------------------- */
:root {
  /* Tamanho de fonte: 15 degraus, do menor ao maior (decisão de 2026-11-01).
     Tamanho fora da escala se aproxima do degrau mais perto. */
  --fs-1: 0.66rem;
  --fs-2: 0.7rem;
  --fs-3: 0.72rem;
  --fs-4: 0.75rem;
  --fs-5: 0.78rem;
  --fs-6: 0.8rem;
  --fs-7: 0.82rem;
  --fs-8: 0.85rem;    /* texto de controle e de tabela */
  --fs-9: 0.88rem;
  --fs-10: 0.9rem;
  --fs-11: 0.95rem;
  --fs-12: 1rem;      /* texto corrido */
  --fs-13: 1.1rem;
  --fs-14: 1.4rem;
  --fs-15: 1.8rem;
  /* Títulos de destaque das páginas públicas (crescem com a tela) */
  --fs-display: clamp(2.2rem, 5vw, 3.6rem);
  --fs-display-2: clamp(1.6rem, 3vw, 2.2rem);

  --fw-normal: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius: 6px;       /* campos e botões */
  --radius-md: 8px;    /* cartões */
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 20px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Toque: área mínima de um alvo de dedo (botão, link, ícone) em tela de
     toque, pela regra de static/css/responsive.css. O desenho do ícone não
     cresce; cresce a área em volta. */
  --tap-min: 44px;

  /* Camadas: o cabeçalho fica acima dos controles do Leaflet (1000) e
     abaixo das janelas (2000+). */
  --z-nav: 1500;
  --z-modal: 2000;
}


/* --------------------------------------------------------------------------
   4. Componentes
   -------------------------------------------------------------------------- */
:root, .theme-light {
  --nav-bg: color-mix(in srgb, var(--bg-page) 92%, transparent);
  --input-bg: var(--bg-page);
  --toggle-knob: var(--pal-white);

  /* Botões: cada perfil pode dar aos botões cores próprias, fora da marca.
     Por padrão apontam para a marca e o acento, como antes. */
  --btn-fill: var(--brand);              /* fundo do botão cheio */
  --btn-fill-hover: var(--brand-hover);
  --btn-label: var(--brand);             /* texto colorido de botão de contorno */
  --btn-line: var(--accent);             /* contorno e glifo (botão com ícone) */
  --btn-ring: var(--brand);              /* contorno de botão e anel do escolhido */
  --btn-hover-line: var(--brand-hover);  /* contorno e texto ao passar o mouse */
  --btn-hover-bright: var(--brand-bright);
  --btn-tint: var(--accent);             /* tom do fundo ao passar o mouse e do escolhido */
  --btn-tint-brand: var(--tint-brand);
  --btn-primary-border: var(--btn-line);
  --btn-danger-border: var(--danger);

  /* Estado ativo (botão ligado, opção escolhida) e anel de foco */
  --toggle-active-bg: color-mix(in srgb, var(--accent) 22%, transparent);
  --toggle-active-ring: var(--brand);
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}


/* --------------------------------------------------------------------------
   4a. Janelas de módulo (ASTRA, ARCA, RTO, abertas dentro das ferramentas)
   e o "papel" da ficha F-41 no mapa (fundo branco, como um documento).
   -------------------------------------------------------------------------- */
:root {
  --panel-surface: #111c2e;        /* a janela */
  --panel-bg: #0b1422;             /* campos e listas dentro dela */
  --panel-rule: #22303c;
  --panel-border: #2b3a52;
  --panel-accent: #6fe3ef;
  --panel-text-soft: #c8d6e4;
  --marker-fill: #e8fbff;          /* miolo dos marcadores de estação */

  --paper-ink: #1a1a1a;
  --paper-text: #333333;
  --paper-muted: #555555;
  --paper-rule: #cccccc;
  --paper-rule-light: #dddddd;
  --paper-badge: #0b1f3a;
  --paper-ephemeral: #8a5a00;      /* "efêmero": régua daquele levantamento */
  --paper-warn-text: #6b3d00;
  --paper-warn-bg: #fff3e0;
  --paper-warn-border: #d9822b;
}


/* --------------------------------------------------------------------------
   4b. Bases dos translúcidos: color-mix(in srgb, var(--tint-brand) 8%,
   transparent) e afins. Só no :root, de propósito: dentro do modo claro
   (.theme-light) continuam com o valor do modo escuro, como os rgba() que
   substituíram. Se o tom translúcido deve seguir o modo claro é decisão da
   fase 5 do plano.
   -------------------------------------------------------------------------- */
:root {
  --tint-brand: var(--brand);
  --tint-brand-hover: var(--brand-hover);
  --tint-border: var(--border);
  --tint-surface: var(--bg-surface);
  --tint-raised: var(--bg-raised);
  --tint-page: var(--bg-page);
  --tint-text-muted: var(--text-muted);
  --tint-text: var(--text);
}


/* --------------------------------------------------------------------------
   5. Gráficos (Plotly): moldura e a sequência padrão de cores das séries.
   Paletas científicas (profundidade, mapa de calor) e a cor que a pessoa
   escolhe para uma série NÃO são tema: ficam no código da ferramenta.
   -------------------------------------------------------------------------- */
:root {
  --chart-bg: #ffffff;
  --chart-text: #222222;
  --chart-grid: #e0e0e0;
  --chart-zero: #cccccc;          /* linha do zero, borda da legenda */
  --chart-tick: #444444;          /* números dos eixos */
  --chart-axis: #888888;          /* moldura do gráfico (TSVIEW) */
  --chart-legend-bg: #f9f9f9;
  --chart-strong: #333333;        /* título de painel */
  --chart-muted: #666666;         /* legenda, rótulo pequeno */
  --chart-faint: #999999;
  --chart-ink: #000000;
  --chart-font: var(--font-ui);
  --chart-original: #9aa5b1;      /* série original atrás da transformada */
  --chart-raw: #b4b2a9;           /* série bruta na limpeza */
  --chart-guide: #5dcaa5;         /* mediana móvel na limpeza */

  --series-1: #1f77b4;
  --series-2: #d62728;
  --series-3: #2ca02c;
  --series-4: #9467bd;
  --series-5: #ff7f0e;
  --series-6: #17becf;
  --series-7: #bcbd22;
  --series-8: #e377c2;

  /* Séries sobre fundo escuro (gráfico do RTO, na própria interface) */
  --ui-series-1: #00b4c8;
  --ui-series-2: #e5c07b;
  --ui-series-3: #c678dd;
  --ui-series-4: #58a6ff;
  --ui-series-5: #98c379;
  --ui-series-6: #e06c75;
}


/* --------------------------------------------------------------------------
   5b. Mapas (Leaflet): cores de interface desenhadas sobre o mapa.
   As paletas de profundidade e a cor que a pessoa escolhe ficam no código.
   -------------------------------------------------------------------------- */
:root {
  /* Cor de cada camada nova do GeoPack, em ordem */
  --layer-1: #00b4c8;
  --layer-2: #e0a45c;
  --layer-3: #7ed957;
  --layer-4: #e06c75;
  --layer-5: #58a6ff;
  --layer-6: #c792ea;

  --map-draw: #4fc3f7;            /* desenhar, medir, selecionar */
  --map-measure: #e0a45c;         /* corte (Cross Section) */
  --map-label: #e6eefb;           /* rótulos e textos sobre o mapa */
  --map-overlay-text: var(--text); /* legenda, título e barra de cores: caixas com o fundo da página, sobre o mapa */
  --map-contour: #ffffff;         /* curvas de nível e seus rótulos */
  --map-select: #ffffff;          /* anel do item escolhido */
  --map-station: #1ec8da;         /* estação FEMAR (ASTRA) */
  --map-station-stroke: #0e7c8a;
  --map-reanalysis: #e3b341;      /* grade ERA5 (ARCA) */
  --map-reanalysis-stroke: #8a5a00;
  --map-chm: #e8eef5;             /* estação CHM (ficha F-41) */
  --map-chm-stroke: #0b1f3a;
  --map-chm-divergent: #d9822b;
  --map-bathos-border: #00b4c8;   /* borda GERAL e marcador do Bathos */
  --map-highlight: #ffb300;       /* borda do levantamento achado */
  --map-surveyed: #00e5ff;        /* contorno levantado */
  --map-shallowest: #e06c75;      /* ponto mais raso */
}


/* --------------------------------------------------------------------------
   6. Documentos (PDF no navegador, Excel no servidor): papel branco.
   processing/theme.py lê estes valores para o Excel.
   -------------------------------------------------------------------------- */
:root {
  --doc-bg: #ffffff;
  --doc-brand: var(--pal-teal-500);
  --doc-heading: var(--pal-navy-900);
  --doc-brand-tint: #e6f7f9;
  --doc-fill: #f3f6f7;
  --doc-rule: #d9dee1;
  --doc-text: #1a1a1a;
  --doc-muted: #8a9aa5;
  --doc-edited: #9a6700;           /* valor editado à mão (Excel do DDReport) */
  --doc-estimated: #8a6d1f;

  /* PDF (jsPDF): textos e linhas */
  --doc-title: #00466e;            /* título do relatório */
  --doc-section: #005a82;          /* título de seção, cabeçalho de tabela */
  --doc-ink: #1e1e1e;              /* texto principal */
  --doc-body: #3c3c3c;
  --doc-caption: #464646;
  --doc-note: #5a5a5a;
  --doc-sub: #646464;              /* linha de baixo da assinatura */
  --doc-faint: #787878;            /* rodapé, linha da assinatura */
  --doc-frame: #96a0aa;            /* moldura de gráfico e da linha do tempo */
  --doc-box: #c8c8c8;              /* quadrinho da legenda */
  --doc-grid: #e0e0e0;
  --doc-table-rule: #c8d0d8;
  --doc-table-label: #ecf2f7;      /* coluna de rótulos das tabelas */
  --doc-empty: #eceff2;            /* trecho vazio da linha do tempo */
  --doc-ok: #14783c;
  --doc-caution: #cd6e00;          /* laranja: SNR < 2, leitura fora, parada */
  --doc-orange: #c86e00;           /* GeoLevel: diferença de 5 a 10 mm */
  --doc-red: #b41e1e;              /* GeoLevel: acima de 10 mm, fora da tolerância */
  --doc-failed: #c82828;
  --doc-alert: #aa0000;
  --doc-alert-bg: #fde2e2;
  --doc-alert-border: #c81e1e;
  --doc-alert-text: #960000;
  --doc-warn-bg: #fff3cd;
  --doc-warn-border: #e3b341;
  --doc-warn-text: #785000;

  /* PDF: séries e estados (DDReport, HSR, TideStaff) */
  --doc-series-1: #0096aa;
  --doc-series-2: #00466e;
  --doc-series-3: #5fa0b9;
  --doc-series-4: #8c9ba8;
  --doc-series-5: #28465f;
  --doc-series-6: #78bec8;
  --doc-series-7: #cd6e00;
  --doc-state-sailing: #afbcc6;    /* navegando */
  --doc-state-pipeline: #6c5cc8;   /* tubulação (corte e sucção) */
  --doc-curve: #1f77b4;            /* curva da maré (TideStaff) */
  --doc-curve-interp: #ff7f0e;     /* ponto interpolado */

  /* Excel do TideStaff (ExcelJS, no navegador) */
  --doc-label-fill: #dcf2f4;
  --doc-cell-border: #c9d2d6;
  --doc-zebra: #f4f8f9;
  --doc-highlight: #fff6e0;
  --doc-attention: #b86a00;
  --doc-gray: #6b7780;
  --doc-failed-soft: #b33a3a;       /* NTRIP em falha (Excel do HSR) */
}


/* --------------------------------------------------------------------------
   7. Nomes antigos e paleta legada
   Os nomes antigos continuam valendo (as páginas usam), apontando para os
   papéis; código novo usa os papéis. Os --legacy-* são a paleta "GitHub
   escuro" que ainda sobra em style.css, no ZONPY e no TDAS: na fase 5 do
   plano passam a apontar para os papéis e somem.
   -------------------------------------------------------------------------- */
:root, .theme-light {
  --navy: var(--bg-page);
  --navy-card: var(--bg-surface);
  --navy-light: var(--bg-raised);
  --teal: var(--brand);
  --teal-light: var(--brand-hover);
  --silver: var(--brand-alt);
  --text-dim: var(--text-muted);

  /* Desde a fase 5 (2026-11-01) apontam para os papéis: o site tem uma
     paleta só. Código novo usa os papéis direto. */
  --legacy-bg: var(--bg-page);
  --legacy-surface: var(--bg-surface);
  --legacy-raised: var(--bg-raised);
  --legacy-border: var(--border);
  --legacy-text: var(--text);
  --legacy-text-muted: var(--text-muted);
  --legacy-link: var(--link);
  --legacy-btn: var(--brand);
  --legacy-btn-hover: var(--brand-hover);
  --legacy-danger: var(--danger);
  --legacy-success: var(--success);
  --legacy-warning: var(--warning);
  --legacy-success-bg: color-mix(in srgb, var(--success) 18%, var(--bg-page));
  --legacy-danger-bg: color-mix(in srgb, var(--danger) 18%, var(--bg-page));
  --legacy-danger-bg-deep: color-mix(in srgb, var(--danger) 12%, var(--bg-page));
  --legacy-warning-bg: color-mix(in srgb, var(--warning) 12%, var(--bg-page));
  --legacy-danger-soft: var(--danger);
  --legacy-text-soft: var(--text);
  --legacy-text-faint: var(--text-muted);
  --legacy-orange: var(--caution);
  --legacy-purple: var(--state-pipeline);
  --legacy-font-ui: var(--font-ui);
  --legacy-font-mono: var(--font-mono);
  --legacy-code: var(--accent);
  --legacy-font-code: var(--font-mono);
  --legacy-warn-alt: var(--warning);
  --legacy-blue-strong: var(--brand);
}


/* --------------------------------------------------------------------------
   7b. Logotipos e ícones das ferramentas (cartões, cabeçalho, hubs).
   Cores de desenho, não papéis: mudam o logotipo, não a interface.
   -------------------------------------------------------------------------- */
:root {
  --logo-teal: var(--pal-teal-500);
  --logo-teal-bright: var(--pal-teal-400);
  --logo-teal-glow: #3ddaec;
  --logo-blue: #58a6ff;
  --logo-blue-2: #79b8ff;
  --logo-blue-3: #9ecaff;
  --logo-blue-4: #b3d1ff;
  --logo-red: #d6393a;
  --logo-divider: #30363d;
  --logo-teal-light: var(--pal-teal-300);
  --logo-line: var(--pal-navy-600);
  --logo-steel: var(--pal-steel-400);
  --logo-silver: var(--pal-silver-300);
  --logo-white: var(--pal-white);
  --logo-text: #e6edf3;
  --logo-name: var(--logo-white);   /* nome da ferramenta no logotipo */
  --logo-green: #3fb950;
}


/* --------------------------------------------------------------------------
   7d. Ícones das ferramentas (static/img/geopack, tsview, zonpy): cada cor do
   desenho é uma destas variáveis, escrita no próprio .svg com a cor padrão
   de reserva (style="fill: var(--icon-accent, #4fc3f7)"). O theme.js pinta
   o ícone com o valor do perfil. Os selos dos planos (static/img/plans) e as
   setas de norte não são tema.
   -------------------------------------------------------------------------- */
:root {
  --icon-accent: var(--accent);       /* o traço principal (azul) */
  --icon-bright: var(--brand-hover);  /* realce teal claro */
  --icon-brand: var(--brand);
  --icon-light: var(--text);          /* detalhe claro */
  --icon-muted: var(--text-muted);
  --icon-ink: var(--bg-page);         /* contorno da cor do fundo (recorte) */
  --icon-raised: var(--bg-raised);
  --icon-silver: var(--brand-alt);
  --icon-dark: #373435;
  --icon-white: var(--pal-white);
}


/* --------------------------------------------------------------------------
   7e. A marca Spectrah Scientific (static/img/brand: logo_spectrah.svg e o
   ícone icone_spectrah.svg, que também é o favicon). Como os ícones, cada
   cor do .svg é uma destas variáveis com a cor padrão de reserva, e o
   theme.js aplica o perfil. O favicon.ico e o apple-touch-icon.png são
   imagens fixas nas cores padrão. Desenho: scripts/logo_svg.
   -------------------------------------------------------------------------- */
:root {
  --logo-deep: #0b2c4d;        /* mar: canto escuro do degradê */
  --logo-sea: #177e8f;         /* mar: canto claro */
  --logo-foam: #ffffff;        /* a onda branca (só nas versões de Arte/; no site ela é transparente) */
  --logo-wave: #2ad6e2;        /* a onda de baixo */
  --logo-wave-deep: #16b6c9;
  --logo-word: #ffffff;        /* SPECTRAH: o prateado, de cima para baixo */
  --logo-word-mid: #c8d0d8;
  --logo-word-low: #8e9aa4;
  --logo-word-shadow: #061a2e;
  --logo-sub: #9aa1a6;         /* "Spectrah Scientific" */
}


/* --------------------------------------------------------------------------
   7c. Elementos cartográficos (barra de escala, rosa dos ventos): preto e
   branco de mapa, que não seguem o tema da interface.
   -------------------------------------------------------------------------- */
:root {
  --map-ink: #000000;
  --map-paper: #ffffff;
}


/* --------------------------------------------------------------------------
   8. Cores de domínio: estados da draga (DDReport, corte e sucção e mecânica)
   -------------------------------------------------------------------------- */
:root {
  --state-maneuver: #8fd6e6;        /* manobra, barcaça, navegando carregada */
  --state-maneuver-tint: #4d96a3;
  --state-pipeline: #b3a8ff;        /* tubulação, booster */
  --state-pipeline-strong: #6c5ce7;
  --state-dredging: #00a0b4;        /* dragando */
  --state-parked: #d4731a;          /* parada */
}


/* --------------------------------------------------------------------------
   9. Modo claro dos relatórios de campo (botão de sol do GeoLevel, TideStaff,
   HSR e DDReport: a classe .theme-light na .app-shell). Troca só os valores
   da paleta; os papéis seguem sozinhos (blocos 2, 4 e 7 valem dentro dele).
   Os --sun-* também servem às poucas regras ".theme-light ..." que pedem
   uma cor própria do modo claro.
   -------------------------------------------------------------------------- */
:root {
  --sun-bg-page: #f5f8fa;
  --sun-bg-surface: #ffffff;
  --sun-bg-raised: #e6ebf0;
  --sun-border: #c5cfd8;
  --sun-text: #10181f;
  --sun-text-muted: #4c5a66;
  --sun-brand: #036b7a;
  --sun-brand-hover: #04808f;
  --sun-warning: #8a6d1f;
  --sun-caution: #a8510c;
  --sun-danger: #b42318;
  --sun-state-maneuver: #2c7a88;
  --sun-state-pipeline: #4b3cc4;
}
.theme-light {
  --pal-navy-900: var(--sun-bg-page);
  --pal-navy-800: var(--sun-bg-surface);
  --pal-navy-700: var(--sun-bg-raised);
  --pal-navy-600: var(--sun-border);
  --pal-ice-100: var(--sun-text);
  --pal-steel-400: var(--sun-text-muted);
  --pal-teal-500: var(--sun-brand);
  --pal-teal-300: var(--sun-brand-hover);
}