/* ============================================================================= Course Bhai — Design Tokens design.md v3.0 "Premium Blue" · 2026-08-20 ----------------------------------------------------------------------------- THE SINGLE SOURCE OF TRUTH FOR COLOUR. No other stylesheet may define a hex. Load order matters: 1. main.{ltr,rtl}.min.css (Tabler vendor base) 2. coursebhai-tokens.css (this file — overrides Tabler's --tblr-*) 3. custom.{ltr,rtl}.css (public components, tokens only) 4. coursebhai-admin.css (admin shell, tokens only) Every contrast pair below was computed with tools/design/contrast-audit.php and passes WCAG 2.2 AA. Do not hand-tune a value without re-running it. ========================================================================== */ :root { /* ── Brand · blue ────────────────────────────────────────────────────── Sampled from the logo tile. --brand-600 is THE primary. */ --brand-50: #F1F4FB; --brand-100: #E0E6F8; --brand-200: #BCCCF8; --brand-300: #8DA8F4; /* dark-mode ink on brand tint 6.94:1 */ --brand-400: #5E85F0; /* dark-mode links 5.33:1 */ --brand-500: #3263EC; /* decorative / gradient stop */ --brand-600: #2A5DEB; /* PRIMARY — sampled from logo 5.44:1 */ --brand-700: #113DB8; /* hover / ink on --brand-50 8.81:1 */ --brand-800: #0E3295; /* pressed */ --brand-900: #0B2775; --brand-950: #071A4D; --brand-600-rgb: 42,93,235; /* ── Semantic ────────────────────────────────────────────────────────── Red is the logo swoosh. It means DANGER — never decoration. */ --danger-50: #FAF2F2; --danger-500: #DE3426; /* THE logo swoosh — sampled */ --danger-600: #D93122; /* fill, white text 4.76:1 */ --danger-700: #AF261B; --danger-800: #8E1F16; --danger-ink: #A82418; /* on --danger-50 6.50:1 */ --danger-300: #EF9A93; /* dark-mode ink on danger tint 7.48:1 */ --success-50: #ECFCF2; --success-500: #16A34A; --success-600: #12873D; /* fill, white text 4.61:1 */ --success-ink: #0F6B31; /* on --success-50 6.24:1 */ --success-300: #6EE7A0; /* dark-mode ink 9.76:1 */ --warning-50: #FFF7E6; --warning-500: #F59E0B; /* fill, DARK ink #111111 8.79:1 */ --warning-600: #D97706; /* text/icon */ --warning-ink: #8A4B04; /* on --warning-50 6.38:1 */ --warning-300: #FCD34D; /* dark-mode ink 9.65:1 */ --info-50: #ECFAFD; --info-600: #0E7490; /* fill, white text 5.36:1 */ --info-ink: #0E5F73; /* on --info-50 6.77:1 */ --info-300: #67E8F9; /* dark-mode ink 10.90:1 */ /* ── Neutrals · light ──────────────────────────────────────────────── */ --bg: #FAFAFA; --bg-deep: #F1F1F3; --surface: #FFFFFF; --surface-2: #FAFAFA; --surface-3: #F7F7F8; --surface-4: #FFFFFF; --ink: #1D1D1B; /* logo wordmark colour — 16.88:1 */ --ink-soft: #2B2B2B; /* 14.16:1 */ --muted: #666666; /* 5.74:1 */ --faint: #767676; /* 4.54:1 — was #999999 @ 2.85:1 (FAILED) */ --faint-deco: #949494; /* non-text decoration ONLY */ --line: #ECECEC; --line-soft: #F1F1F1; --line-strong: #DADADA; /* decorative rules only — 1.40:1 */ --line-control: #8F8F8F; /* input/checkbox borders — 3.23:1 (1.4.11)*/ /* ── Tinted surfaces (light) ───────────────────────────────────────── */ --brand-tint: var(--brand-50); --danger-tint: var(--danger-50); --success-tint: var(--success-50); --warning-tint: var(--warning-50); --info-tint: var(--info-50); /* ── Radius ────────────────────────────────────────────────────────── */ --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-2xl:24px; --r-pill:999px; /* ── Elevation ─────────────────────────────────────────────────────── */ --sh-xs: 0 1px 2px rgba(0,0,0,.05); --sh-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05); --sh-md: 0 2px 4px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.07); --sh-lg: 0 12px 32px rgba(0,0,0,.12); --sh-pop: 0 16px 48px rgba(0,0,0,.16); /* ── Motion ────────────────────────────────────────────────────────── */ --t-fast:.12s; --t:.18s; --t-slow:.24s; --ease: cubic-bezier(.16,1,.3,1); /* ── Focus ─────────────────────────────────────────────────────────── */ --ring: 0 0 0 3px rgba(42,93,235,.28); /* ── Type ──────────────────────────────────────────────────────────── */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color-scheme: light; } /* ───────────────────────────────────────────────────────────────────────── Legacy aliases ------------------------------------------------------------------------- custom.*.css, coursebhai-admin.css and ~80 Blade files were written against the v2 names. Aliasing them onto the v3 scale rebases all of that code without touching it, and keeps a single place to retire them later. New code MUST use the scale names above. ───────────────────────────────────────────────────────────────────────── */ :root { --brand: var(--brand-600); --brand-ink: var(--brand-700); --brand2: var(--brand-700); --brand-light: var(--brand-400); --brand-soft: var(--brand-50); --brand-soft2: #F7FAFE; --brand-line: var(--brand-200); /* v2 collapsed these into the red family. v3 gives each its own hue. */ --red: var(--danger-600); --red-soft: var(--danger-50); --red-ink: var(--danger-ink); --green: var(--success-600);--green-soft: var(--success-50); --green-ink: var(--success-ink); --amber: var(--warning-600);--amber-soft: var(--warning-50); --amber-ink: var(--warning-ink); --sky: var(--info-600); --sky-soft: var(--info-50); --sky-ink: var(--info-ink); --violet: var(--brand-800); --violet-soft: var(--brand-100); --violet-ink: var(--brand-900); --gold: #F5A623; } /* ───────────────────────────────────────────────────────────────────────── Tabler bridge ------------------------------------------------------------------------- Tabler drives every un-reskinned component through --tblr-*. The -rgb triplets back the rgba() tints behind .bg-*-lt, .text-* and .alert-*, so BOTH the hex and the triplet must be remapped or tints keep the old hue. ───────────────────────────────────────────────────────────────────────── */ :root { --tblr-primary: #2A5DEB; --tblr-primary-rgb: 42,93,235; --tblr-blue: #2A5DEB; --tblr-blue-rgb: 42,93,235; --tblr-indigo: #0E3295; --tblr-indigo-rgb: 14,50,149; --tblr-purple: #0B2775; --tblr-purple-rgb: 11,39,117; --tblr-danger: #D93122; --tblr-danger-rgb: 217,49,34; --tblr-red: #D93122; --tblr-red-rgb: 217,49,34; --tblr-pink: #DE3426; --tblr-pink-rgb: 222,52,38; --tblr-orange: #F59E0B; --tblr-orange-rgb: 245,158,11; --tblr-success: #12873D; --tblr-success-rgb: 18,135,61; --tblr-green: #12873D; --tblr-green-rgb: 18,135,61; --tblr-teal: #0E7490; --tblr-teal-rgb: 14,116,144; --tblr-cyan: #0E7490; --tblr-cyan-rgb: 14,116,144; --tblr-info: #0E7490; --tblr-info-rgb: 14,116,144; --tblr-warning: #F59E0B; --tblr-warning-rgb: 245,158,11; --tblr-yellow: #F59E0B; --tblr-yellow-rgb: 245,158,11; --tblr-link-color: #2A5DEB; --tblr-link-hover-color: #113DB8; --tblr-border-color: #ECECEC; --tblr-body-bg: #FAFAFA; --tblr-body-color: #2B2B2B; --tblr-font-sans-serif: var(--font); } /* ============================================================================= DARK THEME Mechanism: body.theme-dark (Tabler convention — the site's only mechanism). Redefines TOKENS only. Component rules are never duplicated for dark. ========================================================================== */ body.theme-dark { color-scheme: dark; --bg: #0E0E10; --bg-deep: #0A0A0C; --surface: #141416; --surface-2: #18181B; --surface-3: #1C1C1F; --surface-4: #1F1F23; /* dropdowns/popovers — lifts off the card */ --ink: #F5F5F6; /* 16.89:1 */ --ink-soft: #DCDCDF; /* 13.44:1 */ --muted: #A0A0A6; /* 7.07:1 */ --faint: #8A8A91; /* 5.37:1 — was #77777D @ 4.13:1 */ --faint-deco: #6E6E75; --line: rgba(255,255,255,.09); --line-soft: rgba(255,255,255,.06); --line-strong: rgba(255,255,255,.14); --line-control: rgba(255,255,255,.38); /* 3.56:1 — WCAG 1.4.11 */ /* Tints: hue @16% over --surface. Ink is the -300 step. */ --brand-tint: rgba(42,93,235,.16); --danger-tint: rgba(222,52,38,.16); --success-tint: rgba(22,163,74,.16); --warning-tint: rgba(245,158,11,.16); --info-tint: rgba(14,116,144,.18); /* Saturated FILLS hold; TEXT colours lighten. --brand-600 as text on a dark surface is 3.79:1 and is never permitted. */ --brand-soft: var(--brand-tint); --brand-soft2: rgba(42,93,235,.10); --brand-line: rgba(94,133,240,.28); --brand-ink: var(--brand-300); --brand-light: var(--brand-400); --red-soft: var(--danger-tint); --red-ink: var(--danger-300); --green-soft: var(--success-tint); --green-ink: var(--success-300); --amber-soft: var(--warning-tint); --amber-ink: var(--warning-300); --sky-soft: var(--info-tint); --sky-ink: var(--info-300); --violet-soft: rgba(42,93,235,.18); --violet-ink: var(--brand-300); /* Shadows deepen — on near-black, only a genuinely darker shadow reads. */ --sh-xs: 0 1px 2px rgba(0,0,0,.5); --sh-sm: 0 1px 3px rgba(0,0,0,.55); --sh-md: 0 8px 24px rgba(0,0,0,.5); --sh-lg: 0 14px 40px rgba(0,0,0,.6); --sh-pop: 0 18px 50px rgba(0,0,0,.65); --ring: 0 0 0 3px rgba(94,133,240,.32); /* Tabler dark bridge */ --tblr-body-bg: #0E0E10; --tblr-body-bg-rgb: 14,14,16; --tblr-body-color: #DCDCDF; --tblr-body-color-rgb: 220,220,223; --tblr-border-color: rgba(255,255,255,.09); --tblr-bg-surface: #141416; --tblr-bg-surface-dark: #0A0A0C; --tblr-bg-surface-secondary: #18181B; --tblr-dark: #0E0E10; --tblr-dark-rgb: 14,14,16; --tblr-link-color: #5E85F0; --tblr-link-hover-color: #8DA8F4; } /* View-transition backdrop must follow the active theme (see .ez-tt-* in custom.*.css, which reads these two). */ :root { --ez-tt-bg-light:#FAFAFA; --ez-tt-bg-dark:#0E0E10; } /* ============================================================================= Global guarantees — design.md §6, §7 ========================================================================== */ /* Focus is never removed. :focus-visible for pointer users, :focus as the fallback for browsers/inputs that don't resolve :focus-visible. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; box-shadow: var(--ring); border-radius: var(--r-xs); } body.theme-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--brand-400); } /* Controls must clear 3:1 at their boundary (WCAG 1.4.11). Tabler ships --tblr-border-color on inputs, which is a 1.40:1 decorative rule. */ :where(.form-control, .form-select, .form-check-input, .input-group-text) { border-color: var(--line-control); } /* Reduced motion — required, not optional. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================================= Vendor overrides — Tabler literals ----------------------------------------------------------------------------- design.md §8.1 forbids hand-editing main.{ltr,rtl}.min.css. Most of Tabler resolves through var(--tblr-*) and is already rebased by the bridge above, but 53 compiled rule blocks carry literal hexes from the v2 red build. They are re-pointed here instead. This also repairs Tabler's scrambled colour semantics: in the v2 build .link-info, .status-danger and .toast-azure were ALL the same red, so an info toast and an error toast were indistinguishable. ========================================================================== */ /* ── Validation — these are DANGER, not brand. In v2 they shared the brand hex, which is the conflation v3 exists to fix. */ .invalid-feedback, .form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label { color: var(--danger-600); } .form-control.is-invalid, .was-validated .form-control:invalid, .form-select.is-invalid, .was-validated .form-select:invalid, .form-check-input.is-invalid, .was-validated .form-check-input:invalid { border-color: var(--danger-600); } .form-control.is-invalid:focus, .was-validated .form-control:invalid:focus, .form-select.is-invalid:focus, .was-validated .form-select:invalid:focus { border-color: var(--danger-600); box-shadow: 0 0 0 .25rem rgba(217,49,34,.25); } .form-check-input.is-invalid:checked, .was-validated .form-check-input:invalid:checked { background-color: var(--danger-600); } /* Required-field asterisk stays red — it is a constraint marker, not decoration. */ .col-form-label.required::after, .form-label.required::after, .form-check-label.required::after { color: var(--danger-600); } /* ── Brand-driven odds and ends ─────────────────────────────────────────── */ .form-check-input[type=checkbox]:indeterminate { background-color: var(--brand-600); border-color: var(--brand-600); } .list-group-item.active { border-left-color: var(--brand-600); } .loader { color: var(--brand-600); } /* ── Link utilities ─────────────────────────────────────────────────────── */ .link-primary, .link-blue, .link-tabler { color: var(--brand-600) !important; } .link-azure { color: var(--brand-500) !important; } .link-indigo { color: var(--brand-800) !important; } .link-purple { color: var(--brand-900) !important; } .link-info, .link-cyan, .link-teal { color: var(--info-600) !important; } .link-danger, .link-red { color: var(--danger-600)!important; } .link-pink { color: var(--danger-500)!important; } body.theme-dark .link-primary, body.theme-dark .link-blue, body.theme-dark .link-tabler { color: var(--brand-400) !important; } body.theme-dark .link-danger, body.theme-dark .link-red { color: var(--danger-300)!important; } body.theme-dark .link-info, body.theme-dark .link-cyan, body.theme-dark .link-teal { color: var(--info-300) !important; } /* ── Status dots ────────────────────────────────────────────────────────── */ .status-primary, .status-blue, .status-tabler { --tblr-status-color: #2A5DEB; --tblr-status-color-rgb: 42,93,235; } .status-azure { --tblr-status-color: #3263EC; --tblr-status-color-rgb: 50,99,236; } .status-indigo { --tblr-status-color: #0E3295; --tblr-status-color-rgb: 14,50,149; } .status-purple { --tblr-status-color: #0B2775; --tblr-status-color-rgb: 11,39,117; } .status-info, .status-cyan, .status-teal { --tblr-status-color: #0E7490; --tblr-status-color-rgb: 14,116,144; } .status-danger, .status-red { --tblr-status-color: #D93122; --tblr-status-color-rgb: 217,49,34; } .status-pink { --tblr-status-color: #DE3426; --tblr-status-color-rgb: 222,52,38; } /* ── Toasts ─────────────────────────────────────────────────────────────── */ .toast-primary, .toast-blue, .toast-tabler { --tblr-toast-color: #2A5DEB; } .toast-azure { --tblr-toast-color: #3263EC; } .toast-indigo { --tblr-toast-color: #0E3295; } .toast-purple { --tblr-toast-color: #0B2775; } .toast-info, .toast-cyan, .toast-teal { --tblr-toast-color: #0E7490; } .toast-danger, .toast-red { --tblr-toast-color: #D93122; } .toast-pink { --tblr-toast-color: #DE3426; } /* ============================================================================= Vendor overrides — third-party widgets ----------------------------------------------------------------------------- SweetAlert2, Flatpickr and Toastr ship their own compiled palettes carrying the v2 brand red. They are vendor files (§8.1: never hand-edit), so their brand-bearing rules are re-pointed here. This also separates roles the v2 build had merged: the SweetAlert CONFIRM and DENY buttons were the same red, so "Yes, delete it" and "Cancel" were chromatically identical on a destructive confirm dialog. ========================================================================== */ /* ── SweetAlert2 ─────────────────────────────────────────────────────────── */ .swal2-styled.swal2-confirm { background-color: var(--brand-600) !important; } .swal2-styled.swal2-confirm:hover { background-color: var(--brand-700) !important; } .swal2-styled.swal2-confirm:focus-visible { box-shadow: var(--ring) !important; } /* Destructive affirmative — must NOT read as the primary action. */ .swal2-styled.swal2-deny { background-color: var(--danger-600) !important; } .swal2-styled.swal2-deny:hover { background-color: var(--danger-700) !important; } /* v2 used #777 here — 4.48:1 with white, just under AA. */ .swal2-styled.swal2-cancel { background-color: #6B6B6B !important; } .swal2-styled.swal2-cancel:hover { background-color: #565656 !important; } .swal2-loader { border-color: var(--brand-600) transparent var(--brand-600) transparent !important; } .swal2-close:hover { color: var(--danger-600); } .swal2-icon.swal2-error { border-color: var(--danger-600); color: var(--danger-600); } .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--danger-600); } .swal2-icon.swal2-success { border-color: var(--success-600); color: var(--success-600); } .swal2-icon.swal2-warning { border-color: var(--warning-600); color: var(--warning-600); } .swal2-icon.swal2-info, .swal2-icon.swal2-question { border-color: var(--info-600); color: var(--info-600); } .swal2-input.swal2-inputerror, .swal2-textarea.swal2-inputerror { border-color: var(--danger-600) !important; box-shadow: 0 0 2px var(--danger-600) !important; } .swal2-validation-message { background: var(--danger-50); color: var(--danger-ink); } .swal2-validation-message::before { background-color: var(--danger-600); } .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step { background: var(--brand-600); } .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step, .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line { /* v2 left white-on-#dadada here: 1.40:1, effectively invisible. */ background: var(--line-strong); color: var(--ink-soft); } body.theme-dark .swal2-popup { background: var(--surface-4); color: var(--ink); } body.theme-dark .swal2-title { color: var(--ink); } body.theme-dark .swal2-html-container { color: var(--ink-soft); } body.theme-dark .swal2-input, body.theme-dark .swal2-textarea, body.theme-dark .swal2-select { background: var(--surface-2); color: var(--ink); border-color: var(--line-control); } /* ── Flatpickr ───────────────────────────────────────────────────────────── */ .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.endRange.nextMonthDay { background: var(--brand-600); border-color: var(--brand-600); color: #fff; } .flatpickr-day.today { border-color: var(--brand-400); } .flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--brand-600); border-color: var(--brand-600); color: #fff; } .flatpickr-day.inRange { background: var(--brand-50); border-color: var(--brand-50); } body.theme-dark .flatpickr-calendar { background: var(--surface-4); color: var(--ink); } body.theme-dark .flatpickr-day { color: var(--ink-soft); } body.theme-dark .flatpickr-day.inRange { background: var(--brand-tint); border-color: transparent; color: var(--brand-300); } /* ── Toastr ──────────────────────────────────────────────────────────────── */ .toast-error { background-color: var(--danger-600) !important; } .toast-success { background-color: var(--success-600) !important; } .toast-info { background-color: var(--info-600) !important; } .toast-warning { background-color: var(--warning-600) !important; } /* ── Nestable (menu builder) ─────────────────────────────────────────────── */ .dd-handle:hover { color: var(--brand-600); } .dd-placeholder { background: var(--brand-50); border-color: var(--brand-400); }