/* ========================================================================== Morgana Ops — Color tokens (v2 — "cinza neutro") Raw palette + semantic aliases. Light is the default (:root); dark is opt-in via [data-theme="dark"] or .mo-dark. Neutral-gray surfaces replaced the old blue-tinted slate/steel backgrounds (2026-07, approved via the "Meu Sistema" sample screens). Terracotta remains the ONLY accent. Backup of the previous values: backup/tokens-v1/colors.css ========================================================================== */ :root { /* ---- Raw palette ---- */ --mo-color-ink: #0A0D14; /* brand ink — logo on light; legacy */ --mo-color-slate: #1C2536; /* legacy — no longer used for surfaces */ --mo-color-terracotta: #A95C47; /* accent — the single accent */ --mo-color-steel: #64748B; /* legacy — no longer used for text/borders */ --mo-color-paper: #F8F9FA; /* foreground on dark */ /* ---- Neutral gray scale (v2) ---- */ --mo-gray-0: #FFFFFF; --mo-gray-1: #FAFAFA; --mo-gray-2: #F4F4F4; --mo-gray-3: #E7E7E7; --mo-gray-4: #DBDBDB; --mo-gray-6: #8A8A8A; --mo-gray-7: #575757; --mo-gray-9: #171717; /* ---- Semantic aliases — LIGHT theme (default) ---- */ --mo-bg: var(--mo-gray-1); --mo-surface: var(--mo-gray-0); --mo-surface-sunken: var(--mo-gray-2); --mo-surface-raised: var(--mo-gray-0); --mo-accent: var(--mo-color-terracotta); --mo-accent-hover: #94503E; --mo-text: var(--mo-gray-9); --mo-text-muted: var(--mo-gray-7); --mo-border-subtle: var(--mo-gray-3); --mo-border-strong: var(--mo-gray-4); --mo-ghost-hover: rgba(0, 0, 0, 0.045); --mo-row-hover: rgba(0, 0, 0, 0.03); --mo-field: var(--mo-surface); --mo-field-disabled-bg: var(--mo-surface-sunken); --mo-field-disabled-text: #A3A3A3; --mo-placeholder: #9B9B9B; /* ---- State colors (shared chromatic system, oklch) ---- */ --mo-success: oklch(0.62 0.09 150); --mo-warning: oklch(0.72 0.10 75); --mo-danger: oklch(0.58 0.12 28); --mo-info: oklch(0.62 0.07 245); --mo-danger-solid: oklch(0.55 0.13 28); --mo-state-success-text: oklch(0.50 0.10 150); --mo-state-warning-text: oklch(0.50 0.10 70); --mo-state-danger-text: oklch(0.52 0.13 28); --mo-state-info-text: oklch(0.48 0.08 245); /* translucent tints for badges/highlights */ --mo-success-bg: color-mix(in oklab, oklch(0.62 0.09 150) 16%, transparent); --mo-warning-bg: color-mix(in oklab, oklch(0.72 0.10 75) 16%, transparent); --mo-danger-bg: color-mix(in oklab, oklch(0.58 0.12 28) 16%, transparent); --mo-info-bg: color-mix(in oklab, oklch(0.62 0.07 245) 16%, transparent); --mo-accent-bg: color-mix(in oklab, var(--mo-color-terracotta) 16%, transparent); } /* ========================================================================== DARK theme — apply with or class .mo-dark. Neutral graphite (no blue tint). Raw palette + typography never change; only semantic mapping, border colors and shadow intensity do. ========================================================================== */ [data-theme="dark"], .mo-dark { --mo-bg: #131313; --mo-surface: #1C1C1C; --mo-surface-sunken: #0D0D0D; --mo-surface-raised: #262626; --mo-accent: var(--mo-color-terracotta); --mo-accent-hover: #B8694F; --mo-text: #F2F2F2; --mo-text-muted: #9B9B9B; --mo-border-subtle: rgba(255, 255, 255, 0.10); --mo-border-strong: rgba(255, 255, 255, 0.18); --mo-ghost-hover: rgba(255, 255, 255, 0.06); --mo-row-hover: rgba(255, 255, 255, 0.04); --mo-field: var(--mo-surface); --mo-field-disabled-bg: var(--mo-surface-sunken); --mo-field-disabled-text: #6E6E6E; --mo-placeholder: #7A7A7A; --mo-danger-solid: oklch(0.58 0.13 28); --mo-state-success-text: oklch(0.72 0.10 150); --mo-state-warning-text: oklch(0.78 0.10 70); --mo-state-danger-text: oklch(0.70 0.13 28); --mo-state-info-text: oklch(0.68 0.08 245); }