/*
* Catálogo público de escopos MCP — folha de estilo.
*
* Tokens: primary/accent (identidade Senior) extraídos do site institucional
* (site.senior.com.br — tema WordPress/Elementor, cores globais
* `--e-global-color-*`): teal `#00958B`/`#00AF9B`, laranja de ação `#FF8200`.
* Neutros (bg/surface/border/text) são cinza neutro deliberado — sem tingir
* de teal — para ler como ferramenta de engenharia (GitHub/Datadog), não
* dashboard SaaS. `--color-ai`/`--color-glow` (roxo/mint) sobrevivem só como
* acento pontual (hover de botão primário, foco de campo — ver
* `bridge_oauth.py::_LOGIN_STYLES`, que também consome estas variáveis).
* Fonte de texto é a oficial do site (Public Sans, self-hosted — ver
* @font-face abaixo); fonte mono é JetBrains Mono, self-hosted pelo mesmo
* motivo — antes disso `--font-mono` não embutia fonte nenhuma, só a lista
* de fallback do SO. Este repositório não tem acesso ao design system
* oficial da Senior (Figma/tokens) — os pacotes públicos
* `senior_design_system`/`senior_design_tokens` são Flutter-only e não se
* aplicam a uma SPA web. Se a Senior publicar tokens web oficiais, troque só
* os valores aqui; o resto do CSS consome só estas variáveis.
*
* Radius e sombra seguem disciplina deliberada, não o "meio-termo" que sai
* de qualquer scaffold (rounded-lg + shadow-sm em tudo): radius apertado
* (4/6px, ver `--radius-sm/md`, linha Vercel Geist/GitHub Primer) e sombra
* como exceção — repouso é só borda, elevação real (`--shadow-md`) existe
* só no hover do card. Ver comentário antes de `.grid`/`.card` mais abaixo.
*
* Importante: `catalog.css` é compartilhado com a página de login OAuth
* própria (`app/auth/bridge_oauth.py::_page_shell()`, `` direto) — os
* nomes de variável abaixo (`--color-*`/`--radius-*`/`--shadow-*`) não podem
* ser renomeados/removidos sem quebrar aquela página. Valores podem mudar
* livremente; variáveis novas são sempre aditivas.
*
* Tema: `@media (prefers-color-scheme: dark)` é o padrão quando o usuário
* nunca escolheu nada; o toggle da topbar (catalog.js) escreve
* `data-theme="dark"|"light"` no `` e persiste em localStorage — os
* blocos `:root[data-theme=...]` abaixo têm especificidade maior que o
* `:root` de dentro do media query, então sempre vencem quando presentes,
* nos dois sentidos (claro forçado mesmo com SO em modo escuro, e
* vice-versa).
*/
/* Public Sans (SIL OFL 1.1) — variável, subset latin (cobre acentuação
* pt-BR), self-hosted pra não depender de fonts.googleapis.com: a página de
* login roda com CSP `default-src 'none'`, então uma chamada externa aqui
* quebraria a página (ou exigiria abrir a CSP pra um host de terceiro numa
* tela que coleta senha). */
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("fonts/PublicSans-Variable.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
/* JetBrains Mono (SIL OFL 1.1) — mesmo subset latin/pt-BR do Public Sans
* acima, self-hosted pelo mesmo motivo (CSP da página de login). Antes
* disso, `--font-mono` não embutia nenhuma fonte própria — era só a lista
* de fallback do SO (Consolas/SF Mono/Menlo), então nome de tool, path e
* schema (o conteúdo central de uma ferramenta de developer platform)
* renderizavam com o que quer que o visitante tivesse instalado, sem
* nenhuma escolha tipográfica deliberada por trás. Duas estáticas (400/600,
* os únicos pesos usados em `--text-code*`) em vez de variável: mais simples
* de subsetar e menor no total pros dois pesos que existem de fato. */
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
:root {
--color-bg: #f6f7f8;
--color-surface: #ffffff;
--color-surface-alt: #f0f2f4;
--color-surface-hover: #f6f7f8;
--color-border: #e2e5e9;
--color-text: #14181c;
--color-text-muted: #57626b;
--color-text-faint: #838d95;
--color-primary: #00958b;
--color-primary-hover: #00af9b;
--color-primary-contrast: #ffffff;
--color-primary-soft: #e2f5f3;
--color-accent: #ff8200;
--color-accent-hover: #d96d00;
--color-accent-contrast: #ffffff;
--color-ai: #7c54bd;
--color-glow: #12f7d1;
--color-success-bg: #e6f4ea;
--color-success-fg: #1e7a3d;
--color-warning-bg: #fff4e0;
--color-warning-fg: #9a6400;
--color-danger-bg: #fdece1;
--color-danger-fg: #b85e17;
--color-info-bg: #eaf1fb;
--color-info-fg: #35618f;
--color-tag-leitura-bg: var(--color-success-bg);
--color-tag-leitura-fg: var(--color-success-fg);
--color-tag-escrita-bg: var(--color-warning-bg);
--color-tag-escrita-fg: var(--color-warning-fg);
--color-tag-destrutivo-bg: var(--color-danger-bg);
--color-tag-destrutivo-fg: var(--color-danger-fg);
--color-tag-geral-bg: #eef0f4;
--color-tag-geral-fg: #4a4f5b;
--color-stage-dev-bg: #ece7fb;
--color-stage-dev-fg: #5b3fb0;
/* Escala apertada de propósito (4/6px, pill só em botão/scrollbar
* genuinamente circular) — acima de ~8px em UI funcional já lê como
* "template" (linha Vercel/Primer); `--radius-lg` fica de fora dessa
* disciplina porque hoje só a página de login consome (ver nota no topo
* do arquivo), não faz parte da superfície que este catálogo desenha. */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 14px;
/* Repouso é quase sempre borda só, sem sombra (ver `.card`/`.search-box`/
* `.url-box`) — sombra "de ambiente" ligada a tudo é o tell mais comum de
* UI templada. `--shadow-sm` fica reservado (hoje sem consumidor no
* catálogo); `--shadow-md` é a única elevação real, só no hover do card
* (e herdada pelo card de login) — blur curto, quase sem espalhamento,
* pra ler como "levantou 1-2px", não "flutuando numa nuvem". */
--shadow-sm: 0 1px 1px rgba(16, 24, 40, 0.04);
--shadow-md: 0 2px 8px -1px rgba(15, 23, 32, 0.12);
--shadow-lg: 0 8px 20px -10px rgba(15, 23, 32, 0.16);
--font-sans: "Public Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
--max-width: 1120px;
/* Escala tipográfica — nomeada por papel (não por tamanho), pra hierarquia
* ficar consistente em vez de cada tela inventar seu próprio tamanho de
* "título". Identificadores técnicos (nome de tool, path, schema) sempre
* em `--text-code*`; nunca `--text-secondary` só porque é "menos
* importante" (seção 5 do padrão visual: mono é semântico, não estético). */
--text-page-title: 800 1.7rem/1.2 var(--font-sans);
--text-section-title: 700 0.95rem/1.3 var(--font-sans);
--text-component-title: 600 1.05rem/1.3 var(--font-sans);
--text-body: 400 0.95rem/1.55 var(--font-sans);
--text-secondary: 400 0.85rem/1.5 var(--font-sans);
--text-metadata: 600 0.68rem/1.3 var(--font-sans);
--text-code: 400 0.85rem/1.4 var(--font-mono);
--text-code-strong: 600 0.92rem/1.4 var(--font-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #0d1117;
--color-surface: #151b23;
--color-surface-alt: #1c232c;
--color-surface-hover: #1c232c;
--color-border: #2a323c;
--color-text: #eef1f4;
--color-text-muted: #99a3ad;
--color-text-faint: #6c7580;
--color-primary: #33d6b5;
--color-primary-hover: #5eeed6;
--color-primary-contrast: #0b1220;
--color-primary-soft: #103330;
--color-accent: #ff9142;
--color-accent-hover: #ffab6b;
--color-accent-contrast: #0b1220;
--color-ai: #b39ddb;
--color-glow: #12f7d1;
--color-success-bg: #163425;
--color-success-fg: #6fd394;
--color-warning-bg: #3a2c10;
--color-warning-fg: #f0b94f;
--color-danger-bg: #3a2a18;
--color-danger-fg: #ffab6b;
--color-info-bg: #17293d;
--color-info-fg: #7cb0e8;
--color-tag-leitura-bg: var(--color-success-bg);
--color-tag-leitura-fg: var(--color-success-fg);
--color-tag-escrita-bg: var(--color-warning-bg);
--color-tag-escrita-fg: var(--color-warning-fg);
--color-tag-destrutivo-bg: var(--color-danger-bg);
--color-tag-destrutivo-fg: var(--color-danger-fg);
--color-tag-geral-bg: #262933;
--color-tag-geral-fg: #c1c5d0;
--color-stage-dev-bg: #2b2440;
--color-stage-dev-fg: #b8a3f5;
--shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.3);
--shadow-md: 0 2px 8px -1px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 8px 20px -10px rgba(0, 0, 0, 0.45);
}
}
:root[data-theme="dark"] {
--color-bg: #0d1117;
--color-surface: #151b23;
--color-surface-alt: #1c232c;
--color-surface-hover: #1c232c;
--color-border: #2a323c;
--color-text: #eef1f4;
--color-text-muted: #99a3ad;
--color-text-faint: #6c7580;
--color-primary: #33d6b5;
--color-primary-hover: #5eeed6;
--color-primary-contrast: #0b1220;
--color-primary-soft: #103330;
--color-accent: #ff9142;
--color-accent-hover: #ffab6b;
--color-accent-contrast: #0b1220;
--color-ai: #b39ddb;
--color-glow: #12f7d1;
--color-success-bg: #163425;
--color-success-fg: #6fd394;
--color-warning-bg: #3a2c10;
--color-warning-fg: #f0b94f;
--color-danger-bg: #3a2a18;
--color-danger-fg: #ffab6b;
--color-info-bg: #17293d;
--color-info-fg: #7cb0e8;
--color-tag-leitura-bg: var(--color-success-bg);
--color-tag-leitura-fg: var(--color-success-fg);
--color-tag-escrita-bg: var(--color-warning-bg);
--color-tag-escrita-fg: var(--color-warning-fg);
--color-tag-destrutivo-bg: var(--color-danger-bg);
--color-tag-destrutivo-fg: var(--color-danger-fg);
--color-tag-geral-bg: #262933;
--color-tag-geral-fg: #c1c5d0;
--color-stage-dev-bg: #2b2440;
--color-stage-dev-fg: #b8a3f5;
--shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.3);
--shadow-md: 0 2px 8px -1px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 8px 20px -10px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] {
--color-bg: #f6f7f8;
--color-surface: #ffffff;
--color-surface-alt: #f0f2f4;
--color-surface-hover: #f6f7f8;
--color-border: #e2e5e9;
--color-text: #14181c;
--color-text-muted: #57626b;
--color-text-faint: #838d95;
--color-primary: #00958b;
--color-primary-hover: #00af9b;
--color-primary-contrast: #ffffff;
--color-primary-soft: #e2f5f3;
--color-accent: #ff8200;
--color-accent-hover: #d96d00;
--color-accent-contrast: #ffffff;
--color-ai: #7c54bd;
--color-glow: #12f7d1;
--color-success-bg: #e6f4ea;
--color-success-fg: #1e7a3d;
--color-warning-bg: #fff4e0;
--color-warning-fg: #9a6400;
--color-danger-bg: #fdece1;
--color-danger-fg: #b85e17;
--color-info-bg: #eaf1fb;
--color-info-fg: #35618f;
--color-tag-leitura-bg: var(--color-success-bg);
--color-tag-leitura-fg: var(--color-success-fg);
--color-tag-escrita-bg: var(--color-warning-bg);
--color-tag-escrita-fg: var(--color-warning-fg);
--color-tag-destrutivo-bg: var(--color-danger-bg);
--color-tag-destrutivo-fg: var(--color-danger-fg);
--color-tag-geral-bg: #eef0f4;
--color-tag-geral-fg: #4a4f5b;
--color-stage-dev-bg: #ece7fb;
--color-stage-dev-fg: #5b3fb0;
--shadow-sm: 0 1px 1px rgba(16, 24, 40, 0.04);
--shadow-md: 0 2px 8px -1px rgba(15, 23, 32, 0.12);
--shadow-lg: 0 8px 20px -10px rgba(15, 23, 32, 0.16);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
html {
/* Scrollbar com a cara do resto da UI, não a cinza padrão do SO —
* Firefox via `scrollbar-color`, WebKit via os pseudo-elementos abaixo. */
scrollbar-color: var(--color-border) transparent;
scrollbar-width: thin;
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 999px;
border: 2px solid var(--color-bg);
}
*::-webkit-scrollbar-thumb:hover {
background: var(--color-text-faint);
}
::selection {
background: var(--color-primary);
color: var(--color-primary-contrast);
}
a {
color: inherit;
}
button {
font-family: inherit;
}
/* Anel de foco consistente com a marca (não o azul padrão do navegador) em
* todo elemento interativo que não define o próprio tratamento de foco —
* `.search-box`/`.filter-select`/`.card` já respondem ao foco à própria
* maneira (borda/box-shadow) e continuam valendo por serem mais
* específicos que esta regra. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 24px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 10;
}
.topbar__brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-weight: 600;
color: var(--color-text);
}
.topbar__logo {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
object-fit: contain;
flex-shrink: 0;
}
.topbar__title strong {
color: var(--color-primary);
}
.topbar__nav {
display: flex;
align-items: center;
gap: 20px;
font-size: 0.9rem;
}
.topbar__link {
color: var(--color-text-muted);
text-decoration: none;
}
.topbar__link:hover {
color: var(--color-primary);
}
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-muted);
border-radius: 999px;
cursor: pointer;
flex-shrink: 0;
}
.theme-toggle:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.theme-toggle__icon {
width: 16px;
height: 16px;
}
.theme-toggle__icon--moon {
display: none;
}
:root[data-theme="dark"] .theme-toggle__icon--sun {
display: none;
}
:root[data-theme="dark"] .theme-toggle__icon--moon {
display: block;
}
/* ── Layout geral ───────────────────────────────────────────────────────── */
.app {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px 64px;
}
.footer {
text-align: center;
padding: 24px;
color: var(--color-text-faint);
font-size: 0.85rem;
}
/* ── Cabeçalho + busca ──────────────────────────────────────────────────────
* Cabeçalho de página compacto (não um hero de landing page): título, uma
* linha de subtítulo e a busca, sem glow/gradiente de fundo.
*/
.hero {
padding: 28px 0 20px;
}
.hero__title-line {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 4px;
}
/* Marca Senior discreta — o mesmo mark do topbar (logo.svg), só que
* sozinho, sem anéis/glow/inclinação por cursor: identidade visível sem
* virar decoração. */
.hero__mark {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
}
.hero__mark img {
display: block;
width: 100%;
height: 100%;
}
.hero__title {
font: var(--text-page-title);
margin: 0;
letter-spacing: -0.03em;
}
.hero__title span {
color: var(--color-primary);
}
.hero__subtitle {
margin: 0 0 20px;
max-width: 620px;
color: var(--color-text-muted);
font-size: 0.92rem;
}
.search-box {
display: flex;
align-items: center;
gap: 10px;
max-width: 480px;
padding: 8px 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.search-box:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.search-box__icon {
color: var(--color-text-faint);
flex-shrink: 0;
}
.search-box input {
flex: 1;
border: none;
outline: none;
background: transparent;
color: var(--color-text);
font-size: 1rem;
}
/* ── Filtros (dropdowns) ──────────────────────────────────────────────────
* Um