/* =========================================================================== machado.group — Color --------------------------------------------------------------------------- Two layers: 1. PALETTE — raw, named values. Never reference these directly in UI. 2. SEMANTIC — role aliases. DARK is the default (`:root`, applied unless `data-theme="light"` is set); LIGHT is the opt-out. Components reference ONLY these. Mood: warm paper light, near-black dark, a single WHITE accent (the one bold color — orange RETIRED 2026-07-24, removed 2026-07-27), a SIGNAL BLUE as the secondary house colour (gradient white → blue → cool cyan), and red / green / yellow status "luzinhas". =========================================================================== */ :root { /* ---- PALETTE : warm neutral (ink) scale ------------------------------- */ --c-white: #ffffff; --c-paper: #f4f2ec; /* bone — default page in light */ --c-paper-2: #fcfbf8; /* warm white — raised card */ --c-sand: #edeae2; /* cream — sunken / alt card */ --c-sand-2: #e4e0d6; /* deeper cream */ --c-gray-200: #d8d4c9; /* hairline-on-cream */ --c-gray-300: #bcb7aa; --c-gray-400: #928e83; --c-gray-500: #6f6b62; --c-gray-600: #524f49; --c-gray-700: #3a3833; --c-gray-800: #242320; --c-gray-900: #141312; /* ink */ --c-black: #0c0c0c; /* near-black — dark page */ --c-ink-2: #121212; /* dark raised card */ --c-ink-0: #080808; /* dark sunken */ /* ---- PALETTE : signal blue (the secondary house colour) --------------- Sampled from refs/index.md — uploads/ref-blue-border.png: a rim that runs near-white → bright blue → deep blue, with a cool cyan tail. This is the only chromatic family in the system besides status. */ --c-signal-050: #eaf2ff; --c-signal-100: #c1dcfc; /* light rim */ --c-signal-200: #9bc0fa; --c-signal-300: #5992f7; --c-signal-500: #2f6bf5; /* SIGNAL core */ --c-signal-600: #2350b3; --c-signal-700: #1d459f; /* deep */ --c-signal-cyan: #aae8fa; /* cool tail of the gradient */ /* ---- PALETTE : status -------------------------------------------------- */ --c-red-100: #fcdad8; --c-red-500: #e5403b; --c-red-600: #c8302c; --c-green-100: #d8ecdd; --c-green-500: #3fa45e; --c-green-600: #2f8049; --c-yellow-100: #fbedc6; --c-yellow-500: #f5b81e; --c-yellow-600: #cf9606; /* ---- PALETTE : deck blue (dark-mode editorial accent) ----------------- */ --c-blue-300: #bcb4e0; /* periwinkle */ --c-blue-500: #3b36f0; /* electric */ /* ---- PALETTE : azure (the "working" luzinha — vivid blue light) ------- */ --c-azure-100: #d8e8ff; --c-azure-300: #bcd9fb; /* working light border (locked default) */ --c-azure-400: #3b8bff; --c-azure-500: #0cc8ed; /* working core — cyan (locked default) */ --c-azure-600: #0f54e6; /* ---- PALETTE : teal (alternate accent — calm, dark-leaning) ----------- */ --c-teal-50: #eaf5f3; --c-teal-100: #cfe8e4; --c-teal-300: #95cdc6; --c-teal-400: #7cc2ba; --c-teal-500: #62b3aa; /* ALT accent */ --c-teal-600: #4f9890; /* hover / pressed */ --c-teal-700: #3d7a73; /* default color-scheme is dark (form controls, scrollbars) */ color-scheme: dark; /* ===================================================================== SEMANTIC ROLES — DARK (default — near-black editorial) ===================================================================== */ /* surfaces */ --surface-page: var(--c-black); --surface-raised: var(--c-ink-2); --surface-sunken: var(--c-ink-0); --surface-inset: #1f1e1b; --surface-inverse: var(--c-paper); /* ink (text / icon) */ --ink: var(--c-paper); --ink-secondary: rgba(244, 242, 236, 0.60); --ink-tertiary: rgba(244, 242, 236, 0.40); --ink-disabled: rgba(244, 242, 236, 0.24); --ink-inverse: var(--c-gray-900); --ink-on-accent: var(--c-black); /* lines / borders (alpha so they sit on any surface) */ --line: rgba(244, 242, 236, 0.12); --line-strong: rgba(244, 242, 236, 0.24); --line-faint: rgba(244, 242, 236, 0.07); /* accent — WHITE (the single bold color) */ --accent: var(--c-white); --accent-hover: rgba(255, 255, 255, 0.86); --accent-press: rgba(255, 255, 255, 0.70); --accent-tint: rgba(255, 255, 255, 0.12); --accent-tint-2: rgba(255, 255, 255, 0.20); --accent-ink: var(--c-black); /* signal — the secondary house colour. White stays primary; signal carries the live/indicator layer (dots, rims, sweeps) and never the page action. */ --signal: var(--c-signal-500); --signal-soft: var(--c-signal-300); --signal-light: var(--c-signal-100); --signal-deep: var(--c-signal-700); --signal-cyan: var(--c-signal-cyan); --signal-tint: rgba(47, 107, 245, 0.16); --signal-tint-2: rgba(47, 107, 245, 0.28); --gradient-signal: linear-gradient(118deg, #ffffff 0%, var(--c-signal-100) 24%, var(--c-signal-500) 62%, var(--c-signal-cyan) 100%); --gradient-signal-deep: linear-gradient(118deg, var(--c-signal-100) 0%, var(--c-signal-500) 46%, var(--c-signal-700) 100%); /* status (foreground / tint background) — locked light colors */ --status-online: #c2e368; /* DONE — soft house green (HBF) */ --status-online-bg: color-mix(in srgb, var(--status-online), transparent 80%); --status-ondeck: var(--c-yellow-500); /* ON-DECK — worked on now */ --status-ondeck-bg: color-mix(in srgb, var(--status-ondeck), transparent 80%); --status-warning: #f5e000; --status-warning-bg: color-mix(in srgb, var(--status-warning), transparent 80%); --status-progress: var(--c-azure-500); --status-progress-bg: color-mix(in srgb, var(--status-progress), transparent 80%); --status-offline: #e9048b; --status-offline-bg: color-mix(in srgb, var(--status-offline), transparent 80%); /* focus */ --focus-ring: var(--c-white); /* glass (frosted, translucent — buttons/chips over any backdrop) */ --glass-bg: rgba(244, 242, 236, 0.12); --glass-bg-hover: rgba(244, 242, 236, 0.18); --glass-edge: rgba(244, 242, 236, 0.14); } /* ===================================================================== SEMANTIC ROLES — LIGHT (opt-out: set data-theme="light") ===================================================================== */ [data-theme="light"] { color-scheme: light; --surface-page: var(--c-paper); --surface-raised: var(--c-paper-2); --surface-sunken: var(--c-sand); --surface-inset: var(--c-sand-2); --surface-inverse: var(--c-gray-900); --ink: var(--c-gray-900); --ink-secondary: var(--c-gray-500); --ink-tertiary: var(--c-gray-400); --ink-disabled: var(--c-gray-300); --ink-inverse: var(--c-paper); --ink-on-accent: var(--c-white); --line: rgba(20, 19, 18, 0.10); --line-strong: rgba(20, 19, 18, 0.20); --line-faint: rgba(20, 19, 18, 0.06); /* accent — INK (white is invisible on paper; the bold color inverts to ink) */ --accent: var(--c-gray-900); --accent-hover: var(--c-gray-800); --accent-press: var(--c-gray-700); --accent-tint: rgba(20, 19, 18, 0.08); --accent-tint-2: rgba(20, 19, 18, 0.16); --accent-ink: var(--c-white); /* signal keeps its hue on paper; the gradient starts deeper so it reads */ --signal: var(--c-signal-600); --signal-soft: var(--c-signal-500); --signal-light: var(--c-signal-200); --signal-deep: var(--c-signal-700); --signal-tint: rgba(35, 80, 179, 0.12); --signal-tint-2: rgba(35, 80, 179, 0.22); --gradient-signal: linear-gradient(118deg, var(--c-signal-200) 0%, var(--c-signal-500) 40%, var(--c-signal-700) 100%); --status-online: #c2e368; --status-online-bg: color-mix(in srgb, var(--status-online), transparent 86%); --status-ondeck: var(--c-yellow-500); --status-ondeck-bg: color-mix(in srgb, var(--status-ondeck), transparent 86%); --status-warning: #f5e000; --status-warning-bg: color-mix(in srgb, var(--status-warning), transparent 86%); --status-progress: var(--c-azure-500); --status-progress-bg: color-mix(in srgb, var(--status-progress), transparent 86%); --status-offline: #e9048b; --status-offline-bg: color-mix(in srgb, var(--status-offline), transparent 86%); --focus-ring: var(--c-gray-900); --glass-bg: rgba(20, 19, 18, 0.07); --glass-bg-hover: rgba(20, 19, 18, 0.11); --glass-edge: rgba(20, 19, 18, 0.10); } /* ===================================================================== ALT ACCENT — TEAL (opt-in via [data-accent="teal"]) --------------------------------------------------------------------- A calmer, dark-leaning accent (~#62b3aa). Add data-accent="teal" on (alone, or with the light theme). Overrides only the accent role tokens — surfaces, ink and status are untouched. ===================================================================== */ [data-accent="teal"] { --accent: var(--c-teal-500); --accent-hover: var(--c-teal-400); --accent-press: var(--c-teal-300); --accent-tint: rgba(98, 179, 170, 0.16); --accent-tint-2: rgba(98, 179, 170, 0.24); --accent-ink: #0c0c0c; --focus-ring: var(--c-teal-400); } [data-theme="light"][data-accent="teal"] { --accent: var(--c-teal-500); --accent-hover: var(--c-teal-600); --accent-press: var(--c-teal-700); --accent-tint: var(--c-teal-50); --accent-tint-2: var(--c-teal-100); --accent-ink: var(--c-white); --focus-ring: var(--c-teal-500); } /* ===================================================================== ALT ACCENT — SIGNAL BLUE (opt-in via [data-accent="blue"]) --------------------------------------------------------------------- Promotes the secondary house colour to the accent role for views that need a chromatic focal point. Same discipline: one accent per view. ===================================================================== */ [data-accent="blue"] { --accent: var(--c-signal-500); --accent-hover: var(--c-signal-300); --accent-press: var(--c-signal-600); --accent-tint: rgba(47, 107, 245, 0.16); --accent-tint-2: rgba(47, 107, 245, 0.26); --accent-ink: var(--c-white); --focus-ring: var(--c-signal-300); } [data-theme="light"][data-accent="blue"] { --accent: var(--c-signal-600); --accent-hover: var(--c-signal-500); --accent-press: var(--c-signal-700); --accent-tint: var(--c-signal-050); --accent-tint-2: rgba(35, 80, 179, 0.18); --accent-ink: var(--c-white); --focus-ring: var(--c-signal-600); }