/* ============================================================================ /shared/tokens.css — identidade visual única de davidsteagall.com "Relatório de Ensaio em Voo": papel creme + tinta, acento terracota/teal, serifa editorial no texto corrido e mono no aparato técnico (rótulos, dados, legendas de figura, código). Fonte canônica dos valores de cor: web/styles.css (tema do Airship Lab, /airship/). Este arquivo é a ÚNICA fonte para a landing (/), a GNC Bench (/gnc/) e o painel de stats (/stats); o /airship/ mantém os mesmos valores no seu próprio styles.css. Só variáveis + pouquíssimas utilidades .ds-* (opt-in) — nada que colida com o CSS específico de cada página. ============================================================================ */ :root { /* --- superfícies (papel) --- */ --paper: #f4efe6; /* fundo */ --paper2: #faf6ee; /* fundo de bloco/figura, um tom acima */ --surface: #fbf8f1; /* cartão/tabela */ --field: #ffffff; /* --- tinta --- */ --ink: #2b2b2b; --ink-rgb: 43, 43, 43; /* Cinzas de texto SÓLIDOS e quentes — testados >=4.5:1 sobre papel/surface (WCAG AA texto normal). Hierarquia por tom: ink > muted > faint. */ --muted: #675f57; /* texto de apoio (5.5:1) */ --faint: #726a60; /* rótulos/versaletes pequenos (4.6:1) */ /* --- acentos --- */ --orange: #c2571b; /* acento primário: preenchimentos, réguas, números grandes */ --orange-ink: #9c440f; /* laranja p/ TEXTO pequeno e fundo de botão (>=5.6:1 / branco 6.5:1) */ --teal: #0e7c86; /* secundário: rota, barras, preenchimentos */ --teal-ink: #0b6670; /* teal p/ TEXTO/links pequenos (5.8:1) */ --ok: #256b28; /* verde de status como TEXTO (>=4.8:1; o verde vivo do instrumento é --efis-state) */ --warn: #b23a12; /* Fundo de BOTÃO (bloco de cor próprio) — fixo nos dois temas, texto branco AA (não confundir com os tons -ink de TEXTO, que invertem claro/escuro por tema). */ --btn-orange: #9c440f; /* branco 6.5:1 */ --btn-teal: #0b6670; /* branco 6.7:1 */ /* --- linhas / sombra --- */ --line: rgba(43, 43, 43, 0.14); --line-strong: rgba(43, 43, 43, 0.28); --rule-double: rgba(43, 43, 43, 0.30); --shadow: none; /* a linguagem é sem sombra */ /* --- cor de instrumento (EFIS) — SÓ dentro de canvas/gráficos --- */ --efis-set: #a03aa0; /* magenta = comandado (setpoint) */ --efis-state: #2e7d32; /* verde = estado atual */ /* --- tipografia: 3 papéis --- */ --font-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Courier New', monospace; --radius: 3px; --measure: 68ch; /* medida de leitura confortável */ } /* Modo escuro: aplicado quando o tem data-theme="dark". Cada página decide (toggle + preferência do sistema no 1º acesso). Valores conferidos AA sobre #0b0e13. Nos tons -ink, o TEXTO fica CLARO no escuro (invertendo a lógica do tema claro); os tokens --btn-* de fundo de botão NÃO invertem (ficam no :root). */ [data-theme="dark"] { --paper: #0b0e13; --paper2: #151b25; --surface: #151b27; --field: #0f1520; --ink: #e7ecf3; --ink-rgb: 205, 213, 224; --muted: rgba(205, 213, 224, 0.66); /* 6.1:1 */ --faint: rgba(205, 213, 224, 0.58); /* 4.9:1 (rótulos pequenos) */ --orange: #e0692a; --orange-ink: #e0692a; /* laranja p/ TEXTO claro no escuro (5.7:1) */ --teal: #2bb7c6; --teal-ink: #2bb7c6; /* 8:1 */ --ok: #4bd08a; --warn: #ff7a52; --line: rgba(205, 213, 224, 0.16); --line-strong: rgba(205, 213, 224, 0.30); --rule-double: rgba(205, 213, 224, 0.34); /* instrumento EFIS mais vivo sobre fundo escuro (linhas do canvas da Fig.1) */ --efis-set: #d17fd1; /* magenta claro */ --efis-state: #4bd08a; /* verde vivo */ } /* ---- utilidades opt-in (namespace .ds-) ---------------------------------- */ .ds-mono { font-family: var(--font-mono); } .ds-serif { font-family: var(--font-serif); } .ds-tnum { font-variant-numeric: tabular-nums; } /* rótulo em versalete espaçado (eyebrow/caption) */ .ds-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } /* tabela estilo "booktabs": só réguas horizontais, sem zebra */ .ds-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .ds-table th { text-align: left; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line-strong); padding: 7px 10px; } .ds-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } .ds-table tbody tr:last-child td { border-bottom: 2px solid var(--ink); } /* botão de ação */ .ds-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; text-decoration: none; color: #fff; background: var(--btn-orange); border: 1px solid var(--btn-orange); border-radius: var(--radius); padding: 9px 15px; cursor: pointer; } .ds-btn:hover { filter: brightness(0.92); } *:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }