/* ============================================================================ Dental Gallery — Design Tokens (single source of truth) Shared by the admin app (index.html) and the student portal. Load this BEFORE style.css / student_portal.css. ============================================================================ */ :root { /* ---- Brand / surface colors (shared, identical in both apps) ---- */ --bg-base: #0b0f19; --bg-surface: rgba(15, 23, 42, 0.6); --bg-surface-2: rgba(15, 23, 42, 0.85); --bg-hover: rgba(255, 255, 255, 0.06); --text-primary: #f8fafc; --text-secondary: #9aa7ba; /* was #94a3b8 — nudged up for contrast */ --text-muted: #8693a6; /* was #64748b — was below WCAG AA on the dark bg */ --accent-primary: #3b82f6; --accent-secondary: #8b5cf6; --accent-success: #10b981; --accent-warning: #f59e0b; --accent-danger: #ef4444; /* soft tints (for badges / hover backgrounds) */ --accent-primary-soft: rgba(59, 130, 246, 0.15); --accent-secondary-soft: rgba(139, 92, 246, 0.15); --accent-success-soft: rgba(16, 185, 129, 0.15); --accent-warning-soft: rgba(245, 158, 11, 0.15); --accent-danger-soft: rgba(239, 68, 68, 0.15); /* glow effects */ --glow-primary: rgba(59, 130, 246, 0.3); --glow-secondary: rgba(139, 92, 246, 0.3); --glow-success: rgba(16, 185, 129, 0.3); --glow-warning: rgba(245, 158, 11, 0.3); --glow-danger: rgba(239, 68, 68, 0.3); /* glass */ --glass-border: 1px solid rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4); /* ---- Type scale (rem) ---- */ --fs-xs: 0.72rem; --fs-sm: 0.8rem; --fs-base: 0.875rem; --fs-md: 0.95rem; --fs-lg: 1.1rem; --fs-xl: 1.35rem; --fs-2xl: 1.8rem; --fs-3xl: 2.2rem; /* ---- Spacing scale ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* ---- Radii ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px; /* ---- Elevation ---- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5); /* ---- Motion ---- */ --transition-fast: 0.15s ease; --transition: 0.25s ease; --transition-slow: 0.3s ease; /* ---- Focus ring (keyboard a11y) ---- */ --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.55); /* ---- Z-index scale ---- Note: the login overlay sits at 10000 and the global error catcher at 9999999; dialogs/toasts sit just above the login so they are never hidden. */ --z-dropdown: 100; --z-sidebar: 200; --z-header: 1000; --z-modal: 10100; --z-toast: 10200; --z-shield: 10150; } /* ---------------------------------------------------------------------------- Light theme scaffold (EXPERIMENTAL — not wired to a toggle yet). The token plumbing is ready, but a usable light theme is BLOCKED by the remaining inline hardcoded colors (rgba(0,0,0,..) backgrounds, color:white) in index.html. Finish Phase 2 (strip inline styles), then enable a toggle that sets . ---------------------------------------------------------------------------- */ :root[data-theme="light"] { /* Softer, lower-glare light palette (easier on the eyes for long sessions): muted backdrop + off-white surfaces instead of pure #fff, gentler text and shadows. */ --bg-base: #dde3ec; /* calm cool-gray, darker than cards for depth */ --bg-surface: #f4f7fb; /* soft off-white card (opaque = no glare) */ --bg-surface-2: #ffffff; /* elevated surfaces (modals/dropdowns) */ --bg-hover: rgba(15, 23, 42, 0.05); --text-primary: #111c2e; /* near-black so body text reads clearly */ --text-secondary: #3a475e; --text-muted: #5a6780; --glass-border: 1px solid rgba(15, 23, 42, 0.14); --glass-shadow: 0 4px 18px rgba(15, 23, 42, 0.10); /* Slightly de-neoned accents for better text contrast on light surfaces */ --accent-primary: #2563eb; --accent-secondary: #7c3aed; --accent-success: #059669; --accent-warning: #d97706; --accent-danger: #dc2626; /* softer glows so coloured shadows don't vibrate on a light bg */ --glow-primary: rgba(37, 99, 235, 0.18); --glow-secondary: rgba(124, 58, 237, 0.18); --glow-success: rgba(5, 150, 105, 0.18); --glow-warning: rgba(217, 119, 6, 0.18); --glow-danger: rgba(220, 38, 38, 0.18); }