/* Sluicio ยท Color tokens Two modes (light, dark). Apply by setting data-theme="light" or "dark" on . Hand off as design tokens โ€” feed to your design-system / Tailwind / CSS-vars layer. */ :root, :root[data-theme="light"] { /* surfaces */ --surface: #FAFAF7; /* page background โ€” warm off-white */ --surface-2: #FFFFFF; /* cards / elevated surfaces */ --surface-3: #F1F1EC; /* table stripe, hover, inputs */ --border: #E5E7EB; /* hairline borders */ --border-strong: #CBD5E1; /* focused / emphasised borders */ /* text */ --ink: #0F172A; /* body text */ --ink-2: #334155; /* secondary text */ --muted: #64748B; /* tertiary / labels */ /* primary / accent */ --primary: #0E6E9E; /* deep azure */ --primary-hover: #0B587F; --primary-soft: #D4EAF7; /* tinted background */ --primary-ink: #0A4A6B; /* text on primary-soft */ --on-primary: #FFFFFF; /* text on primary fill */ /* status โ€” semantic */ --ok: #15803D; --ok-soft: #DCFCE7; --ok-ink: #14532D; --warn: #B45309; --warn-soft: #FEF3C7; --warn-ink: #78350F; --err: #B91C1C; --err-soft: #FEE2E2; --err-ink: #7F1D1D; --info: #475569; --info-soft: #E2E8F0; /* effects */ --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow: 0 4px 12px rgba(15,23,42,.08); --focus: 0 0 0 3px rgba(14,110,158,.35); } :root[data-theme="dark"] { --surface: #0B1220; --surface-2: #111827; --surface-3: #1F2937; --border: #1F2937; --border-strong: #334155; --ink: #E2E8F0; --ink-2: #CBD5E1; --muted: #94A3B8; --primary: #38B6E0; --primary-hover: #7FD3F0; --primary-soft: #08283A; --primary-ink: #AEE0F4; --on-primary: #04222F; --ok: #22C55E; --ok-soft: #0F2A1A; --ok-ink: #86EFAC; --warn: #F59E0B; --warn-soft: #2A1E07; --warn-ink: #FCD34D; --err: #F87171; --err-soft: #2A1010; --err-ink: #FCA5A5; --info: #94A3B8; --info-soft: #1F2937; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 24px rgba(0,0,0,.5); --focus: 0 0 0 3px rgba(56,182,224,.35); } /* base page */ html, body { margin: 0; padding: 0; background: var(--surface); color: var(--ink); font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; }