/* tokens.css — as decisões visuais da tela de acesso e da área interna, num lugar só.
 *
 * Linguagem: sóbria, um único acento dourado, linhas finíssimas, muito respiro —
 * em DOIS temas, escuro e claro, com os mesmos nomes de variável.
 *
 * Como o tema é escolhido (nesta ordem):
 *   1. `<html data-tema="claro|escuro">` — escolha da pessoa, posta ANTES do
 *      primeiro desenho por /app/js/aparencia-inicial.js (sem clarão);
 *   2. sem o atributo, `prefers-color-scheme` do sistema — só CSS, funciona com
 *      JavaScript desligado e acompanha a mudança do sistema na hora.
 * O bloco claro aparece DUAS vezes (media query e atributo) com o MESMO conteúdo:
 * CSS puro não tem como reaproveitar; test_web_estatico.py confere que são iguais.
 *
 * Todo par texto/fundo daqui é medido em contraste AA nos dois temas pela prova
 * de navegador (≥ 4,5:1 texto; ≥ 3:1 texto grande, contorno de controle e foco).
 *
 * `--ouro` é o dourado que se LÊ no tema (texto, ícone, foco, preenchimento de
 * controle); `--ouro-vivo` é o dourado de fio e detalhe, igual nos dois temas.
 * As variáveis `--na-foto-*` valem para o que fica SOBRE a foto do navio: a foto
 * é escura nos dois temas, então elas não mudam.
 *
 * O que este arquivo NÃO faz: não estiliza elemento nenhum — só declara
 * variáveis. Quem pinta é base.css, entrar.css, inicio.css.
 *
 * `--marca` / `--marca-tinta` são as ÚNICAS variáveis que o tema da agência
 * (GET /api/v1/tenant/theme) pode trocar, via CSSOM, depois de validadas contra
 * o `--fundo` do tema ativo.
 */

/* Não há declaração de fonte aqui: referenciar fonte que não está no repositório faz
 * TODA visita pedir três arquivos que respondem 404. A General Sans é opcional
 * e mora em /app/fonts/general-sans.css, que só é carregado se o dono a ativar
 * (ver fonts/LEIA-ME.md). Sem ela, a pilha `--sans` cai nas fontes do sistema. */

/* ── O que não muda com o tema ──────────────────────────────────────────── */

:root {
  /* Sobre a foto do navio (sempre escura) */
  --na-foto-texto: #f3f0e9;
  --na-foto-texto-2: #d2cfc8;
  --na-foto-ouro: #f0d59a;
  --na-foto-linha: rgba(243, 240, 233, 0.34);
  --na-foto-veu: rgba(8, 8, 12, 0.62);
  --na-foto-veu-0: rgba(8, 8, 12, 0);
  --na-foto-sombra: 0 1px 18px rgba(5, 5, 8, 0.7);
  --noite: #0a0a0f;

  /* Dourado de fio e detalhe */
  --ouro-vivo: #e0b65c;

  /* Marca da agência — trocável pelo tema da agência; nasce igual ao dourado vivo. */
  --marca: #e0b65c;
  --marca-tinta: #0a0a0f;

  /* O QR é sempre preto sobre branco, em qualquer tema. */
  --qr-fundo: #ffffff;

  /* Tipografia */
  --sans: "General Sans", Inter, "Segoe UI Variable Text", "Segoe UI", -apple-system, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serifa: Georgia, "Times New Roman", serif;

  --t-micro: 0.6875rem; /* 11 */
  --t-pp: 0.75rem; /* 12 */
  --t-p: 0.8125rem; /* 13 */
  --t-m: 0.9375rem; /* 15 */
  --t-g: 1.0625rem; /* 17 */
  --t-gg: 1.375rem; /* 22 */
  --t-titulo: clamp(1.75rem, 1.35rem + 1.2vw, 2.125rem);
  --t-cena: clamp(2rem, 0.9rem + 2.5vw, 3.375rem);

  /* Forma */
  --r-p: 8px;
  --r-m: 12px;
  --r-g: 18px;
  --r-gg: 26px;
  --r-pilula: 999px;

  /* Movimento */
  --suave: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rapido: 150ms;
  --medio: 220ms;

  --toque: 44px;
}

/* ── Tema escuro (padrão) ───────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* Fundo */
  --fundo: #0a0a0f;
  --fundo-2: #0f0f16;
  --fundo-3: #15151d;
  --fundo-4: #1c1c26;
  --vidro-claro: rgba(237, 234, 227, 0.04);
  --vidro-claro-2: rgba(237, 234, 227, 0.07);

  /* Superfícies */
  --painel-fundo: rgba(10, 10, 15, 0.86);
  --painel-fundo-solido: rgba(10, 10, 15, 0.96);
  --painel-desfoque: blur(22px) saturate(120%);
  --cartao-fundo: rgba(237, 234, 227, 0.025);
  --cartao-ouro-linha: rgba(224, 182, 92, 0.22);
  --cartao-ouro-fundo: linear-gradient(160deg, rgba(224, 182, 92, 0.08), rgba(224, 182, 92, 0.015) 60%);
  --lateral-fundo: rgba(13, 13, 19, 0.82);
  --topo-fundo: rgba(10, 10, 15, 0.78);
  --app-brilho-1: rgba(224, 182, 92, 0.07);
  --app-brilho-2: rgba(169, 189, 245, 0.035);
  --flutuante-fundo: #1c1c26;
  --flutuante-texto: #edeae3;
  --cortina: rgba(5, 5, 8, 0.72);
  --estrelas: block;

  /* Texto (sobre --fundo: 16,6:1 · 9,3:1 · 6,0:1) */
  --texto: #edeae3;
  --texto-2: #b9b6af;
  --texto-3: #94918b;

  /* Linhas (decorativas) e contorno de controle (≥ 3:1 sobre o fundo) */
  --linha: rgba(237, 234, 227, 0.1);
  --linha-2: rgba(237, 234, 227, 0.16);
  --linha-3: rgba(237, 234, 227, 0.28);
  --linha-forte: rgba(237, 234, 227, 0.5);
  --controle-linha: rgba(237, 234, 227, 0.4);
  --controle-linha-2: rgba(237, 234, 227, 0.58);

  /* Campos */
  --campo-fundo: rgba(237, 234, 227, 0.04);
  --campo-fundo-foco: rgba(237, 234, 227, 0.06);
  --campo-preenchido: #15151d;

  /* Acento dourado (sobre --fundo: 10,2:1) */
  --ouro: #e0b65c;
  --ouro-2: #d9a441;
  --ouro-claro: #f0d59a;
  --ouro-fundo: rgba(224, 182, 92, 0.1);
  --ouro-linha: rgba(224, 182, 92, 0.34);
  --ouro-halo: rgba(224, 182, 92, 0.22);
  --selecao: rgba(224, 182, 92, 0.32);

  /* Botão primário */
  --primario-fundo: #edeae3;
  --primario-fundo-2: #fffdf7;
  --primario-tinta: #0a0a0f;
  --primario-sombra: 0 10px 30px -12px rgba(237, 234, 227, 0.45);
  --primario-sombra-2: 0 12px 34px -10px rgba(237, 234, 227, 0.55);
  --primario-anel: rgba(10, 10, 15, 0.25);
  --anel: rgba(237, 234, 227, 0.3);

  /* Estados (todos ≥ 7:1 sobre --fundo) */
  --erro: #ff9b8a;
  --erro-fundo: rgba(255, 120, 100, 0.09);
  --erro-linha: rgba(255, 155, 138, 0.38);
  --erro-halo: rgba(255, 155, 138, 0.22);
  --aviso: #f0c26b;
  --aviso-fundo: rgba(240, 194, 107, 0.08);
  --aviso-fundo-2: rgba(240, 194, 107, 0.035);
  --aviso-linha: rgba(240, 194, 107, 0.34);
  --certo: #86d3a2;
  --certo-fundo: rgba(134, 211, 162, 0.08);
  --certo-linha: rgba(134, 211, 162, 0.32);
  --nota: #a9bdf5;
  --nota-fundo: rgba(169, 189, 245, 0.07);
  --nota-linha: rgba(169, 189, 245, 0.28);

  /* Sombras */
  --sombra-painel: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 2px 0 0 rgba(237, 234, 227, 0.03) inset;
  --sombra-folha: 0 -24px 50px -20px rgba(0, 0, 0, 0.8);
  --sombra-cartao: none;
  --sombra-dialogo: 0 40px 120px -20px rgba(0, 0, 0, 0.85);
  --sombra-menu: 0 30px 70px -18px rgba(0, 0, 0, 0.85);
  --sombra-flutuante: 0 20px 50px -12px rgba(0, 0, 0, 0.8);
  --sombra-gaveta: 30px 0 80px -20px rgba(0, 0, 0, 0.9);
  --sombra-qr: 0 0 0 1px rgba(224, 182, 92, 0.34), 0 18px 40px -18px rgba(0, 0, 0, 0.9);

  /* Buscador de cruzeiros: faixa do recorte, desenho de reserva da foto, etiqueta sobre a foto, espera */
  --recorte-fundo: linear-gradient(118deg, rgba(224, 182, 92, 0.1) 0%, rgba(169, 189, 245, 0.045) 46%, rgba(237, 234, 227, 0.015) 100%);
  --recorte-brilho: rgba(224, 182, 92, 0.16);
  --arte-fundo: linear-gradient(168deg, #1a1d2e 0%, #121422 52%, #0c0d15 100%);
  --arte-traco: rgba(240, 213, 154, 0.3);
  --etiqueta-fundo: rgba(10, 10, 15, 0.82);
  --etiqueta-texto: #edeae3;
  --osso: rgba(237, 234, 227, 0.07);
  --osso-brilho: rgba(237, 234, 227, 0.14);
  --sombra-cartao-alta: 0 26px 54px -26px rgba(0, 0, 0, 0.95);
  --sombra-ficha: -40px 0 110px -30px rgba(0, 0, 0, 0.9);

  /* O quadro do navio. No escuro ele sangra até as bordas da página (`--quadro-solto: 0`):
     a foto fica inteira à esquerda, o céu e o mar continuam para a direita (por baixo
     do painel, cada vez mais tênues) e a base se funde à noite do fundo.
     ZONA OPACA — onde o navio tem de estar: a foto só começa a fundir nos últimos
     `--quadro-fusao-lado` da largura (de cada lado em que sobra espaço) e abaixo de
     `--quadro-zona-base` da altura. Ver img/LEIA-ME.md antes de trocar a foto. */
  --quadro-solto: 0;
  --quadro-margem: 0px;
  --quadro-raio: 0px;
  --quadro-encaixe: 0.96;
  --quadro-respiro: 6px;
  --quadro-respiro-estreito: 4px;
  --quadro-sombra: none;
  --quadro-espera: #0a0a0f;
  --quadro-fusao-lado: 0.07;
  --quadro-faixa: 0.03;
  --quadro-zona-base: 78%;
  --quadro-zona-base-estreita: 80%;
  --quadro-mascara: linear-gradient(180deg, #000 0, #000 78%, rgba(0, 0, 0, 0.8) 83%, rgba(0, 0, 0, 0.46) 88%, rgba(0, 0, 0, 0.16) 93%, transparent 97%);
  --quadro-mascara-estreita: linear-gradient(180deg, #000 0, #000 80%, rgba(0, 0, 0, 0.78) 85%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0.12) 94%, transparent 97%);
  --aura-mascara-d: linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0.86) 10%, rgba(0, 0, 0, 0.6) 28%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0.14) 78%, transparent 100%);
  --aura-mascara-e: linear-gradient(270deg, #000 0, rgba(0, 0, 0, 0.86) 10%, rgba(0, 0, 0, 0.6) 28%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0.14) 78%, transparent 100%);

  /* A arte de reserva (sem foto): noite, navio em silhueta com as luzes acesas */
  --reserva-ceu-1: #07070c;
  --reserva-ceu-2: #0c0d18;
  --reserva-ceu-3: #171522;
  --reserva-ceu-4: #2a2120;
  --reserva-mar-1: #14121a;
  --reserva-mar-2: #0c0c13;
  --reserva-mar-3: #08080c;
  --reserva-brilho-1: rgba(224, 182, 92, 0.5);
  --reserva-brilho-2: rgba(217, 164, 65, 0.16);
  --reserva-reflexo: #e0b65c;
  --reserva-fio: rgba(240, 213, 154, 0.55);
  --reserva-estrelas: 1;
  --reserva-casco: #050508;
  --reserva-luzes: #f0d59a;
  --reserva-onda: #edeae3;
  --reserva-mascara: linear-gradient(90deg, #000 0, #000 86%, rgba(0, 0, 0, 0.5) 94%, transparent 100%);
  --reserva-texto: #f3f0e9;
  --reserva-texto-2: #d2cfc8;
  --reserva-ouro: #f0d59a;
  --reserva-linha: rgba(243, 240, 233, 0.34);
  --reserva-sombra: 0 1px 18px rgba(5, 5, 8, 0.7);
  --reserva-veu: rgba(8, 8, 12, 0.62);
  --reserva-veu-0: rgba(8, 8, 12, 0);
}

/* ── Tema claro: pelo sistema, se a pessoa não escolheu o escuro ────────── */

@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    color-scheme: light;

    /* Fundo: papel quente */
    --fundo: #f6f3ec;
    --fundo-2: #ffffff;
    --fundo-3: #ffffff;
    --fundo-4: #efebe2;
    --vidro-claro: rgba(15, 16, 20, 0.028);
    --vidro-claro-2: rgba(15, 16, 20, 0.055);

    /* Superfícies: papel branco, sem vidro escuro */
    --painel-fundo: #ffffff;
    --painel-fundo-solido: #ffffff;
    --painel-desfoque: none;
    --cartao-fundo: #ffffff;
    --cartao-ouro-linha: rgba(160, 118, 20, 0.3);
    --cartao-ouro-fundo: linear-gradient(160deg, #fbf3df, #ffffff 62%);
    --lateral-fundo: rgba(255, 255, 255, 0.72);
    --topo-fundo: rgba(246, 243, 236, 0.84);
    --app-brilho-1: rgba(224, 182, 92, 0.16);
    --app-brilho-2: rgba(255, 255, 255, 0.7);
    --flutuante-fundo: #17181d;
    --flutuante-texto: #f6f3ec;
    --cortina: rgba(24, 22, 16, 0.42);
    --estrelas: none;

    /* Texto (sobre --fundo: 17,2:1 · 8,5:1 · 5,3:1) */
    --texto: #0f1014;
    --texto-2: #45464d;
    --texto-3: #62646c;

    /* Linhas (decorativas) e contorno de controle (≥ 3:1 sobre o fundo) */
    --linha: rgba(15, 16, 20, 0.1);
    --linha-2: rgba(15, 16, 20, 0.15);
    --linha-3: rgba(15, 16, 20, 0.28);
    --linha-forte: rgba(15, 16, 20, 0.55);
    --controle-linha: rgba(15, 16, 20, 0.5);
    --controle-linha-2: rgba(15, 16, 20, 0.7);

    /* Campos */
    --campo-fundo: #ffffff;
    --campo-fundo-foco: #ffffff;
    --campo-preenchido: #fbf6e6;

    /* Acento dourado escurecido para ler sobre claro (sobre --fundo: 5,6:1) */
    --ouro: #7d5c0c;
    --ouro-2: #6c4f08;
    --ouro-claro: #5a4206;
    --ouro-fundo: rgba(160, 118, 20, 0.1);
    --ouro-linha: rgba(125, 92, 12, 0.42);
    --ouro-halo: rgba(160, 118, 20, 0.24);
    --selecao: rgba(224, 182, 92, 0.42);

    /* Botão primário: escuro sobre claro */
    --primario-fundo: #0f1014;
    --primario-fundo-2: #2a2b33;
    --primario-tinta: #f6f3ec;
    --primario-sombra: 0 10px 24px -12px rgba(15, 16, 20, 0.55);
    --primario-sombra-2: 0 14px 28px -12px rgba(15, 16, 20, 0.6);
    --primario-anel: rgba(246, 243, 236, 0.3);
    --anel: rgba(15, 16, 20, 0.22);

    /* Estados (todos ≥ 5:1 sobre --fundo e sobre o próprio fundo tingido) */
    --erro: #b3261e;
    --erro-fundo: rgba(179, 38, 30, 0.06);
    --erro-linha: rgba(179, 38, 30, 0.36);
    --erro-halo: rgba(179, 38, 30, 0.18);
    --aviso: #8a5300;
    --aviso-fundo: rgba(176, 112, 0, 0.08);
    --aviso-fundo-2: rgba(176, 112, 0, 0.05);
    --aviso-linha: rgba(138, 83, 0, 0.4);
    --certo: #1b6b43;
    --certo-fundo: rgba(27, 107, 67, 0.07);
    --certo-linha: rgba(27, 107, 67, 0.36);
    --nota: #2c4ea6;
    --nota-fundo: rgba(44, 78, 166, 0.06);
    --nota-linha: rgba(44, 78, 166, 0.3);

    /* Sombras suaves e quentes */
    --sombra-painel: 0 1px 2px rgba(40, 32, 12, 0.05), 0 28px 64px -28px rgba(40, 32, 12, 0.28);
    --sombra-folha: 0 -18px 40px -24px rgba(40, 32, 12, 0.3);
    --sombra-cartao: 0 1px 2px rgba(40, 32, 12, 0.04), 0 14px 34px -22px rgba(40, 32, 12, 0.2);
    --sombra-dialogo: 0 2px 6px rgba(40, 32, 12, 0.06), 0 40px 90px -30px rgba(40, 32, 12, 0.4);
    --sombra-menu: 0 2px 6px rgba(40, 32, 12, 0.06), 0 26px 56px -24px rgba(40, 32, 12, 0.34);
    --sombra-flutuante: 0 18px 40px -16px rgba(15, 16, 20, 0.45);
    --sombra-gaveta: 30px 0 70px -30px rgba(40, 32, 12, 0.4);
    --sombra-qr: 0 0 0 1px rgba(15, 16, 20, 0.14), 0 14px 30px -18px rgba(40, 32, 12, 0.35);

    /* Buscador de cruzeiros: faixa do recorte, desenho de reserva da foto, etiqueta sobre a foto, espera */
    --recorte-fundo: linear-gradient(118deg, #fbf3df 0%, #ffffff 52%, #f2f5f9 100%);
    --recorte-brilho: rgba(224, 182, 92, 0.3);
    --arte-fundo: linear-gradient(168deg, #eef1f6 0%, #e3e8ef 52%, #d8dfe8 100%);
    --arte-traco: rgba(64, 82, 110, 0.34);
    --etiqueta-fundo: rgba(255, 255, 255, 0.94);
    --etiqueta-texto: #0f1014;
    --osso: rgba(15, 16, 20, 0.07);
    --osso-brilho: rgba(15, 16, 20, 0.13);
    --sombra-cartao-alta: 0 2px 4px rgba(40, 32, 12, 0.06), 0 28px 48px -26px rgba(40, 32, 12, 0.36);
    --sombra-ficha: -30px 0 80px -30px rgba(40, 32, 12, 0.4);

    /* O quadro do navio. No claro ele é uma moldura sobre o papel (`--quadro-solto: 1`),
       alinhada à coluna do texto, de cantos arredondados e sombra suave, sem fusão
       para o fundo (foto escura esfumada em fundo claro vira mancha). A foto fica
       inteira lá dentro; se sobrar largura, o céu e o mar continuam dos lados. */
    --quadro-solto: 1;
    --quadro-margem: 32px;
    --quadro-raio: 22px;
    --quadro-encaixe: 1;
    --quadro-respiro: 40px;
    --quadro-respiro-estreito: 28px;
    --quadro-sombra: 0 1px 2px rgba(40, 32, 12, 0.08), 0 22px 44px -30px rgba(40, 32, 12, 0.5);
    --quadro-espera: #e7e1d4;
    --quadro-fusao-lado: 0.07;
    --quadro-faixa: 0.03;
    --quadro-zona-base: 100%;
    --quadro-zona-base-estreita: 100%;
    --quadro-mascara: none;
    --quadro-mascara-estreita: none;
    --aura-mascara-d: none;
    --aura-mascara-e: none;

    /* A arte de reserva (sem foto): amanhecer, navio em silhueta grafite */
    --reserva-ceu-1: #dfe4ea;
    --reserva-ceu-2: #ece4d6;
    --reserva-ceu-3: #f6d9b0;
    --reserva-ceu-4: #f4c28c;
    --reserva-mar-1: #d9bf9f;
    --reserva-mar-2: #b9b6b4;
    --reserva-mar-3: #98a1ac;
    --reserva-brilho-1: rgba(255, 236, 190, 0.95);
    --reserva-brilho-2: rgba(250, 205, 130, 0.4);
    --reserva-reflexo: #fff4d8;
    --reserva-fio: rgba(255, 255, 255, 0.8);
    --reserva-estrelas: 0;
    --reserva-casco: #2b2c33;
    --reserva-luzes: #f8dca0;
    --reserva-onda: #ffffff;
    --reserva-mascara: none;
    --reserva-texto: #0f1014;
    --reserva-texto-2: #45464d;
    --reserva-ouro: #7d5c0c;
    --reserva-linha: rgba(15, 16, 20, 0.3);
    --reserva-sombra: none;
    --reserva-veu: rgba(255, 255, 255, 0);
    --reserva-veu-0: rgba(255, 255, 255, 0);
  }
}

/* ── Tema claro: por escolha da pessoa (mesmo conteúdo do bloco acima) ──── */

:root[data-tema="claro"] {
  color-scheme: light;

  /* Fundo: papel quente */
  --fundo: #f6f3ec;
  --fundo-2: #ffffff;
  --fundo-3: #ffffff;
  --fundo-4: #efebe2;
  --vidro-claro: rgba(15, 16, 20, 0.028);
  --vidro-claro-2: rgba(15, 16, 20, 0.055);

  /* Superfícies: papel branco, sem vidro escuro */
  --painel-fundo: #ffffff;
  --painel-fundo-solido: #ffffff;
  --painel-desfoque: none;
  --cartao-fundo: #ffffff;
  --cartao-ouro-linha: rgba(160, 118, 20, 0.3);
  --cartao-ouro-fundo: linear-gradient(160deg, #fbf3df, #ffffff 62%);
  --lateral-fundo: rgba(255, 255, 255, 0.72);
  --topo-fundo: rgba(246, 243, 236, 0.84);
  --app-brilho-1: rgba(224, 182, 92, 0.16);
  --app-brilho-2: rgba(255, 255, 255, 0.7);
  --flutuante-fundo: #17181d;
  --flutuante-texto: #f6f3ec;
  --cortina: rgba(24, 22, 16, 0.42);
  --estrelas: none;

  /* Texto (sobre --fundo: 17,2:1 · 8,5:1 · 5,3:1) */
  --texto: #0f1014;
  --texto-2: #45464d;
  --texto-3: #62646c;

  /* Linhas (decorativas) e contorno de controle (≥ 3:1 sobre o fundo) */
  --linha: rgba(15, 16, 20, 0.1);
  --linha-2: rgba(15, 16, 20, 0.15);
  --linha-3: rgba(15, 16, 20, 0.28);
  --linha-forte: rgba(15, 16, 20, 0.55);
  --controle-linha: rgba(15, 16, 20, 0.5);
  --controle-linha-2: rgba(15, 16, 20, 0.7);

  /* Campos */
  --campo-fundo: #ffffff;
  --campo-fundo-foco: #ffffff;
  --campo-preenchido: #fbf6e6;

  /* Acento dourado escurecido para ler sobre claro (sobre --fundo: 5,6:1) */
  --ouro: #7d5c0c;
  --ouro-2: #6c4f08;
  --ouro-claro: #5a4206;
  --ouro-fundo: rgba(160, 118, 20, 0.1);
  --ouro-linha: rgba(125, 92, 12, 0.42);
  --ouro-halo: rgba(160, 118, 20, 0.24);
  --selecao: rgba(224, 182, 92, 0.42);

  /* Botão primário: escuro sobre claro */
  --primario-fundo: #0f1014;
  --primario-fundo-2: #2a2b33;
  --primario-tinta: #f6f3ec;
  --primario-sombra: 0 10px 24px -12px rgba(15, 16, 20, 0.55);
  --primario-sombra-2: 0 14px 28px -12px rgba(15, 16, 20, 0.6);
  --primario-anel: rgba(246, 243, 236, 0.3);
  --anel: rgba(15, 16, 20, 0.22);

  /* Estados (todos ≥ 5:1 sobre --fundo e sobre o próprio fundo tingido) */
  --erro: #b3261e;
  --erro-fundo: rgba(179, 38, 30, 0.06);
  --erro-linha: rgba(179, 38, 30, 0.36);
  --erro-halo: rgba(179, 38, 30, 0.18);
  --aviso: #8a5300;
  --aviso-fundo: rgba(176, 112, 0, 0.08);
  --aviso-fundo-2: rgba(176, 112, 0, 0.05);
  --aviso-linha: rgba(138, 83, 0, 0.4);
  --certo: #1b6b43;
  --certo-fundo: rgba(27, 107, 67, 0.07);
  --certo-linha: rgba(27, 107, 67, 0.36);
  --nota: #2c4ea6;
  --nota-fundo: rgba(44, 78, 166, 0.06);
  --nota-linha: rgba(44, 78, 166, 0.3);

  /* Sombras suaves e quentes */
  --sombra-painel: 0 1px 2px rgba(40, 32, 12, 0.05), 0 28px 64px -28px rgba(40, 32, 12, 0.28);
  --sombra-folha: 0 -18px 40px -24px rgba(40, 32, 12, 0.3);
  --sombra-cartao: 0 1px 2px rgba(40, 32, 12, 0.04), 0 14px 34px -22px rgba(40, 32, 12, 0.2);
  --sombra-dialogo: 0 2px 6px rgba(40, 32, 12, 0.06), 0 40px 90px -30px rgba(40, 32, 12, 0.4);
  --sombra-menu: 0 2px 6px rgba(40, 32, 12, 0.06), 0 26px 56px -24px rgba(40, 32, 12, 0.34);
  --sombra-flutuante: 0 18px 40px -16px rgba(15, 16, 20, 0.45);
  --sombra-gaveta: 30px 0 70px -30px rgba(40, 32, 12, 0.4);
  --sombra-qr: 0 0 0 1px rgba(15, 16, 20, 0.14), 0 14px 30px -18px rgba(40, 32, 12, 0.35);

  /* Buscador de cruzeiros: faixa do recorte, desenho de reserva da foto, etiqueta sobre a foto, espera */
  --recorte-fundo: linear-gradient(118deg, #fbf3df 0%, #ffffff 52%, #f2f5f9 100%);
  --recorte-brilho: rgba(224, 182, 92, 0.3);
  --arte-fundo: linear-gradient(168deg, #eef1f6 0%, #e3e8ef 52%, #d8dfe8 100%);
  --arte-traco: rgba(64, 82, 110, 0.34);
  --etiqueta-fundo: rgba(255, 255, 255, 0.94);
  --etiqueta-texto: #0f1014;
  --osso: rgba(15, 16, 20, 0.07);
  --osso-brilho: rgba(15, 16, 20, 0.13);
  --sombra-cartao-alta: 0 2px 4px rgba(40, 32, 12, 0.06), 0 28px 48px -26px rgba(40, 32, 12, 0.36);
  --sombra-ficha: -30px 0 80px -30px rgba(40, 32, 12, 0.4);

  /* O quadro do navio. No claro ele é uma moldura sobre o papel (`--quadro-solto: 1`),
     alinhada à coluna do texto, de cantos arredondados e sombra suave, sem fusão
     para o fundo (foto escura esfumada em fundo claro vira mancha). A foto fica
     inteira lá dentro; se sobrar largura, o céu e o mar continuam dos lados. */
  --quadro-solto: 1;
  --quadro-margem: 32px;
  --quadro-raio: 22px;
  --quadro-encaixe: 1;
  --quadro-respiro: 40px;
  --quadro-respiro-estreito: 28px;
  --quadro-sombra: 0 1px 2px rgba(40, 32, 12, 0.08), 0 22px 44px -30px rgba(40, 32, 12, 0.5);
  --quadro-espera: #e7e1d4;
  --quadro-fusao-lado: 0.07;
  --quadro-faixa: 0.03;
  --quadro-zona-base: 100%;
  --quadro-zona-base-estreita: 100%;
  --quadro-mascara: none;
  --quadro-mascara-estreita: none;
  --aura-mascara-d: none;
  --aura-mascara-e: none;

  /* A arte de reserva (sem foto): amanhecer, navio em silhueta grafite */
  --reserva-ceu-1: #dfe4ea;
  --reserva-ceu-2: #ece4d6;
  --reserva-ceu-3: #f6d9b0;
  --reserva-ceu-4: #f4c28c;
  --reserva-mar-1: #d9bf9f;
  --reserva-mar-2: #b9b6b4;
  --reserva-mar-3: #98a1ac;
  --reserva-brilho-1: rgba(255, 236, 190, 0.95);
  --reserva-brilho-2: rgba(250, 205, 130, 0.4);
  --reserva-reflexo: #fff4d8;
  --reserva-fio: rgba(255, 255, 255, 0.8);
  --reserva-estrelas: 0;
  --reserva-casco: #2b2c33;
  --reserva-luzes: #f8dca0;
  --reserva-onda: #ffffff;
  --reserva-mascara: none;
  --reserva-texto: #0f1014;
  --reserva-texto-2: #45464d;
  --reserva-ouro: #7d5c0c;
  --reserva-linha: rgba(15, 16, 20, 0.3);
  --reserva-sombra: none;
  --reserva-veu: rgba(255, 255, 255, 0);
  --reserva-veu-0: rgba(255, 255, 255, 0);
}