/* ========================================================================== Student Report Design Tokens ========================================================================== A tight, Linear-inspired design system. PRINCIPLES -------------------------------------------------------------------------- 1. One primary colour (green) + a calm neutral palette. 2. Consistent 4px spacing scale. 3. Three shadow levels only (xs, sm, md). 4. Radius: 6px (sm), 8px (md), 12px (lg), 16px (xl). 5. Motion: 120ms fast, 200ms base. 6. Dark mode overrides the same tokens — no manual selectors. STRUCTURE -------------------------------------------------------------------------- 1. Color — brand, semantic, surface, text, border 2. Typography 3. Spacing 4. Radius 5. Shadow 6. Motion 7. Layout 8. Z-Index 9. Dark mode overrides 10. Responsive adjustments 11. Reduced motion ========================================================================== */ /* ========================================================================== 1. COLOR — LIGHT THEME (DEFAULT) ========================================================================== */ :root { /* ====================================================================== BRAND ====================================================================== */ --color-brand: #0f5132; --color-brand-hover: #0b4429; --color-brand-active: #083a22; --color-brand-soft: #e8f2ec; --color-brand-contrast: #ffffff; --color-brand-dash: #0f5132; /* ====================================================================== SEMANTIC ====================================================================== */ --color-success: #16a34a; --color-success-hover: #15803d; --color-success-soft: #dcfce7; --color-warning: #d97706; --color-warning-hover: #b45309; --color-warning-soft: #fef3c7; --color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-soft: #fee2e2; --color-info: #0284c7; --color-info-hover: #0369a1; --color-info-soft: #e0f2fe; /* ====================================================================== SURFACE ====================================================================== */ --color-bg-page: #f8fafc; --color-bg-surface: #ffffff; --color-bg-surface-alt: #f1f5f9; --color-bg-hover: #f1f5f9; --color-bg-active: #e2e8f0; --color-bg-overlay: rgba(15, 23, 42, 0.55); /* ====================================================================== TEXT ====================================================================== */ --color-text-primary: #0f172a; --color-text-secondary: #334155; --color-text-muted: #64748b; --color-text-disabled: #94a3b8; --color-text-inverse: #ffffff; --color-text-link: #0f5132; --color-text-link-hover: #0b4429; /* ====================================================================== BORDER ====================================================================== */ --color-border: #e2e8f0; --color-border-strong: #cbd5e1; --color-border-subtle: #f1f5f9; --color-border-focus: #0f5132; /* ====================================================================== SIDEBAR ====================================================================== */ --color-sidebar-bg: #0f172a; --color-sidebar-bg-hover: #1e293b; --color-sidebar-bg-active: #0f5132; --color-sidebar-text: #94a3b8; --color-sidebar-text-hover: #f1f5f9; --color-sidebar-text-active:#ffffff; --color-sidebar-border: #1e293b; --color-sidebar-section: #64748b; /* ====================================================================== TOPBAR ====================================================================== */ --color-topbar-bg: #ffffff; --color-topbar-border: #e2e8f0; /* ====================================================================== BADGE ====================================================================== */ --color-badge-success-bg: #dcfce7; --color-badge-success-text: #166534; --color-badge-warning-bg: #fef3c7; --color-badge-warning-text: #92400e; --color-badge-danger-bg: #fee2e2; --color-badge-danger-text: #991b1b; --color-badge-info-bg: #dbeafe; --color-badge-info-text: #1e40af; --color-badge-neutral-bg: #f1f5f9; --color-badge-neutral-text: #475569; /* ====================================================================== STATUS DOT ====================================================================== */ --color-status-online: #22c55e; --color-status-offline: #ef4444; --color-status-warning: #f59e0b; /* ====================================================================== 2. TYPOGRAPHY ====================================================================== */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Font sizes — tighter scale */ --font-size-xs: 0.6875rem; /* 11px */ --font-size-sm: 0.8125rem; /* 13px */ --font-size-base: 0.875rem; /* 14px */ --font-size-md: 0.9375rem; /* 15px */ --font-size-lg: 1rem; /* 16px */ --font-size-xl: 1.125rem; /* 18px */ --font-size-2xl: 1.375rem; /* 22px */ --font-size-3xl: 1.75rem; /* 28px */ --font-size-4xl: 2.125rem; /* 34px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-relaxed: 1.6; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; /* ====================================================================== 3. SPACING ====================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ====================================================================== 4. RADIUS ====================================================================== */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-full: 9999px; /* ====================================================================== 5. SHADOW ====================================================================== */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05); --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.14); --shadow-focus: 0 0 0 3px rgba(15, 81, 50, 0.15); --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.15); /* ====================================================================== 6. MOTION ====================================================================== */ --transition-fast: 120ms ease; --transition-base: 180ms ease; --transition-slow: 280ms ease; /* ====================================================================== 7. LAYOUT ====================================================================== */ --sidebar-width: 236px; --sidebar-width-collapsed: 68px; --topbar-height: 60px; --content-max-width: 1440px; --content-inner-width: 1280px; --content-padding-x: var(--space-6); --content-padding-y: var(--space-6); /* ====================================================================== 8. Z-INDEX ====================================================================== */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-sidebar: 1040; --z-modal-backdrop: 1050; --z-modal: 1055; --z-tooltip: 1070; --z-toast: 1080; --z-loading-bar: 1090; } /* ========================================================================== 9. DARK MODE OVERRIDES ========================================================================== */ [data-theme="dark"] { /* BRAND */ --color-brand: #10b981; --color-brand-hover: #059669; --color-brand-active: #047857; --color-brand-soft: rgba(16, 185, 129, 0.12); --color-brand-contrast: #052e16; --color-brand-dash: #10b981; /* SEMANTIC */ --color-success: #22c55e; --color-success-hover: #16a34a; --color-success-soft: rgba(34, 197, 94, 0.12); --color-warning: #f59e0b; --color-warning-hover: #d97706; --color-warning-soft: rgba(245, 158, 11, 0.12); --color-danger: #f87171; --color-danger-hover: #ef4444; --color-danger-soft: rgba(248, 113, 113, 0.12); --color-info: #38bdf8; --color-info-hover: #0ea5e9; --color-info-soft: rgba(56, 189, 248, 0.12); /* SURFACE */ --color-bg-page: #0b1220; --color-bg-surface: #111a2b; --color-bg-surface-alt: #172033; --color-bg-hover: #1e293b; --color-bg-active: #263449; --color-bg-overlay: rgba(0, 0, 0, 0.7); /* TEXT */ --color-text-primary: #f1f5f9; --color-text-secondary: #cbd5e1; --color-text-muted: #94a3b8; --color-text-disabled: #64748b; --color-text-inverse: #0b1220; --color-text-link: #4ade80; --color-text-link-hover: #86efac; /* BORDER */ --color-border: #1e293b; --color-border-strong: #334155; --color-border-subtle: #172033; --color-border-focus: #10b981; /* SIDEBAR */ --color-sidebar-bg: #0b1220; --color-sidebar-bg-hover: #172033; --color-sidebar-bg-active: rgba(16, 185, 129, 0.15); --color-sidebar-text: #94a3b8; --color-sidebar-text-hover: #f1f5f9; --color-sidebar-text-active:#4ade80; --color-sidebar-border: #1e293b; --color-sidebar-section: #64748b; /* TOPBAR */ --color-topbar-bg: #111a2b; --color-topbar-border: #1e293b; /* BADGE */ --color-badge-success-bg: rgba(34, 197, 94, 0.14); --color-badge-success-text: #86efac; --color-badge-warning-bg: rgba(245, 158, 11, 0.14); --color-badge-warning-text: #fcd34d; --color-badge-danger-bg: rgba(248, 113, 113, 0.14); --color-badge-danger-text: #fca5a5; --color-badge-info-bg: rgba(56, 189, 248, 0.14); --color-badge-info-text: #7dd3fc; --color-badge-neutral-bg: rgba(148, 163, 184, 0.14); --color-badge-neutral-text: #cbd5e1; /* STATUS */ --color-status-online: #4ade80; --color-status-offline: #f87171; --color-status-warning: #fbbf24; /* SHADOW */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35); --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.25); --shadow-focus-danger: 0 0 0 3px rgba(248, 113, 113, 0.25); } /* ========================================================================== 10. RESPONSIVE ========================================================================== */ @media (max-width: 700px) { :root { --content-padding-x: var(--space-4); --content-padding-y: var(--space-4); --topbar-height: 56px; } } /* ========================================================================== 11. REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } }