/* Design tokens — School ERP console * Light theme by default; dark mirrored via [data-theme="dark"] on . */ :root { /* surfaces */ --surface-canvas: #FAFAF7; --surface-card: #FFFFFF; --surface-rail: #F2F3F0; --surface-sunk: #F5F6F2; --surface-overlay: rgba(14, 15, 18, 0.42); /* text */ --text-1: #0E0F12; --text-2: #3A3D44; --text-3: #6B6F76; --text-inv: #FFFFFF; /* borders */ --border-1: #E6E7E3; --border-2: #D9DBD5; --border-strong: #BFC2BB; /* accent */ --accent: #1E5EFF; --accent-weak: #E8EFFF; --accent-hover: #1A52E0; /* status */ --success: #1F8A4C; --success-weak: #E6F4EC; --warn: #C77700; --warn-weak: #FBEFD8; --danger: #C2331A; --danger-weak: #FBE7E2; --info: #1E5EFF; --info-weak: #E8EFFF; --neutral: #6B6F76; --neutral-weak: #EEEFEC; /* radii */ --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px; /* shadow */ --shadow-1: 0 1px 2px rgba(14,15,18,.04), 0 4px 12px rgba(14,15,18,.04); --shadow-2: 0 4px 16px rgba(14,15,18,.08), 0 12px 32px rgba(14,15,18,.08); --shadow-pop: 0 8px 28px rgba(14,15,18,.18); /* spacing (4-pt grid via rem-ish px) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* layout */ --topbar-h: 56px; --rail-w: 240px; --rail-w-collapsed: 64px; /* typography */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-22: 22px; --fs-28: 28px; --lh-tight: 1.25; --lh-normal: 1.5; /* spacing extras */ --s-7: 28px; /* IAM alias tokens — map to canonical names above */ --bg-2: var(--surface-canvas); --warning: var(--warn); --warning-bg: var(--warn-weak); --error: var(--danger); --error-bg: var(--danger-weak); --accent-bg: var(--accent-weak); } [data-theme="dark"] { --surface-canvas: #0E0F12; --surface-card: #15171B; --surface-rail: #1E2026; --surface-sunk: #121419; --surface-overlay: rgba(0,0,0,.6); --text-1: #F2F3F0; --text-2: #C7CAD1; --text-3: #8B8F97; --text-inv: #0E0F12; --border-1: #262930; --border-2: #2F333B; --border-strong: #404550; --accent: #5C8DFF; --accent-weak: #1B2540; --accent-hover: #7AA0FF; --success: #4FBF7A; --success-weak: #15301F; --warn: #E69A2E; --warn-weak: #38280E; --danger: #E16450; --danger-weak: #391812; --info: #5C8DFF; --info-weak: #1B2540; --neutral: #8B8F97; --neutral-weak: #1F2228; --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3); --shadow-2: 0 4px 16px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4); --shadow-pop: 0 8px 28px rgba(0,0,0,.6); /* IAM alias tokens — dark overrides */ --bg-2: var(--surface-canvas); --warning: var(--warn); --warning-bg: var(--warn-weak); --error: var(--danger); --error-bg: var(--danger-weak); --accent-bg: var(--accent-weak); } [data-density="compact"] { --row-h: 32px; --pad-card: var(--s-3) var(--s-4); } [data-density="comfortable"] { --row-h: 40px; --pad-card: var(--s-4) var(--s-5); }