/** * @file public/css/variables.css * @description Centralized CSS custom properties for MCQplex. * * DESIGN RATIONALE * ──────────────── * 1. PALETTE CHOICE * Primary: Deep navy (#0B1120) — professional, trustworthy; standard for * education & SaaS dashboards (StackOverflow, Khan Academy). * Accent: Warm saffron (#E8820A) — high-contrast CTA that passes WCAG AA * on both white and navy backgrounds. * * 2. DARK MODE STRATEGY * Dark tokens sit inside html.dark-mode so every component that references * a --color-* variable automatically switches. We follow the same surface * hierarchy SoloLearn uses: bg 0 → surface 1 → elevated 2. * * 3. MEDALS (Leaderboard) * Gold / Silver / Bronze use time-tested metallic hex values plus subtle * glow animations so position 1-3 feel rewarding. * * 4. SPACING SCALE * 4-base scale (4 / 8 / 12 / 16 …) — consistent vertical rhythm. * * 5. SHADOWS * Three tiers (sm / md / lg) with navy-tinted rgba so they feel warm in * light mode and don't wash out in dark mode. * * @note Load this file FIRST — before base.css and every other stylesheet. * * ───────────────────────────────────────────────────────────────────────────── * THEMING SYSTEM (how it fits together) * ───────────────────────────────────────────────────────────────────────────── * • :root below holds the LIGHT theme — the default, semantic token API that * every component reads (--color-bg, --color-surface, --color-text, * --color-text-muted, --color-border, --color-accent, --color-on-accent, …). * • The DARK theme reassigns those same tokens in base.css. It is applied with * NO JavaScript via `@media (prefers-color-scheme: dark)` (correct theme on * first paint), and can be overridden by a root class: * → force light (even on a dark OS) * → force dark (what the toggle sets) * The optional inline script in partials/header.ejs only re-applies a user's * EXPLICIT saved choice; with no saved choice the OS media query decides, so * the default experience needs zero JS. * * ADD-A-THEME TEMPLATE — no component refactor needed, just one block: * html.theme-sepia { * color-scheme: light; * --color-bg: #F4ECD8; --color-surface: #FBF5E6; --color-text: #4A3B28; * --color-border: #E0D2B4; --color-accent: #B5651D; --color-on-accent:#FFF; * … (set every token this theme changes) … * } * Then make the toggle add `theme-sepia`. Because components only read tokens, * nothing else changes. Verify every fg/bg pair ≥ 4.5:1 (text) / 3:1 (UI). * ───────────────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* ─── Primary — deep midnight navy ────────────────────────────────────────── WHY: Conveys authority and calm. Used for text headings, the header bar, and the footer background. The -mid and -light variants create a monochromatic depth scale without introducing a new hue. */ --color-primary: #0B1120; --color-primary-mid: #1B2E4B; --color-primary-light: #EEF2F7; /* ─── Accent — warm saffron / orange ──────────────────────────────────────── WHY: Saffron is a warm, attention-grabbing hue that is culturally resonant in Nepal while meeting WCAG AA contrast on white (4.6:1) and on navy (3.9:1). Used for CTAs, active tabs, and interactive states. */ --color-accent: #E8820A; --color-accent-light: #FEF3E2; --color-accent-dark: #C4671A; /* ─── Semantic "on-" foreground tokens ────────────────────────────────────── WHY: the colour that goes ON a coloured surface, named by intent. These do NOT remap per theme because the surfaces they sit on (the saffron accent, the navy primary) are the same in light AND dark. Critically, white text on the saffron accent is only 2.75:1 (fails WCAG AA); navy-on-saffron is 6.84:1, so --color-on-accent is navy. Use these on buttons/pills/badges instead of hard-coding white. */ --color-on-accent: #0B1120; /* navy on saffron — 6.84:1 (AA) */ --color-on-primary: #FFFFFF; /* white on navy primary — 18.8:1 (AAA) */ --color-on-danger: #FFFFFF; /* white on danger red — 4.83:1 (AA) */ /* ─── Semantic — feedback colours ─────────────────────────────────────────── WHY: Standard traffic-light palette; every colour is 4.5:1+ on white. */ --color-success: #16A34A; --color-success-light: #DCFCE7; --color-success-strong: #166534; --color-danger: #DC2626; --color-danger-light: #FEE2E2; --color-danger-strong: #991B1B; --color-warning: #D97706; --color-warning-light: #FEF3C7; --color-warning-soft: #FEFCE8; --color-warning-strong: #854D0E; --color-info: #0284C7; --color-info-light: #DBEAFE; --color-info-strong: #1D4ED8; --color-info-soft: #60A5FA; --color-info-pale: #F0F9FF; --color-muted: #757575; --color-error: var(--color-danger); --color-error-light: var(--color-danger-light); --color-teal: #0F766E; --color-teal-light: #2DD4BF; --color-violet: #7C3AED; --color-violet-light: #A78BFA; --color-orange-strong: #C2410C; --color-orange-soft: #FB923C; --color-indigo: #4C6EF5; --color-indigo-light: #E0E7FF; --color-indigo-strong: #3730A3; --color-divider-soft: #E5E7EB; --color-surface-overlay-08: rgba(255, 255, 255, 0.08); --color-surface-overlay-12: rgba(255, 255, 255, 0.12); --color-surface-overlay-15: rgba(255, 255, 255, 0.15); --color-text-on-dark-soft: rgba(255, 255, 255, 0.82); --color-text-on-dark-muted: rgba(255, 255, 255, 0.6); --color-text-on-dark-subtle: rgba(255, 255, 255, 0.4); --color-google-blue: #4285F4; --color-google-green: #34A853; --color-google-yellow: #FBBC05; --color-google-red: #EA4335; /* ─── Neutrals — surfaces & borders ───────────────────────────────────────── WHY: A very light grey background (#F8F9FB) gives cards visual separation from the page without the harshness of pure grey. Surface white is reserved for elevated cards/modals. */ --color-surface: #FFFFFF; --color-surface-alt: #F1F5F9; --color-surface-muted: #F8FAFC; --color-bg: #F8F9FB; --color-border: #E2E8F0; --color-text: #111827; --color-text-muted: #64748B; --color-text-subtle: #6B7280; --color-overlay-soft: rgba(10, 22, 40, 0.35); --color-overlay: rgba(10, 22, 40, 0.6); --color-overlay-strong: rgba(7, 11, 20, 0.8); /* ─── Dark-mode surface hierarchy ─────────────────────────────────────────── WHY: Following SoloLearn's 3-tier dark surface model: bg (#070B14) → surface (#0F1729) → elevated (#1A2540) This creates natural depth without relying on heavy shadows. */ --color-dark-bg: #070B14; --color-dark-surface: #0F1729; --color-dark-elevated: #1A2540; --color-dark-border: #1E3A5F; --color-dark-text: #E2E8F0; --color-dark-text-muted:#94A3B8; /* ─── Leaderboard medals ──────────────────────────────────────────────────── WHY: Classic metallic palette. Each medal gets a solid bg, text colour, and a subtle glow shadow for the animation pulse. */ --medal-gold-bg: #FEF3C7; --medal-gold-border: #D97706; --medal-gold-text: #92400E; --medal-gold-glow: rgba(217, 119, 6, 0.25); --medal-silver-bg: #F1F5F9; --medal-silver-border: #94A3B8; --medal-silver-text: #334155; --medal-silver-glow: rgba(148, 163, 184, 0.3); --medal-bronze-bg: #FFF7ED; --medal-bronze-border: #C2410C; --medal-bronze-text: #7C2D12; --medal-bronze-glow: rgba(194, 65, 12, 0.25); /* ─── Rarity tiers (badge gallery & result rewards) ───────────────────────── WHY: Shared by profile.css badge cells and layout.css result badges so the four collectible tiers read identically wherever they appear. */ --rarity-common: #9E9E9E; --rarity-rare: #2196F3; --rarity-epic: #9C27B0; --rarity-legendary: #FF9800; /* ─── Solid metallic ranks (profile rank cards & prestige rings) ──────────── */ --color-gold: #FFD700; --color-gold-text: #B8860B; --color-silver: #C0C0C0; --color-silver-text: #8A8A8A; --color-bronze: #CD7F32; --color-bronze-text: #B06A28; /* ─── Profile role covers (hero banner gradients) ─────────────────────────── */ --cover-student: linear-gradient(135deg, #1976D2 0%, #7C4DFF 100%); --cover-teacher: linear-gradient(135deg, #00897B 0%, #43A047 100%); --cover-leader: linear-gradient(135deg, #00838F 0%, #1976D2 100%); --cover-admin: linear-gradient(135deg, #5E35B1 0%, #3949AB 100%); /* ─── Profile prestige rings & role pills ─────────────────────────────────── */ --ring-premium: var(--color-gold); --ring-staff: #2196F3; --ring-leader: var(--color-success); --pill-premium: linear-gradient(135deg, #F59E0B, #D97706); --pill-staff: #2196F3; --pill-leader: var(--color-success); /* ─── Streak heat-map scale (GitHub-style green ramp) ─────────────────────── */ --heat-1: #9BE9A8; --heat-2: #40C463; --heat-3: #30A14E; --heat-4: #216E39; /* ─── Always-white text/icon on permanently dark or saturated surfaces ────── WHY: --color-surface and --color-text REMAP in dark mode, so neither can be used for text/icons sitting on a surface that stays dark in BOTH themes — navy gradient headers, accent buttons, coloured pills, dark tooltips. This token never remaps, so it is the correct choice in those contexts. */ --color-text-on-dark: #FFFFFF; /* ─── Fonts ───────────────────────────────────────────────────────────────── DM Serif Display for display headings (elegant, serif). DM Sans for body (clean geometric sans-serif). Noto Sans Devanagari for Nepali text. JetBrains Mono for code / timers. */ --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-np: 'Noto Sans Devanagari', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* ─── Type scale (modular 1.250 — Major Third) ────────────────────────────── */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px — hero headings */ /* ─── Spacing (4-base scale) ──────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ─── Border radii ────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; /* ─── Header ──────────────────────────────────────────────────────────────── */ --header-height: 64px; /* The logo is a horizontal wordmark lockup (~3.9:1 after trimming its padding), so it's sized by HEIGHT and sits comfortably inside the 56px bar with a little breathing room. (Was 60px, which — with the old padded square art — rendered the lockup tiny.) */ --logo-max-height: 48px; /* ─── Shadows (navy-tinted, 3 tiers) ──────────────────────────────────────── WHY: Coloured shadows feel richer than grey and degrade gracefully in dark mode where grey shadows disappear. */ --shadow-sm: 0 1px 3px rgba(11,17,32,0.06), 0 1px 2px rgba(11,17,32,0.04); --shadow-md: 0 4px 16px rgba(11,17,32,0.08), 0 2px 4px rgba(11,17,32,0.04); --shadow-lg: 0 20px 40px rgba(11,17,32,0.12), 0 4px 8px rgba(11,17,32,0.06); --shadow-xl: 0 32px 64px rgba(11,17,32,0.18), 0 8px 16px rgba(11,17,32,0.08); --shadow-accent: 0 4px 20px rgba(232,130,10,0.25); /* ─── Glow helpers for interactive states ─────────────────────────────────── WHY: Extracted from inline