/* ============================================================ SolMak Design Tokens — public/css/solmak-tokens.css Option A palette. Declares --smk-* variables only. Nothing here restyles the panel on its own; components opt in. Light values live in :root, dark overrides in html.dark (Filament v3 toggles dark mode via ). ============================================================ */ :root { /* --- Surfaces --- */ --smk-paper: #FDFFFC; /* page background */ --smk-surface: #FFFFFF; /* card */ --smk-surface-2: #F4F5F3; /* elevated / hover zone */ /* --- Text --- */ --smk-text: #141127; /* primary text (Ink) */ --smk-text-secondary: #565463; /* meta / sub-text */ --smk-text-muted: #8B8994; /* placeholder / hint */ /* --- Borders --- */ --smk-border: #E8E8EA; /* hairline */ --smk-border-strong: #D2D2D6; /* hover / emphasis */ /* --- Primary (brand + main CTA) --- */ --smk-primary: #FB3640; --smk-primary-hover: #E12530; --smk-on-primary: #FFFFFF; /* --- Interactive (links / selected / active tab) --- */ --smk-interactive: #247BA0; --smk-interactive-text: #1B5E7A; /* small link text (contrast-safe) */ --smk-interactive-bg: #E7F1F6; /* teal tint */ /* --- Status: danger --- */ --smk-danger: #FB3640; --smk-danger-text: #A32D2D; --smk-danger-bg: #FDECEC; /* --- Status: warning --- */ --smk-warning: #F1D302; --smk-warning-text: #7A6A00; /* dark text on yellow — never white/yellow */ --smk-warning-bg: #FEF8DC; /* --- Status: success --- */ --smk-success: #1D9E75; --smk-success-text: #0F6E56; --smk-success-bg: #E4F5EE; /* --- Status: info (same family as interactive) --- */ --smk-info: #247BA0; --smk-info-text: #1B5E7A; --smk-info-bg: #E7F1F6; /* --- Menu category tints (icon square bg / fg) --- */ --smk-cat-finance-bg: #E7F1F6; --smk-cat-finance-fg: #1B5E7A; --smk-cat-people-bg: #E4F5EE; --smk-cat-people-fg: #0F6E56; --smk-cat-content-bg: #FEF8DC; --smk-cat-content-fg: #7A6A00; --smk-cat-system-bg: #EFEEEA; --smk-cat-system-fg: #565463; /* --- Radii --- */ --smk-radius-card: 12px; --smk-radius-tile: 14px; --smk-radius-control: 10px; --smk-radius-pill: 999px; /* --- Elevation (kept intentionally soft / flat) --- */ --smk-shadow-card: 0 1px 2px rgba(20, 17, 39, 0.04); } html.dark { /* --- Surfaces --- */ --smk-paper: #141127; --smk-surface: #1E1B33; --smk-surface-2: #282544; /* --- Text --- */ --smk-text: #F1F0F5; --smk-text-secondary: #A9A7B8; --smk-text-muted: #726F85; /* --- Borders --- */ --smk-border: #2E2B47; --smk-border-strong: #3A3752; /* --- Primary --- */ --smk-primary: #FF4B54; /* slightly brighter on dark */ --smk-primary-hover: #FF6169; --smk-on-primary: #FFFFFF; /* --- Interactive --- */ --smk-interactive: #4AA3C7; /* desaturated for dark bg */ --smk-interactive-text: #7FC3DE; --smk-interactive-bg: #12303B; /* --- Status: danger --- */ --smk-danger: #FF4B54; --smk-danger-text: #FF9B9B; --smk-danger-bg: #3A1719; /* --- Status: warning --- */ --smk-warning: #F1D302; --smk-warning-text: #E9C400; --smk-warning-bg: #3A3410; /* --- Status: success --- */ --smk-success: #2CB68A; --smk-success-text: #7CD9BB; --smk-success-bg: #10352A; /* --- Status: info --- */ --smk-info: #4AA3C7; --smk-info-text: #7FC3DE; --smk-info-bg: #12303B; /* --- Menu category tints --- */ --smk-cat-finance-bg: #12303B; --smk-cat-finance-fg: #7FC3DE; --smk-cat-people-bg: #10352A; --smk-cat-people-fg: #7CD9BB; --smk-cat-content-bg: #3A3410; --smk-cat-content-fg: #E9C400; --smk-cat-system-bg: #262338; --smk-cat-system-fg: #A9A7B8; /* --- Elevation --- */ --smk-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30); }