/* ============================================================================ SOLA Design System — Design Tokens (single source of truth) ---------------------------------------------------------------------------- Foundations reconciled from SOLA ITSM (master) + SOLA DMS (master). Where the two apps differed, the better/more-branded value was chosen and noted inline. Both apps consume these tokens; never hard-code raw values in product CSS — always reference a var() from this file. Decisions (see README.md for full rationale): - Brand blue: ITSM #1c84ff is canonical (intentional, landing-page aligned). DMS shifts from #2563eb -> #1c84ff. - Token model: ITSM's named tokens are the base; bootstrap-bridge.css maps them onto Bootstrap's --bs-* vars. - Semantics: ITSM's refined palette over Bootstrap defaults. - Radius: 16px card / 8px control scale (ITSM). - Type: Inter (Latin) + IBM Plex Sans Arabic (Arabic) — the bilingual gap both apps had. ========================================================================== */ :root { /* ----- Brand / primary ---------------------------------------------------*/ --sola-primary: #1c84ff; /* canonical SOLA blue (ITSM master) */ --sola-primary-dark: #1576f2; /* hover / active */ --sola-primary-light: #3d9bff; /* highlights / gradients */ --sola-primary-rgb: 28, 132, 255; --sola-primary-soft: rgba(28, 132, 255, 0.10); /* tints, hover bg */ --sola-primary-soft-2: rgba(28, 132, 255, 0.15); /* Back-compat aliases (ITSM used --primary-color; keep both working). */ --primary-color: var(--sola-primary); --primary-dark: var(--sola-primary-dark); --primary-light: var(--sola-primary-light); --primary-rgb: var(--sola-primary-rgb); --primary-light-bg: var(--sola-primary-soft); /* ITSM light-primary tint */ /* ----- Neutrals / greys --------------------------------------------------*/ --grey-50: #f8fafc; /* DMS app bg */ --grey-100: #f3f7fc; /* ITSM app bg / subtle surfaces (canonical) */ --grey-200: #e3ebf5; /* borders, dividers (ITSM --border-color) */ --grey-300: #d6e0ee; --grey-400: #95a7bf; /* tertiary text / muted icons */ --grey-500: #58708f; /* secondary text */ --grey-600: #3f5470; --grey-700: #2a3c5a; --grey-800: #1a2c4a; /* primary text */ --grey-900: #0c2244; /* deep navy (shadow tint base) */ /* ----- Semantic colors (ITSM refined palette) ----------------------------*/ --secondary-color: #58708f; --success-color: #21b66f; --warning-color: #f8b63a; --danger-color: #f05d5e; --info-color: #5ec8ff; --success-rgb: 33, 182, 111; --warning-rgb: 248, 182, 58; --danger-rgb: 240, 93, 94; --info-rgb: 94, 200, 255; /* Soft (12%) backgrounds for badges/alerts — DMS badge-soft pattern. */ --success-soft: rgba(33, 182, 111, 0.12); --warning-soft: rgba(248, 182, 58, 0.12); --danger-soft: rgba(240, 93, 94, 0.12); --info-soft: rgba(94, 200, 255, 0.12); --primary-soft: var(--sola-primary-soft); /* ----- Status palette (ticket lifecycle — promoted from ITSM, shared) ----*/ --status-new-bg: #dbeafe; --status-new-fg: var(--primary-dark); --status-open-bg: #fef3c7; --status-open-fg: #92400e; --status-progress-bg: #e0e7ff; --status-progress-fg: #3730a3; --status-hold-bg: #f3f4f6; --status-hold-fg: #374151; --status-resolved-bg: #d1fae5; --status-resolved-fg: #065f46; --status-closed-bg: #e5e7eb; --status-closed-fg: #4b5563; --status-cancelled-bg: #fee2e2; --status-cancelled-fg: #991b1b; /* Priority */ --priority-critical-bg: #fee2e2; --priority-critical-fg: #991b1b; --priority-high-bg: #ffedd5; --priority-high-fg: #9a3412; --priority-medium-bg: #fef3c7; --priority-medium-fg: #92400e; --priority-low-bg: #d1fae5; --priority-low-fg: #065f46; /* ----- Surfaces / backgrounds / text -------------------------------------*/ --bg-color: var(--grey-100); /* app shell background */ --bg-card: #ffffff; /* cards, modals, panels */ --bg-sidebar: #ffffff; --bg-sidebar-hover: var(--sola-primary-soft); --bg-muted: var(--grey-50); /* table headers, footers, inset areas */ --card-bg: var(--bg-card); /* ITSM back-compat alias */ --bg-hover: var(--grey-100); /* ITSM row / hover surface */ --text-primary: var(--grey-800); --text-secondary: var(--grey-500); --text-light: var(--grey-400); --text-white: #ffffff; --text-link: var(--sola-primary); --border-color: var(--grey-200); /* ----- Gradients ---------------------------------------------------------*/ --gradient-primary: linear-gradient(135deg, #0a2143 0%, #1576f2 58%, #1c84ff 100%); /* ----- Typography --------------------------------------------------------*/ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif; --font-arabic: 'IBM Plex Sans Arabic', 'Inter', 'Segoe UI', Tahoma, sans-serif; --font-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Type scale (root assumed 16px; product body sits at --fs-base = 14px). */ --fs-xs: 0.6875rem; /* 11px — labels, meta */ --fs-sm: 0.8125rem; /* 13px — secondary text */ --fs-base: 0.875rem; /* 14px — body (both apps' baseline) */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px — h4 / section heads */ --fs-xl: 1.375rem; /* 22px — h3 */ --fs-2xl: 1.5rem; /* 24px — h2 */ --fs-3xl: 1.75rem; /* 28px — h1 / stat numbers */ --fs-display: 2.625rem; /* 42px — hero numerals */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.5; --lh-relaxed: 1.7; --ls-tight: -0.01em; --ls-wide: 0.3px; /* uppercase labels */ /* ----- Spacing (4px grid) ------------------------------------------------*/ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* ----- Radius (ITSM 16/8 scale) ------------------------------------------*/ --radius-xs: 4px; --radius-sm: 8px; /* buttons, inputs, small cards */ --radius-md: 12px; --radius-lg: 16px; /* default card / modal / large container */ --radius-xl: 20px; /* pills, hero panels */ --radius-pill: 999px; --radius-circle: 50%; /* Back-compat (ITSM names). */ --border-radius: var(--radius-lg); --border-radius-sm: var(--radius-sm); /* ----- Elevation / shadow (navy-tinted, ITSM-derived) --------------------*/ --shadow-xs: 0 1px 2px rgba(12, 34, 68, 0.05); --shadow-sm: 0 1px 3px rgba(12, 34, 68, 0.08); /* cards at rest */ --shadow-md: 0 4px 12px rgba(12, 34, 68, 0.10); --shadow-lg: 0 16px 44px rgba(12, 34, 68, 0.10); /* hover / dropdowns */ --shadow-xl: 0 20px 60px rgba(12, 34, 68, 0.15); /* modals */ /* Back-compat (ITSM had --shadow / --shadow-lg). */ --shadow: var(--shadow-sm); /* ----- Layout ------------------------------------------------------------*/ --sidebar-width: 260px; --sidebar-width-collapsed: 70px; --topbar-height: 64px; --content-max-width: 1440px; --content-padding: var(--space-5); /* ----- Motion ------------------------------------------------------------*/ --transition: all 0.2s ease; --transition-fast: all 0.15s ease; --transition-slow: all 0.3s ease; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ----- Z-index scale -----------------------------------------------------*/ --z-base: 1; --z-sticky: 1020; --z-dropdown: 1030; --z-fixed: 1035; --z-offcanvas: 1045; --z-modal-backdrop: 1050; --z-modal: 1055; --z-popover: 1070; --z-tooltip: 1080; --z-toast: 2000; /* ----- Focus ring --------------------------------------------------------*/ --focus-ring: 0 0 0 3px var(--sola-primary-soft-2); } /* ---------------------------------------------------------------------------- Direction-aware logical helpers. Apps swap bootstrap.rtl.css and set dir="rtl" via i18n.js; tokens above are direction-agnostic. Use CSS logical properties (margin-inline, padding-inline, inset-inline) in product CSS rather than left/right so RTL is automatic. -------------------------------------------------------------------------- */