/* HexaBin brand tokens & shared utilities * Loaded by every template (site, login, dashboard pages, per-bin detail). * Palette mirrors DESIGN.md; type system is Manrope + Chakra Petch + JetBrains Mono. * Theming: semantic tokens remap under (set pre-paint, toggled by theme.js). */ :root { /* Primary */ --sb-forest: #2D5A42; --sb-blue: #1A4D6B; /* Secondary */ --sb-stone: #8C8C8C; --sb-taupe: #BDB76B; /* Neutral */ --sb-white: #FFFFFF; --sb-cream: #F5F5F7; --sb-light: #E0E0E0; --sb-charcoal: #333333; --sb-ink: #1d2722; /* Modular */ --sb-paper: #D2B48C; --sb-aluminum: #A9A9A9; --sb-organic: #1E4D2B; --sb-glass: #40E0D0; --sb-plastic: #87CEEB; --sb-other-1: #9370DB; --sb-other-2: #1E90FF; --sb-empty: #8C8C8C; /* Semantic */ --sb-success: #4CAF50; --sb-warning: #FF9800; --sb-error: #C62828; --sb-info: #2196F3; /* Fonts */ --sb-font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --sb-font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; --sb-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /* Layout */ --sb-radius-sm: 6px; --sb-radius-md: 10px; --sb-radius-lg: 14px; --sb-radius-xl: 16px; --sb-shadow-card: 0 1px 2px rgba(29, 39, 34, 0.04), 0 1px 1px rgba(29, 39, 34, 0.02); --sb-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.08); /* Semantic (theme-mapped) — surfaces/text/borders MUST use these, never raw palette values */ --sb-bg: var(--sb-cream); --sb-surface: var(--sb-white); --sb-surface-2: var(--sb-cream); --sb-surface-2-hover: #ebe9e3; --sb-text: var(--sb-ink); --sb-text-muted: var(--sb-stone); --sb-border: rgba(29, 39, 34, 0.06); --sb-border-strong: rgba(29, 39, 34, 0.10); --sb-hover: rgba(45, 90, 66, 0.06); --sb-glass: rgba(245, 245, 247, 0.85); --sb-accent-ink: var(--sb-forest); color-scheme: light; } /* Dark theme — forest-tinted charcoal. Toggled by theme.js via . */ :root[data-theme="dark"] { --sb-bg: #0F1613; --sb-surface: #161E1A; --sb-surface-2: #1D2722; --sb-surface-2-hover: #243029; --sb-text: #E8EDEA; --sb-text-muted: #9AA69F; --sb-border: rgba(255, 255, 255, 0.08); --sb-border-strong: rgba(255, 255, 255, 0.14); --sb-hover: rgba(255, 255, 255, 0.06); --sb-glass: rgba(15, 22, 19, 0.85); --sb-accent-ink: #6FAE8C; --sb-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.25); --sb-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.50); /* Brightened for legibility on dark surfaces */ --sb-success: #66BB6A; --sb-warning: #FFA726; --sb-error: #EF5350; --sb-info: #42A5F5; --sb-organic: #2E6B45; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--sb-font-ui); color: var(--sb-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--sb-bg); } a { color: inherit; } button { font-family: inherit; } @keyframes sbPulse { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes sbFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Status pill ─────────────────────────────────────────────────────── */ .sb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(140, 140, 140, 0.14); color: var(--sb-stone); } .sb-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .sb-pill.online { background: rgba(76, 175, 80, 0.14); color: var(--sb-success); } .sb-pill.degraded { background: rgba(255, 152, 0, 0.14); color: var(--sb-warning); } .sb-pill.offline { background: rgba(198, 40, 40, 0.14); color: var(--sb-error); } .sb-pill.stopped { background: rgba(140, 140, 140, 0.14); color: var(--sb-stone); } .sb-pill.online .dot { box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.30); } /* ── Buttons ─────────────────────────────────────────────────────────── */ .sb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--sb-radius-sm); border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 120ms ease, transform 80ms ease, opacity 120ms ease; text-decoration: none; line-height: 1; } .sb-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sb-btn:active { transform: translateY(1px); } .sb-btn-primary { background: var(--sb-forest); color: var(--sb-white); } .sb-btn-primary:hover:not(:disabled) { background: #244836; } .sb-btn-secondary { background: var(--sb-surface-2); color: var(--sb-text); } .sb-btn-secondary:hover:not(:disabled) { background: var(--sb-surface-2-hover); } .sb-btn-outline { background: var(--sb-surface); color: var(--sb-accent-ink); border: 1px solid rgba(45, 90, 66, 0.30); } .sb-btn-outline:hover:not(:disabled) { background: var(--sb-hover); } .sb-btn-ghost { background: transparent; color: var(--sb-text); } .sb-btn-danger { background: var(--sb-error); color: var(--sb-white); } /* ── Card ────────────────────────────────────────────────────────────── */ .sb-card { background: var(--sb-surface); border-radius: var(--sb-radius-lg); border: 1px solid var(--sb-border); overflow: hidden; } /* ── Toast ───────────────────────────────────────────────────────────── */ .toast-host { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 4000; pointer-events: none; } .toast { background: var(--sb-ink); color: var(--sb-white); border: 1px solid transparent; padding: 12px 18px; border-radius: var(--sb-radius-md); font-size: 13px; font-weight: 600; box-shadow: var(--sb-shadow-float); animation: sbFadeIn 220ms ease-out; pointer-events: auto; max-width: 360px; } .toast.success { background: var(--sb-forest); } .toast.error { background: var(--sb-error); } .toast.leave { opacity: 0; transform: translateY(8px); transition: opacity 240ms ease, transform 240ms ease; } :root[data-theme="dark"] .toast { border-color: var(--sb-border-strong); } /* ── Modal ───────────────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(29, 39, 34, 0.55); display: flex; align-items: center; justify-content: center; z-index: 5000; } .modal-backdrop[hidden] { display: none; } [hidden] { display: none !important; } .modal { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); padding: 28px 28px 22px; width: min(420px, calc(100vw - 32px)); box-shadow: var(--sb-shadow-float); } .modal h3 { margin: 0 0 8px; font-family: var(--sb-font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--sb-text); } .modal p { margin: 0 0 24px; font-size: 14px; line-height: 1.5; color: var(--sb-text); opacity: 0.75; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; } /* ── Theme toggle ────────────────────────────────────────────────────── */ .sb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--sb-border-strong); border-radius: 999px; background: var(--sb-surface); color: var(--sb-text-muted); cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .sb-theme-toggle:hover { background: var(--sb-hover); color: var(--sb-text); } .sb-theme-toggle svg { width: 16px; height: 16px; display: block; } /* Affordance icons: light shows the moon (switch to dark), dark shows the sun */ .sb-theme-toggle .sb-icon-sun { display: none; } :root[data-theme="dark"] .sb-theme-toggle .sb-icon-sun { display: block; } :root[data-theme="dark"] .sb-theme-toggle .sb-icon-moon { display: none; }