/* ============================================================================ TOKENS — Sepse na Era da IA · I Simpósio Paraibano de Sepse (AMIB-PB) ---------------------------------------------------------------------------- Fonte de verdade: 02-arquitetura/02-design-system.md §4.2, §4.3, §4.4, §4.5. Este arquivo NÃO inventa token. Se falta um valor aqui, ele falta lá primeiro. O deck nasce escuro, e o escuro é derivado da paleta de sidebar do site do simpósio (#0a1e3d / #14315c / #1c3d6e) — é a identidade do evento virada do avesso, não um dark genérico. ========================================================================== */ /* --- Custom properties registradas (animáveis pela Web Animations API) ----- */ @property --split { syntax: ''; initial-value: 50%; inherits: true; } @property --fog-d { syntax: ''; initial-value: 1; inherits: true; } @property --fog-w { syntax: ''; initial-value: 420px; inherits: true; } :root { /* ── SUPERFÍCIES ──────────────────────────────────────────────────────── Derivadas de --sidebar do site. --bg-900 é mais fundo que o site para dar range ao glow dos elementos emissivos. */ --bg-900: #050B18; --bg-800: #0A1E3D; /* = --foreground do site. Superfície primária. */ --bg-700: #14315C; /* = --sidebar-accent. Cards elevados. */ --bg-600: #1C3D6E; /* = --sidebar-border. Bordas e divisórias. */ --bg-glass: rgba(255, 255, 255, .045); --stroke: rgba(255, 255, 255, .09); --stroke-hi: rgba(255, 255, 255, .18); /* ── MARCA ──────────────────────────────────────────────────────────── */ --primary: #0B4DA6; /* azul institucional AMIB — estrutura, chrome */ --primary-lift: #2F6FC4; /* = --chart-2 — hover, gradiente */ --primary-soft: #5A90D6; /* = --chart-3 — TEXTO azul sobre navy */ --accent: #E63946; /* vermelho-sangue — URGÊNCIA, o dado que importa */ --accent-soft: #FF6B75; /* accent legível como texto corrido sobre navy */ /* ── TEXTO ───────────────────────────────────────────────────────────── */ --txt-high: #EEF3FA; /* = --secondary do site. NUNCA #FFF puro (halação) */ --txt-mid: #B9C6DA; --txt-low: #8194B0; /* clareado a partir de --muted-foreground #5b6b85 */ --txt-dim: #5B6B85; /* só ornamento. NUNCA para conteúdo. */ /* ── SEMÂNTICAS ──────────────────────────────────────────────────────── */ --ok: #22C55E; --warn: #F2A65A; --crit: #E63946; /* ── SUB-PALETA · MUNDO MÉDICO (esquerda) ──────────────────────────── Metáfora: PAPEL, FORMULÁRIO, CARIMBO. Frio, opaco, sem glow. */ --med-bg: #0E1626; --med-surface: #16233A; --med-slab: #3A4A66; --med-slab-2: #2C3A52; --med-border: #2A3A55; --med-ink: #D6DFEC; /* "tinta" nos formulários */ --med-stamp: #F2A65A; /* âmbar: carimbo, tempo correndo */ --med-rule: rgba(255, 255, 255, .035);/* pauta do papel */ /* ── SUB-PALETA · MUNDO IA (direita) ───────────────────────────────── Metáfora: VIDRO EMISSIVO, GRADE TÉCNICA, LUZ. O turquesa vem do mar de João Pessoa da imagem OG do evento — a cor "tecnológica" não é inventada, já está na identidade do simpósio. */ --ai-core: #38BDF8; --ai-glow: #7DE2E6; --ai-deep: #6E56F8; --ai-grid: rgba(125, 226, 230, .06); --ai-edge: rgba(125, 226, 230, .22); /* ── NÉVOA ───────────────────────────────────────────────────────────── */ --fog: #A0ADC0; /* ── DADOS / GRÁFICOS (rampa oficial do simpósio) ──────────────────── Vermelho reservado para "a série que importa": mortalidade, alerta. */ --chart-1: #0B4DA6; --chart-2: #2F6FC4; --chart-3: #5A90D6; --chart-4: #E63946; --chart-5: #0A1E3D; /* ── TIPOGRAFIA ─────────────────────────────────────────────────────── Piso de 32px derivado da regra ergonômica de projeção (altura de caractere >= 2% da altura projetada): 1080 x 0,02 = 21,6px de cap-height; cap-height da Inter = 0,727em; 21,6/0,727 = 29,7px -> 32px. Tudo em rem sobre o palco, que define 1rem = 16px @1080 via cqh. */ --font-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fs-dxl: 11.25rem; /* 180px — número único de tela cheia (S20) */ --fs-d1: 8.25rem; /* 132px — números-choque (S19) */ --fs-d2: 6rem; /* 96px — título de ato / palavra isolada */ --fs-d3: 4.5rem; /* 72px — título de cena */ --fs-h1: 3.5rem; /* 56px — título de bloco */ --fs-h2: 2.75rem; /* 44px — subtítulo, item forte */ --fs-lg: 2.25rem; /* 36px — frase de apoio */ --fs-body: 2rem; /* 32px — PISO OPERACIONAL. Todo conteúdo. */ --fs-mono: 2.5rem; /* 40px — valores, cronômetros (tabular) */ --fs-label: 1.5rem; /* 24px — eyebrow. SEMPRE uppercase (glifo = 24px) */ --fs-ref: 1.625rem;/* 26px — só referência. Sub-legível por decisão. */ --lh-dxl: .88; --lh-d1: .92; --lh-d2: 1; --lh-d3: 1.06; --lh-h1: 1.16; --lh-h2: 1.22; --lh-lg: 1.35; --lh-body: 1.42; --tr-dxl: -.04em; --tr-d1: -.035em; --tr-d2: -.028em; --tr-d3: -.022em; --tr-h1: -.015em; --tr-h2: -.008em; --tr-label: .12em; /* ── ESPAÇAMENTO — baseline de 8px, tudo múltiplo ────────────────────── */ --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 8rem; /* Grid do palco: 1920x1080, margem H 96px, margem V 72px, 12 col, gutter 32 */ --stage-w: 1920; --stage-h: 1080; --margin-h: 6rem; /* 96px */ --margin-v: 4.5rem; /* 72px */ /* FAIXA DO RODAPÉ DE REFERÊNCIA. .scene__ref ancora em calc(--margin-v - 2.5rem) = 2rem do fundo e CRESCE PARA CIMA: com duas linhas de .t-ref (2 × 2,1125rem = 4,225rem) o topo dela chega a 6,225rem do fundo — 0,225rem ACIMA da linha de --margin-v, que é onde o conteúdo da cena termina. --ref-band é esse teto mais um respiro, e é o PISO de qualquer coisa que queira morar no canto inferior sem imprimir sobre a citação. No modo mobile é reafirmado como 0 em stage.css — ver o motivo lá. ⚠ dimensionado para DUAS linhas de referência; três linhas (S19, S20, S23) pedem 8,5rem — nenhuma delas tem chip hoje. */ --ref-band: calc(var(--margin-v) + var(--sp-5)); /* 120px */ /* FAIXA DE PROVAS — a mesma função de --ref-band para as cenas em que a citação virou card clicável (12/08/2026, ver css/scenes.css › .provas). O card tem duas linhas de autoria mais duas de título; medido, isso dá 144px de altura, e a faixa ancora a 24px do fundo. 176px é esse teto. Só quem tem .provas reserva isto — as demais continuam em --ref-band. */ --provas-band: calc(var(--margin-v) + var(--sp-7) + var(--sp-1)); /* 176px */ /* E quando a faixa vem com NOTA METODOLÓGICA por cima (S18, S19, S28, S29): mais uma linha de .t-ref (26px × 1,3) e o respiro dela. */ --provas-band-nota: calc(var(--provas-band) + var(--sp-4) + var(--sp-1)); /* 216px */ --gutter: 2rem; /* 32px */ /* ── RAIO — proporção do site (--radius .5rem) escalada 1,5x, porque os elementos são muito maiores na projeção ─────────────────────────── */ --r-sm: .5rem; /* 8px — mundo médico: papel tem canto duro */ --r-md: .75rem; /* 12px */ --r-lg: 1.125rem; /* 18px — raio dominante (o rounded-xl do site, escalado) */ --r-xl: 1.5rem; /* 24px — painéis grandes, cards de QR */ --r-full: 999px; /* ── ELEVAÇÃO — em fundo escuro, sombra não existe: stroke + glow ────── */ --elev-1: 0 0 0 1px var(--stroke), 0 2px 20px -8px rgba(0,0,0,.7); --elev-2: 0 0 0 1px var(--stroke), 0 18px 48px -18px rgba(0,0,0,.85); --elev-3: 0 0 0 1px var(--stroke-hi), 0 40px 90px -28px rgba(0,0,0,.9); --glow-ai: 0 0 44px -10px var(--ai-core), inset 0 1px 0 rgba(255,255,255,.10); --glow-alert: 0 0 60px -14px var(--accent), inset 0 0 0 1px rgba(230,57,70,.42); /* ── MOVIMENTO ───────────────────────────────────────────────────────── */ --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.76, 0, .24, 1); --ease-overshoot: cubic-bezier(.34, 1.28, .42, 1); --dur-fast: 320ms; --dur-base: 600ms; --dur-slow: 900ms; } /* ============================================================================ MODO CLARO DE EMERGÊNCIA — Shift+L Para o caso de o auditório ser claro demais ou o projetor ter contraste ruim. Inverte superfície e texto; marca e semânticas permanecem. ========================================================================== */ :root[data-theme="light"] { --bg-900: #FCFCFC; --bg-800: #FFFFFF; --bg-700: #EEF3FA; --bg-600: #D7E0EC; --bg-glass: rgba(10, 30, 61, .04); --stroke: #D7E0EC; --stroke-hi: #BCCADF; --txt-high: #0A1E3D; --txt-mid: #334A6B; --txt-low: #5B6B85; --txt-dim: #8A9AB2; --primary-soft: #0B4DA6; /* no claro o azul institucional volta a ser legível */ --accent-soft: #C22B37; /* escurece para passar em AA sobre branco */ --med-bg: #F3F6FB; --med-surface: #FFFFFF; --med-ink: #0A1E3D; --med-border: #D7E0EC; --med-rule: rgba(10,30,61,.05); --ai-core: #0284C7; --ai-glow: #0E7490; --ai-edge: rgba(2,132,199,.28); --ai-grid: rgba(2,132,199,.07); --fog: #8A99AD; /* glow não existe em fundo claro — vira elevação */ --glow-ai: var(--elev-2); --glow-alert: 0 0 0 1px rgba(230,57,70,.5), 0 18px 48px -18px rgba(230,57,70,.35); --elev-1: 0 1px 2px rgba(10,30,61,.06), 0 0 0 1px var(--stroke); --elev-2: 0 8px 24px -8px rgba(10,30,61,.12), 0 0 0 1px var(--stroke); --elev-3: 0 24px 56px -20px rgba(10,30,61,.18), 0 0 0 1px var(--stroke-hi); } /* ============================================================================ DEGRADAÇÃO DE PERFORMANCE — data-perf, escrito pelo PerfGuard (§3.7) 0 = completo · 1 = médio · 2 = mínimo. Ver js/perfguard.js. ========================================================================== */ :root[data-perf="1"] { --fog-blur: 10px; } :root[data-perf="2"] { --fog-blur: 0px; }