/* * Jackrabbit Design Tokens * Single source of truth for all theme variables. * Dark/light mode is driven by the `.dark-mode` class on . */ /* ============================================ Light Mode (default) Warm stone palette with amber accent. ============================================ */ :root { /* Text — warm stone greys, not cold slate */ --text-color: #292524; --text-muted: #78716c; --text-subtle: #a8a29e; /* Backgrounds — warm off-whites */ --bg-primary: #fafaf9; --bg-secondary: #f5f5f4; --bg-tertiary: #e7e5e4; /* Cards — true white pops against warm page bg */ --card-bg: #ffffff; --card-border: #d6d3d1; --card-shadow: 0 1px 12px rgba(28, 25, 23, 0.06); /* Borders */ --border-color: #d6d3d1; --border-focus: #b45309; /* Buttons */ --btn-primary-bg: #b45309; --btn-primary-text: #ffffff; --btn-primary-hover: #92400e; --btn-secondary-bg: #f5f5f4; --btn-secondary-text: #44403c; --btn-secondary-hover: #e7e5e4; --btn-danger-bg: #fef2f2; --btn-danger-text: #dc2626; --btn-danger-hover: #fecaca; --btn-success-bg: #059669; --btn-success-text: #ffffff; --btn-success-hover: #047857; /* Semantic colors — amber primary */ --primary: #b45309; --primary-light: #fffbeb; --primary-rgb: 180, 83, 9; --primary-transparent: rgba(180, 83, 9, 0.15); --danger: #dc2626; --danger-light: #fef2f2; --danger-rgb: 220, 38, 38; --success: #1a7f37; --success-light: #e0f7e9; --success-rgb: 26, 127, 55; --offense-color: #2563eb; --defense-color: #dc2626; /* Play-card side indicator */ --offense-bg: #eff6ff; --offense-text: #1d4ed8; --offense-border: #93c5fd; --defense-bg: #fef2f2; --defense-text: #b91c1c; --defense-border: #fca5a5; /* Inputs */ --input-bg: #ffffff; --input-border: #d6d3d1; --input-text: #292524; --input-focus: #b45309; /* Radius — tighter, more refined */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; /* Shadows — warm-tinted, more presence */ --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06); --shadow-md: 0 3px 10px rgba(28, 25, 23, 0.09); --shadow-lg: 0 6px 24px rgba(28, 25, 23, 0.13); --shadow-xl: 0 10px 40px rgba(28, 25, 23, 0.18); /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2.5rem; /* Clip variables */ --clip-bg: #faf9f7; --player-bg: #1c1917; /* Backoffice accent (slate — intentionally distinct from main app) */ --backoffice-bg: #1e293b; --backoffice-bg-light: #334155; --backoffice-border: #475569; --backoffice-text: #f8fafc; /* Classroom quiz status strips */ --quiz-due-bg: #dc2626; /* Bright filled red — pending/due soon */ --quiz-due-text: #ffffff; --quiz-fail-bg: #fecaca; /* Muted dusty red — finalised, failed */ --quiz-fail-text: #991b1b; --quiz-pass-bg: #bbf7d0; /* Muted dark green — finalised, passed */ --quiz-pass-text: #15803d; /* Top-bar height (compact) */ --topbar-height: 48px; } /* ============================================ Dark Mode — warm charcoal, not cold blue-grey ============================================ */ html.dark-mode { --text-color: #e7e5e4; --text-muted: #a8a29e; --text-subtle: #78716c; --bg-primary: #1c1917; --bg-secondary: #211e1b; --bg-tertiary: #292524; --card-bg: #292524; --card-border: #44403c; --card-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); --border-color: #44403c; --border-focus: #d97706; --btn-primary-bg: #b45309; --btn-primary-text: #ffffff; --btn-primary-hover: #92400e; --btn-secondary-bg: #292524; --btn-secondary-text: #e7e5e4; --btn-secondary-hover: #44403c; --btn-danger-bg: #dc2626; --btn-danger-text: #ffffff; --btn-danger-hover: #fecaca; --btn-success-bg: #059669; --btn-success-text: #ffffff; --btn-success-hover: #047857; --primary: #d97706; --primary-light: #292524; --primary-rgb: 217, 119, 6; --primary-transparent: rgba(217, 119, 6, 0.2); --danger: #dc2626; --danger-light: #292524; --danger-rgb: 220, 38, 38; --success: #2ea043; --success-light: #1a3a2a; --success-rgb: 46, 160, 67; --offense-bg: #1e293b; --offense-text: #60a5fa; --offense-border: #334155; --defense-bg: #2d1a1a; --defense-text: #f87171; --defense-border: #7f1d1d; --input-bg: #1c1917; --input-border: #44403c; --input-text: #e7e5e4; --input-focus: #d97706; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.16); --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.22); --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.28); --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.35); --clip-bg: #292524; --player-bg: #1c1917; /* Classroom quiz status strips */ --quiz-due-bg: #dc2626; /* Bright filled red — same vivid in dark */ --quiz-due-text: #ffffff; --quiz-fail-bg: #7f1d1d; /* Deep wine red — finalised, failed */ --quiz-fail-text: #fca5a5; --quiz-pass-bg: #14532d; /* Deep forest green — finalised, passed */ --quiz-pass-text: #86efac; /* Backoffice accent stays the same in dark mode */ --backoffice-bg: #1e293b; --backoffice-bg-light: #334155; --backoffice-border: #475569; --backoffice-text: #f8fafc; } /* System preference fallback (only if no explicit class) */ @media (prefers-color-scheme: dark) { html:not(.dark-mode):not(.light-mode) { --text-color: #e7e5e4; --text-muted: #a8a29e; --text-subtle: #78716c; --bg-primary: #1c1917; --bg-secondary: #211e1b; --bg-tertiary: #292524; --card-bg: #292524; --card-border: #44403c; --card-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); --border-color: #44403c; --input-bg: #1c1917; --input-border: #44403c; --input-text: #e7e5e4; } }