/* KLIT — Color tokens Base navy (institucional), azul de destaque, neutros, status. Valores-base primeiro, depois aliases semânticos. Temas: :root = light (padrão). [data-theme="dark"] sobrescreve só os aliases semânticos — aplique o atributo no , ou em qualquer subárvore. */ :root { color-scheme: light; /* ---- Base: Navy (institucional) ---- */ --navy-black: #0C121D; /* near-black, deepest backgrounds */ --navy-dark: #1E2B40; /* dark navy surface */ --navy-mid: #334663; /* mid navy */ --steel: #4B6387; /* steel blue */ /* ---- Accent: Blue (CTA, links, highlights) ---- */ --blue-pale: #A3C5F1; /* primary accent — matches logo */ --blue-2: #7EB3FF; /* secondary accent */ --blue-3: #83A2CD; /* muted accent */ --blue-ink: #2E6BB8; /* darker blue for text/links on light bg (AA) */ /* ---- Neutrals ---- */ --white: #FFFFFF; --g50: #F8FAFC; --g100: #F1F5F9; --g200: #E2E8F0; --g250: #DEE5ED; /* between g300 and g100 — soft mist */ --g300: #CBD5E1; --g400: #94A3B8; --g500: #64748B; --g600: #475569; --g700: #334155; --g900: #0F172A; /* ---- Status (sempre pareie cor com ícone, nunca cor sozinha) ---- */ --ok: #22C55E; --ok-bg: #DCFCE7; --ok-fg: #15803D; --info: #A3C5F1; --info-bg: #E5EEFB; --info-fg: var(--blue-ink); --warn: #F59E0B; --warn-bg: #FEF3C7; --warn-fg: #B45309; --err: #EF4444; --err-bg: #FEE2E2; --err-fg: #B91C1C; --neutral: #94A3B8; --neutral-fg: var(--g600); /* ================= Aliases semânticos (tema light) ================= */ /* Surfaces */ --surface-page: var(--g50); /* app/page background */ --surface-card: var(--white); /* cards, panels */ --surface-sunken: var(--g100); /* inset / table headers */ --surface-input: var(--white); /* campos de formulário */ --surface-inverse: var(--navy-dark); /* dark sections */ --surface-inverse-deep: var(--navy-black); --overlay: rgba(12,18,29,0.5); /* backdrop de dialogs */ /* ---- Alternating section rhythm (claro ↔ escuro) ---- Use these as the background of full-width page sections. Alternate: section-light → section-dark → section-light → section-dark … Pair each with its matching --on-* text colors below. */ --section-light: var(--g50); /* #F8FAFC — light section */ --section-light-alt: var(--white); /* optional 2nd light tone */ --section-dark: var(--navy-dark); /* #1E2B40 — dark counterpoint */ --section-dark-deep: var(--navy-black); /* #0C121D — deepest (hero) */ /* Text on light sections */ --on-light-strong: var(--g900); /* headings */ --on-light-body: var(--g700); /* body */ --on-light-muted: var(--g600); /* secondary */ --on-light-accent: var(--blue-ink); /* links / eyebrow on light */ /* Text on dark sections */ --on-dark-strong: var(--white); /* headings */ --on-dark-body: var(--text-inverse-muted); /* body */ --on-dark-accent: var(--blue-pale); /* links / eyebrow on dark */ /* Text */ --text-strong: var(--g900); /* headings, primary text */ --text-body: var(--g700); /* body copy */ --text-muted: var(--g600); /* secondary text */ --text-subtle: var(--g400); /* captions, placeholders */ --text-inverse: var(--white); /* text on dark surfaces */ --text-inverse-muted: #B7C4D6; /* muted text on dark */ --text-link: var(--blue-ink); /* Accent (interactive) */ --accent: var(--blue-pale); --accent-strong: var(--blue-ink); --accent-on-dark: var(--blue-pale); /* accent used on navy surfaces */ --accent-soft: var(--info-bg); /* hover/selected de baixa ênfase */ --neutral-soft: var(--g100); /* chips/hover neutros */ /* Ênfase sólida (Button primary, Badge accent) */ --accent-contrast-bg: var(--navy-dark); --accent-contrast-bg-hover: var(--blue-ink); --accent-contrast-fg: var(--white); /* Borders & dividers */ --border: var(--g300); --border-subtle: var(--g200); --border-strong: var(--g400); --border-inverse: rgba(163,197,241,0.22); /* hairline on navy */ /* Focus ring */ --focus-ring: rgba(126,179,255,0.55); } /* ================= Tema dark ================= */ [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --surface-page: var(--navy-black); --surface-card: var(--navy-dark); --surface-sunken: #16202F; --surface-input: #16202F; --overlay: rgba(0,0,0,0.6); /* Text */ --text-strong: var(--white); --text-body: #C6D1E0; --text-muted: #93A5BD; --text-subtle: #64748B; --text-link: var(--blue-pale); /* Accent */ --accent-strong: var(--blue-2); --accent-soft: rgba(163,197,241,0.14); --neutral-soft: rgba(255,255,255,0.07); --accent-contrast-bg: var(--blue-pale); --accent-contrast-bg-hover: var(--blue-2); --accent-contrast-fg: var(--navy-black); /* Borders */ --border: rgba(163,197,241,0.20); --border-subtle: rgba(163,197,241,0.10); --border-strong: rgba(163,197,241,0.34); /* Status — fundos translúcidos + texto claro */ --ok-bg: rgba(34,197,94,0.16); --ok-fg: #4ADE80; --info-bg: rgba(163,197,241,0.16); --info-fg: var(--blue-pale); --warn-bg: rgba(245,158,11,0.16); --warn-fg: #FBBF24; --err-bg: rgba(239,68,68,0.16); --err-fg: #F87171; --neutral-fg: var(--g400); }