/* ===================================================== BHD Design Language v1.0 — Structural Tokens Shared across all BHD Group products. Do NOT override :root tokens per-product. Only override the 4 accent tokens via [data-product]. ===================================================== */ /* Google Fonts — load in HTML or via @import in entry CSS: Inter 400,500,600,700,800 IBM Plex Sans Arabic 400,500,600,700 DM Sans 400,500,600 DM Mono 400 Instrument Serif (italic) — arabian.ceo / bhd.om only */ :root { /* ── Spacing (4px grid) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── Border Radius ── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 100px; /* ── Shadows (light-mode values) ── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.12); /* ── Typography ── */ --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --font-ar: 'IBM Plex Sans Arabic', 'Inter', sans-serif; --font-mono: 'DM Mono', 'Courier New', monospace; --font-serif: 'Instrument Serif', Georgia, serif; /* ── Neutrals — Light Mode ── */ --ink-900: #111827; /* primary text */ --ink-700: #374151; /* secondary text */ --ink-500: #6b7280; /* muted / captions */ --ink-200: #e5e7eb; /* borders */ --ink-100: #f3f4f6; /* subtle bg */ --surface-50: #f9fafb; /* page bg */ --surface-white: #ffffff; /* card bg */ /* ── Neutrals — Dark Mode ── */ --dark-950: #0d0d0d; /* page bg */ --dark-900: #1a1a1a; /* card bg */ --dark-800: #262626; /* hover */ --dark-700: #333333; /* elevated */ --border-dark: rgba(255, 255, 255, 0.08); /* borders */ --text-dark: #f0ede8; /* primary text */ --text-dark-2: rgba(255, 255, 255, 0.55); /* secondary text */ --text-dark-3: rgba(255, 255, 255, 0.35); /* muted text */ /* ── Responsive Breakpoints (reference — use in media queries, not as var()) ── xs: 375px sm: 640px md: 768px lg: 1024px xl: 1280px */ /* ── Semantic Status — Light Mode ── */ --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #2563eb; --color-special: #7c3aed; /* Semantic light backgrounds */ --color-success-light: rgba(22, 163, 74, 0.10); --color-warning-light: rgba(217, 119, 6, 0.10); --color-danger-light: rgba(220, 38, 38, 0.10); --color-info-light: rgba(37, 99, 235, 0.10); --color-special-light: rgba(124, 58, 237, 0.10); /* Semantic border tints */ --color-success-border: rgba(22, 163, 74, 0.25); --color-warning-border: rgba(217, 119, 6, 0.25); --color-danger-border: rgba(220, 38, 38, 0.25); --color-info-border: rgba(37, 99, 235, 0.25); --color-special-border: rgba(124, 58, 237, 0.25); /* ── Default Accent (BHD corporate / bhd.om) ── */ --color-accent: #009bc1; --color-accent-hover: #007fa0; --color-accent-light: rgba(0, 155, 193, 0.08); --color-accent-border: rgba(0, 155, 193, 0.25); } /* ── Dark Mode semantic overrides ── Apply [data-theme="dark"] on */ [data-theme="dark"] { --color-success: #4ade80; --color-warning: #fbbf24; --color-danger: #f87171; --color-info: #60a5fa; --color-special: #a78bfa; } /* ══════════════════════════════════════════════════ PER-PRODUCT ACCENT OVERRIDES Add data-product="" to or . ══════════════════════════════════════════════════ */ [data-product="bhd-erp"] { --color-accent: #0073e6; --color-accent-hover: #005bb5; --color-accent-light: rgba(0, 115, 230, 0.08); --color-accent-border: rgba(0, 115, 230, 0.25); } [data-product="dardasha"] { --color-accent: #4f8ef7; --color-accent-hover: #3d7de0; --color-accent-light: rgba(79, 142, 247, 0.08); --color-accent-border: rgba(79, 142, 247, 0.25); --color-accent-gradient: linear-gradient(135deg, #4f8ef7 0%, #7b52f5 100%); } [data-product="arabian-ceo"] { --color-accent: #f97316; --color-accent-hover: #ea6c0d; --color-accent-light: rgba(249, 115, 22, 0.08); --color-accent-border: rgba(249, 115, 22, 0.25); } [data-product="cupsbyaa"] { --color-accent: #e91e63; --color-accent-hover: #c2185b; --color-accent-light: rgba(233, 30, 99, 0.08); --color-accent-border: rgba(233, 30, 99, 0.25); } [data-product="bhd-chat"] { --color-accent: #25d366; --color-accent-hover: #00a884; --color-accent-light: rgba(37, 211, 102, 0.08); --color-accent-border: rgba(37, 211, 102, 0.25); } [data-product="paperandpen"] { --color-accent: #1e2d5a; --color-accent-hover: #172347; --color-accent-light: rgba(30, 45, 90, 0.08); --color-accent-border: rgba(30, 45, 90, 0.25); --color-accent-copper: #a85f25; --color-accent-copper-hover: #8f4e1e; } /* Intentionally pinned to BHD teal — does not track :root default changes */ [data-product="cardify"] { --color-accent: #009bc1; --color-accent-hover: #007fa0; --color-accent-light: rgba(0, 155, 193, 0.08); --color-accent-border: rgba(0, 155, 193, 0.25); } /* Intentionally pinned to BHD teal — does not track :root default changes */ [data-product="reachscreens"] { --color-accent: #009bc1; --color-accent-hover: #007fa0; --color-accent-light: rgba(0, 155, 193, 0.08); --color-accent-border: rgba(0, 155, 193, 0.25); }