/** * iFeed LMS Cluster — Design Tokens * Namespace: --lms-* * * Usage: import as first CSS file in every module. * Theme switching: bridge.js sets data-theme="light|dark" on . * * DO NOT hardcode any colour, spacing, or typography value in module CSS. * Always reference a token. */ /* ─── Light Theme (default) ───────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Brand */ --lms-brand-primary: #1e3a5f; /* deep navy — trust, clinical */ --lms-brand-accent: #0ea5e9; /* sky blue — active, links */ --lms-brand-accent-hover: #0284c7; --lms-brand-success: #16a34a; /* completion, pass */ --lms-brand-warning: #d97706; /* due soon, in-progress */ --lms-brand-danger: #dc2626; /* overdue, fail */ --lms-brand-info: #6366f1; /* information, tags */ /* Surfaces */ --lms-bg: #f8fafc; /* page background */ --lms-surface: #ffffff; /* card, panel background */ --lms-surface-2: #f1f5f9; /* secondary surface, hover bg */ --lms-surface-3: #e2e8f0; /* tertiary, dividers */ /* Text */ --lms-text-primary: #0f172a; /* headings, body */ --lms-text-secondary: #475569; /* labels, captions, meta */ --lms-text-muted: #94a3b8; /* placeholder, disabled */ --lms-text-inverse: #ffffff; /* on dark backgrounds */ --lms-text-link: #0ea5e9; /* Borders */ --lms-border: #e2e8f0; --lms-border-strong: #cbd5e1; --lms-border-focus: #0ea5e9; /* Status backgrounds */ --lms-bg-success: #dcfce7; --lms-bg-warning: #fef3c7; --lms-bg-danger: #fee2e2; --lms-bg-info: #ede9fe; /* Navigation */ --lms-nav-bg: #1e3a5f; --lms-nav-text: #cbd5e1; --lms-nav-text-active: #ffffff; --lms-nav-accent: #0ea5e9; --lms-nav-hover: rgba(255,255,255,0.08); /* Shadows */ --lms-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --lms-shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --lms-shadow-lg: 0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05); /* Progress */ --lms-progress-track: #e2e8f0; --lms-progress-fill: #0ea5e9; --lms-progress-complete: #16a34a; color-scheme: light; } /* ─── Dark Theme ──────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Brand */ --lms-brand-primary: #3b82f6; --lms-brand-accent: #38bdf8; --lms-brand-accent-hover: #7dd3fc; --lms-brand-success: #4ade80; --lms-brand-warning: #fbbf24; --lms-brand-danger: #f87171; --lms-brand-info: #a5b4fc; /* Surfaces */ --lms-bg: #0f172a; --lms-surface: #1e293b; --lms-surface-2: #273549; --lms-surface-3: #334155; /* Text */ --lms-text-primary: #f1f5f9; --lms-text-secondary: #94a3b8; --lms-text-muted: #475569; --lms-text-inverse: #0f172a; --lms-text-link: #38bdf8; /* Borders */ --lms-border: #334155; --lms-border-strong: #475569; --lms-border-focus: #38bdf8; /* Status backgrounds */ --lms-bg-success: #14532d; --lms-bg-warning: #451a03; --lms-bg-danger: #450a0a; --lms-bg-info: #2e1065; /* Navigation */ --lms-nav-bg: #0f172a; --lms-nav-text: #94a3b8; --lms-nav-text-active: #f1f5f9; --lms-nav-accent: #38bdf8; --lms-nav-hover: rgba(255,255,255,0.06); /* Shadows */ --lms-shadow-sm: 0 1px 3px rgba(0,0,0,.3); --lms-shadow-md: 0 4px 12px rgba(0,0,0,.4); --lms-shadow-lg: 0 10px 30px rgba(0,0,0,.5); /* Progress */ --lms-progress-track: #334155; --lms-progress-fill: #38bdf8; --lms-progress-complete: #4ade80; color-scheme: dark; } /* ─── Spacing Scale ───────────────────────────────────────────────────────── */ :root { --lms-space-1: 4px; --lms-space-2: 8px; --lms-space-3: 12px; --lms-space-4: 16px; --lms-space-5: 20px; --lms-space-6: 24px; --lms-space-8: 32px; --lms-space-10: 40px; --lms-space-12: 48px; --lms-space-16: 64px; --lms-space-20: 80px; } /* ─── Border Radius ───────────────────────────────────────────────────────── */ :root { --lms-radius-sm: 4px; --lms-radius-md: 8px; --lms-radius-lg: 12px; --lms-radius-xl: 16px; --lms-radius-full: 9999px; } /* ─── Typography ──────────────────────────────────────────────────────────── */ :root { --lms-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif; --lms-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; --lms-text-xs: 11px; --lms-text-sm: 13px; --lms-text-base: 15px; --lms-text-md: 16px; --lms-text-lg: 18px; --lms-text-xl: 20px; --lms-text-2xl: 24px; --lms-text-3xl: 30px; --lms-text-4xl: 36px; --lms-weight-normal: 400; --lms-weight-medium: 500; --lms-weight-semibold: 600; --lms-weight-bold: 700; --lms-weight-extrabold: 800; --lms-leading-tight: 1.25; --lms-leading-snug: 1.375; --lms-leading-normal: 1.5; --lms-leading-relaxed: 1.625; } /* ─── Z-index scale ───────────────────────────────────────────────────────── */ :root { --lms-z-base: 0; --lms-z-raised: 10; --lms-z-dropdown: 100; --lms-z-sticky: 200; --lms-z-overlay: 300; --lms-z-modal: 400; --lms-z-toast: 500; } /* ─── Transitions ─────────────────────────────────────────────────────────── */ :root { --lms-transition-fast: all 0.10s ease; --lms-transition-base: all 0.15s ease; --lms-transition-slow: all 0.25s ease; }