/* * BHD Design Tokens v1 * https://design.bhd.om/tokens.css * * Drop-in semantic + scale variables for the entire BHD-Group portfolio. * Model lifted from Metronic v9.4.12 (Tailwind v4 @theme inline pattern), * palette anchored on the BHD navy primary + neutral zinc scale. * * Works with: plain CSS, Tailwind v3 (via arbitrary values), Tailwind v4 * (drop the @theme inline block in), Sass, any framework. * * Usage: * * or * color: var(--foreground); background: var(--background); */ /* Zinc scale (matches Tailwind v4 default, repeated for non-Tailwind consumers) */ :root { --color-white: #ffffff; --color-black: #000000; --color-zinc-50: oklch(98.5% 0.001 286); --color-zinc-100: oklch(96.7% 0.002 286); --color-zinc-200: oklch(92.0% 0.004 286); --color-zinc-300: oklch(87.1% 0.006 286); --color-zinc-400: oklch(70.7% 0.014 286); --color-zinc-500: oklch(55.2% 0.016 286); --color-zinc-600: oklch(44.2% 0.018 286); --color-zinc-700: oklch(37.0% 0.014 286); --color-zinc-800: oklch(27.4% 0.010 286); --color-zinc-900: oklch(21.0% 0.008 286); --color-zinc-950: oklch(14.1% 0.006 286); /* BHD brand primary (navy from bhd.om) */ --color-bhd-50: #eef2ff; --color-bhd-100: #dbe2ff; --color-bhd-200: #c1cdff; --color-bhd-300: #97a6ff; --color-bhd-400: #6b7bff; --color-bhd-500: #4f5dff; --color-bhd-600: #3a44e6; --color-bhd-700: #2f37b8; --color-bhd-800: #2b3990; /* BHD canonical navy */ --color-bhd-900: #1e2670; --color-bhd-950: #131846; --color-red-600: #dc2626; --color-green-600: #16a34a; --color-amber-500: #f59e0b; --color-blue-500: #3b82f6; --color-blue-600: #2563eb; } /* ---- Semantic tokens, LIGHT ---- */ :root, .light { --background: var(--color-white); --foreground: var(--color-zinc-950); --card: var(--color-white); --card-foreground: var(--color-zinc-950); --popover: var(--color-white); --popover-foreground: var(--color-zinc-950); --primary: var(--color-bhd-800); --primary-foreground: var(--color-white); --secondary: var(--color-zinc-100); --secondary-foreground: var(--color-zinc-900); --muted: var(--color-zinc-100); --muted-foreground: var(--color-zinc-500); --accent: var(--color-zinc-100); --accent-foreground: var(--color-zinc-900); --destructive: var(--color-red-600); --destructive-foreground: var(--color-white); --success: var(--color-green-600); --warning: var(--color-amber-500); --mono: var(--color-zinc-950); --mono-foreground: var(--color-white); --border: oklch(94% 0.004 286); --input: var(--color-zinc-200); --ring: var(--color-zinc-400); --radius: 0.5rem; --radius-xl: calc(var(--radius) + 4px); --radius-lg: var(--radius); --radius-md: calc(var(--radius) - 2px); --radius-sm: calc(var(--radius) - 4px); --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.04); --shadow-pop: 0 4px 12px -2px rgb(0 0 0 / 0.06), 0 2px 4px -1px rgb(0 0 0 / 0.04); --header-height: 60px; --sidebar-width: 264px; --sidebar-width-collapsed: 80px; } /* ---- Semantic tokens, DARK ---- */ .dark { --background: var(--color-zinc-950); --foreground: var(--color-zinc-50); --card: var(--color-zinc-950); --card-foreground: var(--color-zinc-50); --popover: var(--color-zinc-950); --popover-foreground: var(--color-zinc-50); --primary: var(--color-bhd-500); --primary-foreground: var(--color-white); --secondary: var(--color-zinc-800); --secondary-foreground: var(--color-zinc-50); --muted: var(--color-zinc-900); --muted-foreground: var(--color-zinc-500); --accent: var(--color-zinc-900); --accent-foreground: var(--color-zinc-50); --destructive: var(--color-red-600); --destructive-foreground: var(--color-white); --success: var(--color-green-600); --warning: var(--color-amber-500); --mono: var(--color-zinc-300); --mono-foreground: var(--color-black); --border: var(--color-zinc-800); --input: var(--color-zinc-800); --ring: var(--color-zinc-600); --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.4), 0 1px 3px 0 rgb(0 0 0 / 0.3); --shadow-pop: 0 4px 12px -2px rgb(0 0 0 / 0.5), 0 2px 4px -1px rgb(0 0 0 / 0.3); } /* ---- Tailwind v4 @theme inline (drop the next block in your styles.css) ---- @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --radius-xl: var(--radius-xl); --radius-lg: var(--radius-lg); --radius-md: var(--radius-md); --radius-sm: var(--radius-sm); } ---- */ /* ---- Base reset, opt-in ---- */ .bhd-base { background-color: var(--background); color: var(--foreground); font-family: ui-sans-serif, system-ui, -apple-system, "Inter", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* HARD GLOBAL RULE: never letter-space Arabic. * Codified 24 May 2026. Any letter-spacing on Arabic text breaks the cursive * join (e.g. "للرخام" → "ل ل ر خ ا م"), reads as illiterate to native speakers. * For emphasis use KASHIDA (U+0640 ـ), never tracking. */ :lang(ar), [lang="ar"], [dir="rtl"] *, .ar { letter-spacing: 0 !important; word-spacing: normal !important; }