/* ========================================================================== Design Tokens — SFA Middleware Prototype ========================================================================== Satu-satunya file yang boleh berisi nilai warna mentah (hex/rgb/rgba). Semua file CSS/HTML/JS lain WAJIB memakai custom property di bawah ini. Tema diaktifkan lewat atribut data-theme="light|dark" pada ; tanpa atribut, tema mengikuti prefers-color-scheme perangkat. ========================================================================== */ :root, :root[data-theme="light"] { /* Brand */ --brand-primary: #4f6df5; --brand-primary-strong: #3b55d9; --brand-contrast: #ffffff; /* Surfaces & background */ --bg: #f3f5fb; --surface: #ffffff; --surface-2: #eef1f8; --surface-glass: rgba(255, 255, 255, 0.62); --glass-border: rgba(15, 23, 42, 0.08); --overlay-scrim: rgba(15, 23, 42, 0.45); /* Text */ --text-primary: #16203a; --text-secondary: #5b6478; --text-muted: #8b93a7; /* Status */ --status-success: #1f9d61; --status-success-soft: rgba(31, 157, 97, 0.14); --status-error: #d84a49; --status-error-soft: rgba(216, 74, 73, 0.14); --status-warning: #d78a1f; --status-warning-soft: rgba(215, 138, 31, 0.16); --status-info: #3577d4; --status-info-soft: rgba(53, 119, 212, 0.14); --status-neutral: #7c8496; --status-neutral-soft: rgba(124, 132, 150, 0.16); /* Chrome */ --scrollbar-thumb: rgba(22, 32, 58, 0.28); --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.07); --focus-ring: 0 0 0 3px rgba(79, 109, 245, 0.35); /* Radius */ --radius-s: 8px; --radius-m: 12px; --radius-l: 18px; /* Typography */ --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "Cascadia Mono", Consolas, monospace; } :root[data-theme="dark"] { --bg: #0d1220; --surface: #151c2f; --surface-2: #1b2438; --surface-glass: rgba(21, 28, 47, 0.62); --glass-border: rgba(255, 255, 255, 0.08); --overlay-scrim: rgba(0, 0, 0, 0.55); --text-primary: #e8ecf6; --text-secondary: #a7b0c5; --text-muted: #6d7690; --scrollbar-thumb: rgba(232, 236, 246, 0.22); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } }