/*! * Communityline Portal - Learning Management System * Copyright (c) 2025-2026 Jeremiah Phillippe Sison. All rights reserved. * Proprietary - All Rights Reserved. See LICENSE.md. * * CLP DESIGN SYSTEM v1.0 — design tokens (Phase 1, Batch B). * The single source of truth for color, type, spacing, radius, and elevation * across all four surfaces. Spec/acceptance reference: the "CLP Design System * v1.0" style guide. Load order on every surface: * bootstrap → clp-ds.css → theme css → polish layers → partials.branding * The branding partial may override brand tokens (--clp-primary etc.) at * runtime; it must never override status colors or their contrast pairs. * Components consume tokens only — no raw hex in component/page CSS. */ :root { /* ---- Brand (Inter-Asia Academy crest: royal #2a6ace · sky #8dc8ef) ---- */ --clp-primary: #2a6ace; --clp-primary-hover: #1b4c9c; --clp-primary-soft: #eaf3fc; --clp-accent-sky: #8dc8ef; --clp-accent-green: #3f8fdd; /* legacy name — now the sky-strong brand accent */ --clp-accent-gold: #f4ce0a; /* decorative only (star ratings) — never text */ /* ---- Status triples: base = fills/large · -text = AA small text · -soft = tint bg ---- */ --clp-success: #1ba84c; --clp-success-text: #157a3a; --clp-success-soft: #e9f7ee; --clp-warning: #e8a90a; --clp-warning-text: #7a5b00; --clp-warning-soft: #fdf6e3; --clp-danger: #e0554e; --clp-danger-text: #b42318; --clp-danger-soft: #fdefee; --clp-info: #2f74d0; --clp-info-text: #1d5cb3; --clp-info-soft: #edf4fd; /* ---- Neutrals ---- */ --clp-ink: #101828; --clp-body: #344054; --clp-muted: #667085; --clp-faint: #98a2b8; --clp-border: #eaecf0; --clp-border-strong: #d0d5dd; --clp-soft: #f8f9fb; --clp-surface: #ffffff; --clp-canvas: #f4f6fb; /* ---- Typography ---- */ --clp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --clp-mono: ui-monospace, 'Cascadia Code', Consolas, monospace; --clp-fs-display: 38px; --clp-fs-h1: 24px; --clp-fs-h2: 20px; --clp-fs-h3: 16px; --clp-fs-read: 16px; --clp-fs-ui: 14px; --clp-fs-sm: 13px; --clp-fs-caption: 12.5px; /* ---- Spacing (4px base) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ---- Radius (exactly four) ---- */ --r-control: 8px; --r-card: 12px; --r-modal: 18px; --r-pill: 999px; /* ---- Elevation ---- */ --sh-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .06); --sh-md: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 40px rgba(16, 24, 40, .09); --sh-lg: 0 2px 6px rgba(27, 76, 156, .08), 0 30px 70px rgba(27, 76, 156, .20); --sh-focus: 0 0 0 3px rgba(42, 106, 206, .28); --clp-focus-ring: rgba(42, 106, 206, .45); /* ---- Motion ---- */ --t-fast: 120ms ease; --t-base: 200ms ease; /* ---- Charts ---- */ --ch-1: #2a6ace; --ch-2: #1ba84c; --ch-3: #2f74d0; --ch-4: #e8a90a; --ch-5: #667085; --ch-grid: #eaecf0; } /* Dark theme — same token names, redefined. Admin toggles .dark-theme on , the frontend dusk mode on ; [data-clp-theme] is the forward-looking hook. */ html.dark-theme, body.dark-theme, [data-clp-theme="dark"] { /* NOTE: --clp-primary / --clp-primary-hover are deliberately NOT redefined here. The brand hue is theme-invariant so the Appearance customizer's colors survive dark mode (html.dark-theme would otherwise out-rank the branding partial's :root overrides). Components needing a legible accent on dark surfaces use --clp-primary-soft/-ink pairs, not raw primary. */ --clp-primary-soft: #1a2440; --clp-success: #2fbf62; --clp-success-text: #5fd68b; --clp-success-soft: #10281a; --clp-warning: #f0b429; --clp-warning-text: #eac267; --clp-warning-soft: #2a2110; --clp-danger: #e56962; --clp-danger-text: #f1968f; --clp-danger-soft: #2e1513; --clp-info: #5b93e0; --clp-info-text: #8ab4ec; --clp-info-soft: #12203a; --clp-ink: #e7ecf6; --clp-body: #c3cbdd; --clp-muted: #8b96ad; --clp-faint: #5f6a82; --clp-border: #242e46; --clp-border-strong: #33405e; --clp-soft: #151d2e; --clp-surface: #101724; --clp-canvas: #0c111c; --sh-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .35); --sh-md: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 40px rgba(0, 0, 0, .4); --sh-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 30px 70px rgba(0, 0, 0, .55); --sh-focus: 0 0 0 3px rgba(120, 150, 235, .4); --clp-focus-ring: rgba(120, 150, 235, .6); --ch-1: #7c96e8; --ch-2: #4ecb7d; --ch-3: #6ba1e8; --ch-4: #eac267; --ch-5: #8b96ad; --ch-grid: #242e46; } /* ---- Bootstrap variable bridge ------------------------------------------ Points Bootstrap 5.2+ CSS-variable consumers at the CLP tokens so legacy .btn-primary / link markup inherits the brand (and the Appearance customizer) without rewrites. Inert on compiled BS4/BS5.0 rules. */ :root { --bs-primary: var(--clp-primary); --bs-primary-rgb: 42, 106, 206; --bs-success-rgb: 27, 168, 76; --bs-danger-rgb: 224, 85, 78; --bs-body-font-family: var(--clp-font); --bs-body-color: var(--clp-body); --bs-border-color: var(--clp-border); --bs-border-radius: var(--r-control); --bs-link-color: var(--clp-primary); --bs-link-hover-color: var(--clp-primary-hover); } /* ---- Accessibility baselines --------------------------------------------- */ /* One visible focus treatment everywhere. :focus-visible keeps mouse clicks clean while guaranteeing keyboard users always see where they are. */ :focus-visible { outline: 3px solid var(--clp-focus-ring); outline-offset: 2px; } /* Honor reduced-motion globally; component animations are additionally gated at their own definitions. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* WCAG 2.4.11 (Focus Not Obscured): keep a keyboard-focused or anchor-targeted element clear of the sticky header when it scrolls into view. */ html { scroll-padding-top: 96px; }