/* ============================================================================ tokens.css — Design system do Dr. Amigo (tema "Plex clínico-tech"). Fonte ÚNICA das cores e fontes: trocar o tema inteiro = editar este arquivo. Cada página faz e usa var(--…). Claro é o padrão; o escuro entra por (1) preferência do SO (prefers-color-scheme) e (2) o toggle, que carimba data-theme no (ver tema.js) — o data-theme vence a media query nos dois sentidos. Mantemos ALIASES dos nomes de token antigos (--teal, --border, --surface2, --red, --amber, --text…) apontando para a paleta nova, para que estilos inline e regras ainda não migradas adotem o tema automaticamente. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@500;600&display=swap'); :root{ /* — tipografia — */ --font-sans:'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-serif:'IBM Plex Serif', Georgia, 'Times New Roman', serif; --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* — cor (claro) — */ --bg:#f1f5fa; --surface:#ffffff; --panel:#f7fafd; --field:#eef3f9; --ink:#131922; --muted:#5b6675; --faint:#8b97a6; --line:#dbe3ec; --line-2:#e7edf4; --primary:#0e7c7b; --primary-strong:#0b6160; --on-primary:#ffffff; --blue:#0f62fe; --blue-soft:#e7efff; --tealwash:#e6f2f1; --ok:#0e7c7b; --warn:#9a6b00; --warn-bg:#fbf1d8; --danger:#da1e28; --danger-bg:#fdeaea; /* — forma — */ --r:8px; --r-sm:6px; --r-xs:4px; --r-lg:16px; --shadow:0 1px 2px rgba(19,40,60,.06), 0 10px 30px rgba(19,40,60,.07); --shadow-sm:0 1px 2px rgba(19,40,60,.06); /* — aliases dos nomes antigos (compat) — */ --text:var(--ink); --border:var(--line); --surface2:var(--field); --teal:var(--primary); --teal-dim:var(--tealwash); --red:var(--danger); --amber:var(--warn); } /* Escuro por preferência do SO (só quando não há escolha explícita no toggle) */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0b0f17; --surface:#131a26; --panel:#0f1521; --field:#182130; --ink:#e8edf4; --muted:#8a97a8; --faint:#66748a; --line:#232d3c; --line-2:#1b2432; --primary:#2cc6be; --primary-strong:#22a9a2; --on-primary:#07211f; --blue:#6e9bff; --blue-soft:#182742; --tealwash:#102826; --ok:#2cc6be; --warn:#e2b45e; --warn-bg:#2a2413; --danger:#f26b72; --danger-bg:#2c1618; --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.45); --shadow-sm:0 1px 2px rgba(0,0,0,.4); } } /* Escolha explícita no toggle vence a media query nos dois sentidos */ :root[data-theme="dark"]{ --bg:#0b0f17; --surface:#131a26; --panel:#0f1521; --field:#182130; --ink:#e8edf4; --muted:#8a97a8; --faint:#66748a; --line:#232d3c; --line-2:#1b2432; --primary:#2cc6be; --primary-strong:#22a9a2; --on-primary:#07211f; --blue:#6e9bff; --blue-soft:#182742; --tealwash:#102826; --ok:#2cc6be; --warn:#e2b45e; --warn-bg:#2a2413; --danger:#f26b72; --danger-bg:#2c1618; --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.45); --shadow-sm:0 1px 2px rgba(0,0,0,.4); } /* ── Badge "Anamnese IA" (comum a todas as páginas) ── */ .badge{ font-family:var(--font-mono); font-size:.62rem; color:var(--primary); background:var(--tealwash); padding:3px 10px; border-radius:20px; letter-spacing:.08em; text-transform:uppercase; border:1px solid color-mix(in srgb, var(--primary) 30%, transparent); } /* ── Toggle de tema (claro/escuro) ── */ .tema-toggle{ display:inline-grid; place-items:center; width:36px; height:36px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--muted); cursor:pointer; padding:0; transition:color .2s, border-color .2s; } .tema-toggle:hover{color:var(--primary); border-color:var(--primary);} .tema-toggle svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;} .tema-toggle .moon{display:none;} .tema-toggle .sun{display:block;} :root[data-theme="dark"] .tema-toggle .sun{display:none;} :root[data-theme="dark"] .tema-toggle .moon{display:block;} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tema-toggle .sun{display:none;} :root:not([data-theme="light"]) .tema-toggle .moon{display:block;} } :focus-visible{outline:2px solid var(--primary); outline-offset:2px;}