/* ========================================================= THEME.CSS DATAQ-aligned + DGA-style accessible design tokens ========================================================= */ /* DATAQ Identity: Yeal Blue: #134097 Cream White: #EBE5DA Sea Green: #2B9C8D Black Night: #0B0A0B Production font recommendation: Arabic: IBM Plex Sans Arabic English: Inter If you later get licensed Careem / Co Headline font files, we can replace the font stack safely. */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap"); :root { /* DATAQ brand colors */ --dq-blue: #134097; --dq-blue-deep: #0d2c68; --dq-blue-soft: #e8eefb; --dq-green: #2b9c8d; --dq-green-deep: #1f7f73; --dq-green-soft: #e8f6f4; --dq-cream: #ebe5da; --dq-cream-soft: #f7f3ec; --dq-black: #0b0a0b; --dq-white: #ffffff; /* Semantic colors */ --dq-success: #157f3b; --dq-success-soft: #e8f7ee; --dq-warning: #b7791f; --dq-warning-soft: #fff7e6; --dq-danger: #b42318; --dq-danger-soft: #fff1f0; --dq-info: #2563eb; --dq-info-soft: #eff6ff; /* Neutral scale */ --dq-gray-25: #fcfcfd; --dq-gray-50: #f9fafb; --dq-gray-100: #f3f4f6; --dq-gray-200: #e5e7eb; --dq-gray-300: #d1d5db; --dq-gray-400: #9ca3af; --dq-gray-500: #6b7280; --dq-gray-600: #4b5563; --dq-gray-700: #374151; --dq-gray-800: #1f2937; --dq-gray-900: #111827; /* App aliases — keep old class compatibility */ --dq-primary: var(--dq-blue); --dq-primary-dark: var(--dq-blue-deep); --dq-accent: var(--dq-green); --dq-accent-dark: var(--dq-green-deep); --dq-accent-soft: var(--dq-green-soft); --dq-bg: #f6f3ed; --dq-bg-elevated: #fbfaf7; --dq-card: var(--dq-white); --dq-surface: var(--dq-white); --dq-surface-muted: var(--dq-cream-soft); --dq-border: rgba(19, 64, 151, 0.12); --dq-border-strong: rgba(19, 64, 151, 0.22); --dq-text: var(--dq-black); --dq-text-soft: var(--dq-gray-700); --dq-muted: var(--dq-gray-500); --dq-light: var(--dq-gray-50); --dq-focus: rgba(43, 156, 141, 0.55); /* Radius */ --dq-radius-xs: 8px; --dq-radius-sm: 12px; --dq-radius-md: 16px; --dq-radius-lg: 24px; --dq-radius-xl: 32px; --dq-radius-pill: 999px; /* Shadows */ --dq-shadow-xs: 0 1px 2px rgba(11, 10, 11, 0.06); --dq-shadow-sm: 0 6px 16px rgba(19, 64, 151, 0.08); --dq-shadow: 0 16px 38px rgba(19, 64, 151, 0.10); --dq-shadow-lg: 0 26px 70px rgba(19, 64, 151, 0.16); /* Typography */ --dq-font-ar: "IBM Plex Sans Arabic", "Tahoma", "Arial", sans-serif; --dq-font-en: "Inter", "Segoe UI", "Arial", sans-serif; --dq-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* Spacing scale */ --dq-space-1: 4px; --dq-space-2: 8px; --dq-space-3: 12px; --dq-space-4: 16px; --dq-space-5: 20px; --dq-space-6: 24px; --dq-space-8: 32px; --dq-space-10: 40px; --dq-space-12: 48px; } /* Language-aware font stack */ html[lang="ar"] body, html[dir="rtl"] body { font-family: var(--dq-font-ar); } html[lang="en"] body, html[dir="ltr"] body { font-family: var(--dq-font-en); } /* Fallback for templates that still use */ body { background: radial-gradient(circle at 92% -10%, rgba(43, 156, 141, 0.18), transparent 34%), radial-gradient(circle at 8% 0%, rgba(19, 64, 151, 0.10), transparent 28%), linear-gradient(180deg, #fbfaf7 0%, var(--dq-bg) 100%); color: var(--dq-text); font-family: var(--dq-font-ar); font-size: 15px; line-height: 1.65; } /* Better text defaults */ h1, h2, h3, h4, h5, h6 { color: var(--dq-primary); line-height: 1.25; letter-spacing: -0.02em; } p { color: var(--dq-text-soft); } /* Links */ a { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } a:hover { color: var(--dq-accent); } /* Inputs */ input, select, textarea { color: var(--dq-text); } input::placeholder, textarea::placeholder { color: var(--dq-gray-400); } /* Numbers */ strong, .amount, .kpi-card strong, .legend-value, td, th { font-variant-numeric: tabular-nums; } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: rgba(43, 156, 141, 0.45) rgba(19, 64, 151, 0.08); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: rgba(19, 64, 151, 0.06); border-radius: 999px; } *::-webkit-scrollbar-thumb { background: rgba(43, 156, 141, 0.55); border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.75); } *::-webkit-scrollbar-thumb:hover { background: rgba(43, 156, 141, 0.78); } /* DATAQ subtle pattern utility */ .dq-pattern { background-image: radial-gradient(circle at center, rgba(43, 156, 141, 0.20) 0 2px, transparent 2px), radial-gradient(circle at center, rgba(19, 64, 151, 0.12) 0 1px, transparent 1px); background-size: 28px 28px, 18px 18px; } /* Semantic helpers */ .text-success { color: var(--dq-success) !important; } .text-warning { color: var(--dq-warning) !important; } .text-danger { color: var(--dq-danger) !important; } .text-muted { color: var(--dq-muted) !important; } .bg-success-soft { background: var(--dq-success-soft) !important; } .bg-warning-soft { background: var(--dq-warning-soft) !important; } .bg-danger-soft { background: var(--dq-danger-soft) !important; } .bg-info-soft { background: var(--dq-info-soft) !important; }