/* Tokens de cor — design system "laudo" (docs/design-system.html). Dois níveis: paleta base por matiz (OKLCH, convertida dos hexes aprovados via sintaxe relativa) e tokens semânticos. Componentes usam SÓ os semânticos. Claro e escuro vivem no mesmo par, via light-dark(): quem escolhe é o `color-scheme` — `light dark` (base.css) segue o sistema operacional, e o atributo data-theme no força um dos dois. Assim nenhum token existe só dentro de um @media, que é como um tema acaba com texto de um e fundo do outro. */ :root { /* ── paleta base ─────────────────────────────────────── */ --white: #FFFFFF; --slate-100: oklch(from #F2F5F8 l c h); --slate-150: oklch(from #E9EEF3 l c h); --slate-175: oklch(from #E5ECF2 l c h); --slate-200: oklch(from #DBE3EA l c h); --slate-300: oklch(from #B9C6D1 l c h); --slate-400: oklch(from #9DAEBB l c h); --slate-450: oklch(from #8CA0AE l c h); --slate-550: oklch(from #64778A l c h); --slate-600: oklch(from #566875 l c h); --slate-700: oklch(from #3A4C5E l c h); --slate-800: oklch(from #24303B l c h); --slate-850: oklch(from #1C2731 l c h); --slate-875: oklch(from #16232E l c h); --slate-900: oklch(from #131B22 l c h); --slate-950: oklch(from #0E141A l c h); --blue-100: oklch(from #E4EFFC l c h); --blue-300: oklch(from #7FB3F0 l c h); --blue-400: oklch(from #5C9EEA l c h); --blue-500: oklch(from #3F86DC l c h); --blue-600: oklch(from #1C6FD4 l c h); --blue-700: oklch(from #1559AE l c h); --blue-900: oklch(from #1A2C42 l c h); --blue-950: oklch(from #0B1622 l c h); --red-100: oklch(from #FBE9E6 l c h); --red-400: oklch(from #E5766A l c h); --red-600: oklch(from #C0392B l c h); --red-900: oklch(from #3A1F1B l c h); --amber-100: oklch(from #FBF0D9 l c h); --amber-400: oklch(from #DFAE54 l c h); --amber-700: oklch(from #94660A l c h); --amber-900: oklch(from #33290F l c h); --green-100: oklch(from #E1F3E8 l c h); --green-400: oklch(from #64C08D l c h); --green-600: oklch(from #3E9E6B l c h); --green-700: oklch(from #1E7A4E l c h); --green-900: oklch(from #16301F l c h); /* ── semânticos ───────────────────────────────────────── */ --bg: light-dark(var(--slate-100), var(--slate-950)); --surface: light-dark(var(--white), var(--slate-900)); --surface-2: light-dark(var(--slate-150), var(--slate-850)); --ink: light-dark(var(--slate-875), var(--slate-175)); --ink-muted: light-dark(var(--slate-600), var(--slate-400)); --ink-faint: light-dark(var(--slate-450), var(--slate-550)); --line: light-dark(var(--slate-200), var(--slate-800)); --line-strong: light-dark(var(--slate-300), var(--slate-700)); --accent: light-dark(var(--blue-600), var(--blue-400)); --accent-hover: light-dark(var(--blue-700), var(--blue-300)); --accent-ink: light-dark(var(--white), var(--blue-950)); --accent-soft: light-dark(var(--blue-100), var(--blue-900)); /* estado: vermelho = prazo, âmbar = espera, verde = compareceu */ --urgent: light-dark(var(--red-600), var(--red-400)); --urgent-soft: light-dark(var(--red-100), var(--red-900)); --warn: light-dark(var(--amber-700), var(--amber-400)); --warn-soft: light-dark(var(--amber-100), var(--amber-900)); --ok: light-dark(var(--green-700), var(--green-400)); --ok-soft: light-dark(var(--green-100), var(--green-900)); /* fundo do ::backdrop — o modal é folha flutuante sobre a folha */ --scrim: light-dark(rgb(22 35 46 / .45), rgb(0 0 0 / .6)); /* ── gráficos ───────────────────────────────────────── As séries do relatório são os próprios estados do app: verde é exame marcado, azul é trabalho que falta. No escuro os tons descem um degrau, porque o token de texto é claro demais para virar preenchimento. Os valores abaixo passaram no validador de paleta (faixa de luminosidade, piso de croma, separação sob daltonismo, contraste contra a folha) nos dois temas — ver a seção 4.1 de docs/memorial-tecnico.html. A rampa do calendário fica fora da paleta base de propósito: é uma escala, não uma matiz reutilizável. Ajustar no olho quebra a validação; revalidar antes. */ --chart-marcados: light-dark(var(--green-700), var(--green-600)); --chart-faltantes: light-dark(var(--blue-600), var(--blue-500)); --heat-1: light-dark(#7CBE9C, #2A6049); --heat-2: light-dark(#4E9E79, #3A835F); --heat-3: light-dark(#2A8055, #4BA378); --heat-4: light-dark(#14603D, #63C494); /* a tinta que passa em contraste sobre cada degrau */ --heat-1-ink: light-dark(var(--slate-875), var(--white)); --heat-2-ink: light-dark(var(--slate-875), var(--white)); --heat-3-ink: light-dark(var(--white), var(--slate-950)); --heat-4-ink: light-dark(var(--white), var(--slate-950)); /* Régua de espera — rampa ordinal de uma matiz só. Azul porque o relatório já usa azul para "trabalho que falta", e a fila é exatamente isso. Passou no validador de paleta em modo ordinal (monotonicidade de luminosidade, ΔL ≥ .06 entre degraus, contraste da ponta clara, matiz única) nos dois temas. O quarto passo NÃO é degrau da rampa: passar do limite de encalhe é estado, não grau, e por isso vem de --urgent — vermelho continua sendo só prazo. Mexer num degrau sem revalidar quebra a escala. */ --wait-1: light-dark(var(--blue-300), var(--blue-600)); --wait-2: light-dark(var(--blue-500), var(--blue-400)); --wait-3: var(--urgent); /* ── forma e tipografia ───────────────────────────────── */ --r: 4px; --r-lg: 8px; --sans: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* Tema forçado — usado pelo alternador do /styleguide. Sem data-theme, o color-scheme de base.css segue o sistema operacional. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }