:root {
  --font-app: Nunito, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-body: 17px;
  --font-size-copy: 15px;
  --font-size-copy-compact: 14px;
  --font-size-label: 12px;
  /*
   * UX-154: a legenda de um mosaico não é o rótulo de um campo.
   *
   * O `--font-size-label` é o rótulo que fica por cima de uma caixa onde se escreve, e a
   * [[UX-025]] levanta-o para 16px no telemóvel de propósito — lê-se com o telemóvel na mão.
   *
   * Isto é outra coisa: a legenda em maiúsculas que fica **por cima de um valor** dentro de um
   * mosaico — «DISTÂNCIA / Livre», «TIPO / Sem alvo». Ela tem de ser **mais pequena do que o
   * valor**, porque é o tamanho que diz qual dos dois é a resposta; a crescer com o rótulo
   * ficava maior do que aquilo que legenda, e o «DISTÂNCIA» deixava de caber na célula.
   */
  --font-size-caption: 12px;
  --font-size-turn-action: 12px;
  --font-size-context-help: 14px;

  --color-bg: #f2f7f6;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f9f8;
  --color-input: #eef5f4;
  --color-text: #1a2b28;
  /*
   * UX-149: **o texto secundário tem de se ler, e nove blocos não o deixavam.**
   *
   * Esta ficha pinta as linhas de apoio — «Miguel não participa neste evento», as legendas dos
   * cartões, as datas por baixo dos nomes. Cada paleta escolheu um cinzento **com o tom dela**,
   * e em todos os temas claros o resultado ficou abaixo do mínimo para texto normal: o verde de
   * omissão dava **3,00:1**, o azul 3,35, o laranja 3,53, o vermelho 3,70. Nove dos dezasseis
   * blocos falhavam, e **os que falhavam eram todos claros**: no escuro o mesmo cinzento sobre
   * um fundo escuro tem folga de sobra.
   *
   * Apanhado a 29/09/2026 a medir a paleta vermelha depois de o clube dizer que estava «mais
   * vermelho e rosa do que vermelho e branco»: a queixa era do ambiente, e a conta mostrou que
   * por baixo dela havia texto que não chegava ao mínimo em toda a parte.
   *
   * Cada um foi empurrado **o mínimo** para chegar a 4,5:1 contra o fundo da página **e** contra
   * o cartão — os dois, porque a mesma linha aparece nos dois sítios e a mais fraca é a que
   * manda. O que muda é a luminosidade; o tom de cada paleta fica.
   */
  --color-muted: #607572;
  --color-border: #e0edeb;
  --color-teal: #1bbeaa;
  --color-theme-accent: var(--color-teal);
  /*
   * UX-143: **o que se escreve por cima do destaque.**
   *
   * Estava branco à mão em nove regras, e o branco só se lê sobre um destaque escuro o
   * suficiente. Medido a 29/09/2026: das cinco cores de destaque que a aplicação tinha, **quatro
   * não chegavam** ao mínimo para texto — incluindo o verde de omissão (2,34:1), o laranja
   * (2,83:1 e 2,45:1) e o cinza escuro (2,14:1). Um botão cheio com a cor da casa e letra branca
   * por cima era, na maior parte das paletas, letra que quase não se lê.
   *
   * Fica **branco por omissão**, que é o que estava: isto não muda nenhuma paleta de hoje. O que
   * passa a haver é onde o dizer — uma paleta cujo destaque seja claro escreve-lhe por cima a
   * preto, em vez de ser obrigada a escurecer o destaque até o branco caber.
   */
  /*
   * O verde de omissão pede **preto**: branco sobre ele dá 2,34:1 e preto dá 8,99:1. Foi a
   * medição que decidiu, e não o gosto — e é por isso que cada bloco declara a sua, em vez de
   * herdar esta. Herdada, uma paleta nova ficava com a resposta de outra sem ninguém reparar.
   */
  --color-on-accent: #000000;
  --color-theme-accent-ink: #087f73;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 88%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  --color-yellow: #ffd32d;
  --color-note-accent: var(--color-yellow);
  --color-note-ink: #7a5c00;
  --color-note-text: #5a4400;
  --color-note-surface: #fffbea;
  --color-note-input: #fff7c7;
  --color-note-border: color-mix(in srgb, var(--color-yellow), transparent 60%);
  --color-green: #5cb85c;
  --color-danger: #e12646;
  /* Semantic identities stay stable when the user changes the app palette. */
  --color-objective-accent: #1bbeaa;
  --color-objective-ink: #087f73;
  --color-objective-surface: color-mix(in srgb, var(--color-objective-accent), var(--color-surface) 92%);
  --color-objective-input: color-mix(in srgb, var(--color-objective-accent), var(--color-surface) 86%);
  --color-objective-border: color-mix(in srgb, var(--color-objective-accent), transparent 55%);
  --color-constraint-accent: #e83e54;
  --color-constraint-ink: #a91f37;
  --color-constraint-surface: color-mix(in srgb, var(--color-constraint-accent), var(--color-surface) 93%);
  --color-constraint-input: color-mix(in srgb, var(--color-constraint-accent), var(--color-surface) 87%);
  --color-constraint-border: color-mix(in srgb, var(--color-constraint-accent), transparent 55%);
  --color-observation-accent: #2b86d1;
  --color-observation-ink: #185d98;
  --color-observation-surface: color-mix(in srgb, var(--color-observation-accent), var(--color-surface) 93%);
  --color-observation-input: color-mix(in srgb, var(--color-observation-accent), var(--color-surface) 87%);
  --color-observation-border: color-mix(in srgb, var(--color-observation-accent), transparent 55%);
  --color-golden-accent: #ffd32d;

  /* Shared aliases also inherited by modals mounted directly under body. */
  --shell-bg: var(--color-bg);
  --shell-surface: var(--color-surface);
  --shell-surface-alt: var(--color-surface-alt);
  --shell-card: var(--color-surface);
  --shell-alt: var(--color-surface-alt);
  --shell-input: var(--color-input);
  --shell-text: var(--color-text);
  --shell-ink: var(--color-text);
  --shell-muted: var(--color-muted);
  --shell-border: var(--color-border);
  --shell-line: var(--color-border);
  --shell-teal: var(--color-theme-accent);
  --shell-accent: var(--color-theme-accent);
  --shell-accent-dark: var(--color-theme-accent-ink);
  --shell-accent-soft: var(--color-theme-accent-soft);
  --shell-soft: var(--color-theme-accent-panel);
  --shell-yellow: var(--color-yellow);
  --shell-green: var(--color-green);
  --shell-danger: var(--color-danger);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 2px 10px rgb(0 0 0 / 6%);
  --sidebar-width: 230px;
  --tabbar-height: 72px;
  --mobile-navigation-item-height: 54px;
  --mobile-navigation-top-gap: 6px;
  --mobile-navigation-safe-gap: max(10px, var(--safe-bottom));
  --mobile-navigation-height: calc(var(--mobile-navigation-item-height) + var(--mobile-navigation-top-gap) + var(--mobile-navigation-safe-gap));
  --content-width: 760px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
  --color-bg: #0e1f1c;
  --color-surface: #162622;
  --color-surface-alt: #1a2e2b;
  --color-input: #1a2e2b;
  --color-text: #e8f4f1;
  --color-muted: #719088;
  --color-border: #1e3530;
  --color-theme-accent-ink: #52d8c6;
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  --color-note-ink: #ffd32d;
  --color-note-text: #e8d88a;
  --color-note-surface: #2a2200;
  --color-note-input: #3a3008;
  --color-note-border: color-mix(in srgb, var(--color-yellow), transparent 55%);
  --color-objective-ink: #52d8c6;
  --color-constraint-ink: #ff8b99;
  --color-observation-ink: #83c5f7;
  --shadow-card: 0 2px 12px rgb(0 0 0 / 30%);
  --shell-bg: var(--color-bg);
  --shell-surface: var(--color-surface);
  --shell-surface-alt: var(--color-surface-alt);
  --shell-card: var(--color-surface);
  --shell-alt: var(--color-surface-alt);
  --shell-input: var(--color-input);
  --shell-text: var(--color-text);
  --shell-ink: var(--color-text);
  --shell-muted: var(--color-muted);
  --shell-border: var(--color-border);
  --shell-line: var(--color-border);
  --shell-teal: var(--color-theme-accent);
  --shell-accent: var(--color-theme-accent);
  --shell-accent-dark: var(--color-theme-accent-ink);
  --shell-accent-soft: var(--color-theme-accent-soft);
  --shell-soft: var(--color-theme-accent-panel);
  color-scheme: dark;
}

/*
 * UX-025: no telemóvel o texto de leitura cresce.
 *
 * UX-154: e a **legenda não** — ela não está nesta lista de propósito. O `--font-size-caption`
 * fica nos 12px em todos os ecrãs, porque uma legenda maior do que o valor que legenda deixa de
 * se perceber qual dos dois é a resposta.
 */
@media (max-width: 767px) {
  :root {
    --font-size-copy: 15px;
    --font-size-copy-compact: 15px;
    --font-size-label: 16px;
    --font-size-turn-action: 13px;
    --font-size-context-help: 16px;
  }
}

[data-theme="light"][data-palette="graphite"] {
  --color-bg: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f7f8;
  --color-input: #eceff1;
  --color-text: #1c2024;
  --color-muted: #6a7077;
  --color-border: #dfe3e7;
  --color-teal: #4b5563;
  --color-theme-accent: #4b5563;
  --color-theme-accent-ink: #252b33;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 88%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* Branco sobre #4b5563 dá 7.56:1; este dá 7.56:1. */
  --color-on-accent: #ffffff;
}

[data-theme="dark"][data-palette="graphite"] {
  --color-bg: #0b0d0f;
  --color-surface: #15181c;
  --color-surface-alt: #1c2025;
  --color-input: #1c2025;
  --color-text: #f0f2f4;
  --color-muted: #8b949e;
  --color-border: #282e35;
  --color-teal: #aab2bd;
  --color-theme-accent: #aab2bd;
  --color-theme-accent-ink: #dce1e7;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 86%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* O branco sobre #aab2bd dá 2.14:1; o preto dá 9.81:1. */
  --color-on-accent: #000000;
}

[data-theme="light"][data-palette="blue"] {
  --color-bg: #f2f6fa;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f8fc;
  --color-input: #eaf2f9;
  --color-text: #182733;
  --color-muted: #5f7384;
  --color-border: #dce8f2;
  --color-teal: #2786e8;
  --color-theme-accent: #2786e8;
  --color-theme-accent-ink: #175fa8;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 88%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* O branco sobre #2786e8 dá 3.71:1; o preto dá 5.66:1. */
  --color-on-accent: #000000;
}

[data-theme="dark"][data-palette="blue"] {
  --color-bg: #0c1724;
  --color-surface: #132334;
  --color-surface-alt: #182d42;
  --color-input: #182d42;
  --color-text: #e7f2ff;
  --color-muted: #7892ad;
  --color-border: #203a55;
  --color-teal: #5aa8f5;
  --color-theme-accent: #5aa8f5;
  --color-theme-accent-ink: #8bc4ff;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 86%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* O branco sobre #5aa8f5 dá 2.51:1; o preto dá 8.35:1. */
  --color-on-accent: #000000;
}

/*
 * UX-148: **o vermelho é o destaque, e não o ambiente.**
 *
 * O clube, a olhar para o telemóvel a 29/09/2026: «isto é mais vermelho e rosa do que vermelho
 * e branco». Era: o vermelho estava em **seis** fichas — o fundo da página, a superfície
 * alternativa, as pílulas dos campos, os contornos, o texto apagado e até o quase-preto do texto
 * principal. Com tudo tingido não sobrava branco nenhum contra o qual o vermelho se destacasse,
 * e o que se via era uma página cor-de-rosa com vermelho por cima.
 *
 * Os neutros passam a ser neutros e o `#e24855` fica a ser a única coisa vermelha. O texto
 * apagado sobe de 3,70:1 para 4,91:1 sobre o fundo, que é a outra metade do mesmo problema:
 * um cinzento avermelhado claro não se lê sobre um fundo avermelhado claro.
 *
 * **Só nesta**, a pedido: as outras paletas claras continuam com o tom que têm.
 */
[data-theme="light"][data-palette="red"] {
  --color-bg: #f6f6f7;
  --color-surface: #ffffff;
  --color-surface-alt: #fafafa;
  --color-input: #f1f1f3;
  --color-text: #1c1c1e;
  --color-muted: #6b6b70;
  --color-border: #e4e4e7;
  --color-teal: #e24855;
  --color-theme-accent: #e24855;
  --color-theme-accent-ink: #a92633;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 88%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* O branco sobre #e24855 dá 3.97:1; o preto dá 5.29:1. */
  --color-on-accent: #000000;
}

[data-theme="dark"][data-palette="red"] {
  --color-bg: #211013;
  --color-surface: #30181c;
  --color-surface-alt: #3a1d22;
  --color-input: #3a1d22;
  --color-text: #fff0f2;
  --color-muted: #b8868d;
  --color-border: #51262d;
  --color-teal: #f06470;
  --color-theme-accent: #f06470;
  --color-theme-accent-ink: #ff9aa3;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 86%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* O branco sobre #f06470 dá 3.11:1; o preto dá 6.76:1. */
  --color-on-accent: #000000;
}

[data-theme="light"][data-palette="pink"] {
  --color-bg: #faf3f7;
  --color-surface: #ffffff;
  --color-surface-alt: #fcf5f9;
  --color-input: #f8e8f0;
  --color-text: #2d1a24;
  --color-muted: #836877;
  --color-border: #f0dbe6;
  --color-teal: #d94f91;
  --color-theme-accent: #d94f91;
  --color-theme-accent-ink: #a42b66;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 88%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* O branco sobre #d94f91 dá 3.83:1; o preto dá 5.48:1. */
  --color-on-accent: #000000;
}

[data-theme="dark"][data-palette="pink"] {
  --color-bg: #211019;
  --color-surface: #301722;
  --color-surface-alt: #3b1c2a;
  --color-input: #3b1c2a;
  --color-text: #fff0f7;
  --color-muted: #ba859f;
  --color-border: #52253b;
  --color-teal: #ed6aaa;
  --color-theme-accent: #ed6aaa;
  --color-theme-accent-ink: #ff9bc9;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 86%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* O branco sobre #ed6aaa dá 2.90:1; o preto dá 7.24:1. */
  --color-on-accent: #000000;
}

[data-theme="light"][data-palette="violet"] {
  --color-bg: #f6f3fb;
  --color-surface: #ffffff;
  --color-surface-alt: #f8f5fc;
  --color-input: #efeafb;
  --color-text: #231c31;
  --color-muted: #756b85;
  --color-border: #e5ddf1;
  --color-teal: #7f62d9;
  --color-theme-accent: #7f62d9;
  --color-theme-accent-ink: #5b3db3;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 88%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* Branco sobre #7f62d9 dá 4.51:1; este dá 4.51:1. */
  --color-on-accent: #ffffff;
}

[data-theme="dark"][data-palette="violet"] {
  --color-bg: #171326;
  --color-surface: #211b34;
  --color-surface-alt: #2a2242;
  --color-input: #2a2242;
  --color-text: #f4efff;
  --color-muted: #9184ad;
  --color-border: #3a3057;
  --color-teal: #9a7cf0;
  --color-theme-accent: #9a7cf0;
  --color-theme-accent-ink: #c0adff;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 86%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* O branco sobre #9a7cf0 dá 3.22:1; o preto dá 6.52:1. */
  --color-on-accent: #000000;
}

/*
 * UX-143: **a paleta da casa, tirada do logotipo.**
 *
 * O clube deu as duas versões da marca e disse o que cada uma pede: a preta é para fundo branco,
 * a dourada para fundo escuro. As cores são as do ficheiro, medidas nele: **#c89038** o dourado
 * e **#986818** o dourado escuro.
 *
 * O contraste decidiu o resto, e não o gosto. Sobre branco, o dourado da marca dá **2,8:1** —
 * não serve para texto, serve para encher: botões, marcas, realces. Quem escreve é o preto
 * (17,7:1) e, quando o texto tem de ser da cor da casa, o dourado escuro (4,85:1). Sobre escuro
 * o mesmo dourado sobe a **6,1:1** e passa a poder escrever — que é exactamente o que a versão
 * dourada do logotipo faz.
 *
 * Por isso as duas metades não são a mesma paleta mais clara ou mais escura: em claro o dourado
 * é o preenchimento e o preto é a letra; em escuro o dourado **é** a letra. É o que a marca faz.
 */
[data-theme="light"][data-palette="aljava"] {
  --color-bg: #f7f3ea;
  --color-surface: #ffffff;
  --color-surface-alt: #fbf8f2;
  --color-input: #f3efe4;
  --color-text: #1c1c1e;
  --color-muted: #766e63;
  --color-border: #e6e0d4;
  /*
   * UX-146: **o dourado da marca enche; o dourado escuro escreve.**
   *
   * A primeira versão tinha uma cor só a fazer os dois trabalhos, e dimensionei-a pelo mais
   * difícil — letra pequena —, o que obrigou a escurecê-la até ao fim. O resultado foi o clube
   * a olhar para o telemóvel e a perguntar, a 29/09/2026: «estás a usar os dourados ou só os
   * castanhos? isto parece tudo castanho». Estava: dos seis dourados da marca, o tema claro só
   * usava os **dois mais escuros**, e os três que brilham não apareciam em lado nenhum.
   *
   * São dois trabalhos e passam a ser duas cores, cada uma medida para o que faz:
   *
   *   • **encher** — o botão, o selo, o separador activo — leva o **torrado da marca**
   *     (`#b8862f`), e por cima dele vai **preto** (6,49:1). É o mesmo par do tema escuro, e é
   *     o que permite que a cor da casa seja mesmo a cor da casa: branco por cima dele dava
   *     3,24:1, e era para caber esse branco que a cor estava escurecida.
   *   • **escrever** — as datas, as etiquetas douradas sobre branco — leva o médio-escuro
   *     (`#9c6b1e`, 4,63:1). Mais claro do que o bronze que aqui estava (que dava 6,56:1 e
   *     lia-se castanho), e ainda acima do mínimo para texto normal.
   *
   * O torrado como **letra** sobre branco dá 3,24:1 e por isso não serve para texto pequeno —
   * é essa a fronteira entre as duas, e não o gosto.
   */
  --color-teal: #b8862f;
  --color-theme-accent: #b8862f;
  --color-on-accent: #000000;
  --color-theme-accent-ink: #9c6b1e;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 88%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
}

/*
 * UX-146: e no escuro o fundo é **preto**, que é o contraste que a marca usa.
 *
 * O clube, a 29/09/2026: «no modo escuro era para ter o contraste do preto com o dourado tb».
 * Estava `#121212` — um cinzento muito escuro — e o dourado ficava a flutuar sobre cinzento em
 * vez de sobre o preto do logótipo. O preto passa para o fundo da página, e o cinzento sobe
 * para a superfície dos cartões: assim há preto a sério **e** os cartões continuam a ver-se
 * contra ele.
 */
[data-theme="dark"][data-palette="aljava"] {
  --color-bg: #000000;
  --color-surface: #121212;
  --color-surface-alt: #1c1c1e;
  --color-input: #262428;
  --color-text: #f7f3ea;
  --color-muted: #a89680;
  --color-border: #3a3128;
  /*
   * Aqui o dourado é o **torrado da marca** — o que o clube usa no símbolo da versão escura — e
   * é ele que escreve: 5,26:1 sobre o cartão. Por cima dele vai **preto** (6,49:1), e não
   * branco, que ali daria 3,24:1 — é para isto que a `--color-on-accent` serve.
   */
  --color-teal: #b8862f;
  --color-theme-accent: #b8862f;
  --color-on-accent: #000000;
  /* E o dourado claro para o que precisa de saltar: 9,59:1. */
  --color-theme-accent-ink: #e2be72;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 86%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
}

[data-theme="light"][data-palette="orange"] {
  --color-bg: #faf5f1;
  --color-surface: #ffffff;
  --color-surface-alt: #fcf7f3;
  --color-input: #f8ede5;
  --color-text: #302117;
  --color-muted: #816c5e;
  --color-border: #efdfd3;
  --color-teal: #ed7a32;
  --color-theme-accent: #ed7a32;
  --color-theme-accent-ink: #a94b12;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 88%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* O branco sobre #ed7a32 dá 2.83:1; o preto dá 7.43:1. */
  --color-on-accent: #000000;
}

[data-theme="dark"][data-palette="orange"] {
  --color-bg: #21150d;
  --color-surface: #301e13;
  --color-surface-alt: #3a2618;
  --color-input: #3a2618;
  --color-text: #fff4eb;
  --color-muted: #b6957d;
  --color-border: #513522;
  --color-teal: #f28b49;
  --color-theme-accent: #f28b49;
  --color-theme-accent-ink: #ffb27b;
  --color-theme-accent-soft: color-mix(in srgb, var(--color-theme-accent), transparent 86%);
  --color-theme-accent-panel: color-mix(in srgb, var(--color-theme-accent), var(--color-surface) 92%);
  /* O branco sobre #f28b49 dá 2.45:1; o preto dá 8.56:1. */
  --color-on-accent: #000000;
}

[data-theme][data-palette] {
  --shell-bg: var(--color-bg);
  --shell-surface: var(--color-surface);
  --shell-surface-alt: var(--color-surface-alt);
  --shell-card: var(--color-surface);
  --shell-alt: var(--color-surface-alt);
  --shell-input: var(--color-input);
  --shell-text: var(--color-text);
  --shell-ink: var(--color-text);
  --shell-muted: var(--color-muted);
  --shell-border: var(--color-border);
  --shell-line: var(--color-border);
  --shell-teal: var(--color-theme-accent);
  --shell-accent: var(--color-theme-accent);
  --shell-accent-dark: var(--color-theme-accent-ink);
  --shell-accent-soft: var(--color-theme-accent-soft);
  --shell-soft: var(--color-theme-accent-panel);
}