/* ========================================================================== assets/css/tokens.css — Myritebook design tokens (single source of truth) Shared by the public site (via design-system.css) and the admin panel (via admin/assets/css/admin.css). Change a colour here and it changes everywhere. Light values live on :root; dark values are applied when (or ) carries the existing `dark-mode` class. ========================================================================== */ :root { /* ---- Brand blue (reference: primary buttons / active nav pill) ---- */ --mb-primary: #0A66F0; --mb-primary-rgb: 10, 102, 240; --mb-primary-50: #EEF5FF; --mb-primary-100: #DCEBFF; --mb-primary-200: #BFD8FE; --mb-primary-300: #93BDFD; --mb-primary-400: #5B9BFA; --mb-primary-500: #2F7DF6; --mb-primary-600: #0756CF; --mb-primary-700: #0645A8; --mb-primary-contrast: #FFFFFF; /* ---- Ink / neutrals ---- */ --mb-ink: #0B1B33; /* headings */ --mb-text: #1F2A3D; /* body copy */ --mb-muted: #5B6B82; /* secondary copy */ --mb-subtle: #8595AB; /* captions, meta */ --mb-border: #E3EAF3; --mb-border-strong: #CFDAE8; --mb-surface: #FFFFFF; /* cards */ --mb-surface-2: #F7FAFD; /* page background */ --mb-surface-3: #EEF5FC; /* tinted panels (reference: practice / projects / path blocks) */ --mb-overlay: rgba(11, 27, 51, 0.55); /* ---- Footer / dark chrome ---- */ --mb-night: #0D2031; --mb-night-2: #091B2A; --mb-night-line: rgba(255, 255, 255, 0.08); --mb-night-text: #B8C4D6; /* ---- Semantic ---- */ --mb-success: #119971; --mb-success-soft: #E3F7EF; --mb-warning: #E79A0C; --mb-warning-soft: #FEF4D9; --mb-danger: #E5484D; --mb-danger-soft: #FDECEC; --mb-info: #0EA5E9; --mb-info-soft: #E3F4FC; /* ---- Topic accents (reference: Popular Tutorials tiles) ---- */ --mb-html: #E44D26; --mb-html-soft: #FDEDE4; --mb-css: #1572B6; --mb-css-soft: #E3F1FD; --mb-js: #D9A400; --mb-js-soft: #FEF4D2; --mb-js-chip: #F7DF1E; --mb-py: #2E7D5B; --mb-py-soft: #E3F9E7; --mb-py-blue: #3776AB; --mb-php: #6E5FC7; --mb-php-soft: #ECE7FE; /* ---- Typography ---- */ --mb-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mb-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace; --mb-font-hand: 'Caveat', 'Segoe Print', cursive; --mb-fs-xs: 0.75rem; /* 12 */ --mb-fs-sm: 0.875rem; /* 14 */ --mb-fs-base: 1rem; /* 16 */ --mb-fs-md: 1.0625rem; /* 17 */ --mb-fs-lg: 1.25rem; /* 20 */ --mb-fs-xl: 1.5rem; /* 24 */ --mb-fs-2xl: 1.875rem; /* 30 */ --mb-fs-3xl: 2.375rem; /* 38 */ --mb-fs-hero: clamp(1.9rem, 0.9rem + 2.4vw, 3.05rem); --mb-lh-tight: 1.15; --mb-lh-snug: 1.35; --mb-lh-body: 1.6; /* ---- Spacing scale (4px base) ---- */ --mb-space-1: 4px; --mb-space-2: 8px; --mb-space-3: 12px; --mb-space-4: 16px; --mb-space-5: 20px; --mb-space-6: 24px; --mb-space-8: 32px; --mb-space-10: 40px; --mb-space-12: 48px; --mb-space-16: 64px; --mb-section-y: clamp(40px, 5vw, 64px); /* ---- Radius ---- */ --mb-radius-xs: 6px; --mb-radius-sm: 8px; --mb-radius: 12px; --mb-radius-lg: 16px; --mb-radius-xl: 20px; --mb-radius-pill: 999px; /* ---- Elevation (soft, blue-tinted like the reference) ---- */ --mb-shadow-xs: 0 1px 2px rgba(15, 41, 77, 0.06); --mb-shadow-sm: 0 2px 6px rgba(15, 41, 77, 0.06), 0 1px 2px rgba(15, 41, 77, 0.04); --mb-shadow: 0 6px 18px rgba(15, 41, 77, 0.08); --mb-shadow-lg: 0 14px 36px rgba(15, 41, 77, 0.12); --mb-shadow-primary: 0 8px 20px rgba(var(--mb-primary-rgb), 0.28); --mb-ring: 0 0 0 3px rgba(var(--mb-primary-rgb), 0.22); /* ---- Layout ---- */ --mb-container: 1280px; --mb-header-h: 72px; --mb-transition: 180ms ease; /* ---- Breakpoints (documentation only; CSS vars can't drive @media) ---- xs < 576 | sm ≥ 576 | md ≥ 768 | lg ≥ 992 | xl ≥ 1200 | xxl ≥ 1400 Same as Bootstrap 5 so grid classes and custom rules agree. */ } /* ---- Dark theme ------------------------------------------------------- */ html.dark-mode, body.dark-mode { --mb-primary: #3D8BFF; --mb-primary-rgb: 61, 139, 255; --mb-primary-50: rgba(61, 139, 255, 0.10); --mb-primary-100: rgba(61, 139, 255, 0.18); --mb-primary-200: rgba(61, 139, 255, 0.28); --mb-primary-300: #7FB2FF; --mb-primary-400: #6AA5FF; --mb-primary-500: #559AFF; --mb-primary-600: #2A7BF5; --mb-primary-700: #1C66D8; --mb-ink: #F1F5FB; --mb-text: #D7DFEA; --mb-muted: #9DACC2; --mb-subtle: #7C8BA1; --mb-border: #24354D; --mb-border-strong: #33475F; --mb-surface: #13233A; --mb-surface-2: #0B1728; --mb-surface-3: #102037; --mb-overlay: rgba(0, 0, 0, 0.6); --mb-night: #07111F; --mb-night-2: #050D18; --mb-success-soft: rgba(17, 153, 113, 0.16); --mb-warning-soft: rgba(231, 154, 12, 0.16); --mb-danger-soft: rgba(229, 72, 77, 0.16); --mb-info-soft: rgba(14, 165, 233, 0.16); --mb-html-soft: rgba(228, 77, 38, 0.14); --mb-css-soft: rgba(21, 114, 182, 0.18); --mb-js-soft: rgba(247, 223, 30, 0.12); --mb-py-soft: rgba(46, 125, 91, 0.18); --mb-php-soft: rgba(110, 95, 199, 0.20); --mb-js: #F2C94C; --mb-py: #5CC08F; --mb-php: #A99BF2; --mb-html: #FF7A55; --mb-css: #5AAEEA; --mb-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --mb-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3); --mb-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); --mb-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.45); }