/* ========================================================================== Rasanah Business (رصانة الأعمال) — Design Tokens v1.2 Single source for every product UI (Blazor / MVC + Bootstrap 5). Load order: fonts → rasanah-tokens.css → bootstrap(.rtl).min.css → rasanah-bootstrap.css ========================================================================== */ /* ---- Fonts: self-hosted (on-prem servers have no internet) ------------- Put the IBM Plex Sans Arabic files (OFL licence, free) in wwwroot/fonts/ */ @font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Medium.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Bold.ttf") format("truetype"); } :root { /* ---- Brand core ---- */ --rb-ink: #0F3D46; /* حبر — primary */ --rb-ink-900: #0A2A31; --rb-ink-700: #155260; --rb-ink-500: #2A6E7C; --rb-ink-200: #BFD6DA; --rb-ink-100: #E2EEF0; --rb-ink-50: #F1F7F8; --rb-brass: #B8893B; /* نحاس — accent, graphics only (3.1:1 on white) */ --rb-brass-700: #8A6220; /* brass for text / small UI (5.5:1 on white) */ --rb-brass-100: #F4EAD5; /* ---- Neutrals (warm stone) ---- */ --rb-paper: #F7F5F0; /* page background */ --rb-surface: #FFFFFF; /* cards, tables, inputs */ --rb-stone-100: #EFECE5; --rb-stone-200: #E4DFD4; /* borders */ --rb-stone-300: #CFC8BA; --rb-stone-500: #8B918F; --rb-text-muted: #5B6668; /* 5.4:1 on paper */ --rb-text: #172326; /* body text */ /* ---- Semantic ---- */ --rb-success: #2F7D57; --rb-success-bg: #E5F2EA; --rb-warning: #A86A12; --rb-warning-bg: #FBF0DC; --rb-danger: #B4412E; --rb-danger-bg: #F8E6E2; --rb-info: #2E6DA4; --rb-info-bg: #E3EEF7; /* ---- Module families (one colour per family, used for module tiles & accents only) ---- */ --rb-fam-entity: #1D6A72; /* المنشأة والكيانات */ --rb-fam-people: #3A5998; /* الموظفون */ --rb-fam-governance: #8A6220; /* الامتثال والرقابة */ --rb-fam-operations: #A34E36; /* التشغيل والمالية */ --rb-fam-platform: #0F3D46; /* المنصّة */ --rb-module: var(--rb-fam-platform); /* set per product on (see bottom) */ /* ---- Typography ---- */ --rb-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; --rb-font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace; --rb-fs-xs: 0.75rem; /* 12 */ --rb-fs-sm: 0.875rem; /* 14 — tables, forms */ --rb-fs-md: 1rem; /* 16 — body */ --rb-fs-lg: 1.25rem; /* 20 — section title */ --rb-fs-xl: 1.5rem; /* 24 — page title */ --rb-fs-2xl: 2rem; /* 32 — dashboard figures */ --rb-lh-tight: 1.3; --rb-lh: 1.7; /* Arabic needs generous line-height */ /* ---- Space (4px base) ---- */ --rb-sp-1: 4px; --rb-sp-2: 8px; --rb-sp-3: 12px; --rb-sp-4: 16px; --rb-sp-5: 24px; --rb-sp-6: 32px; --rb-sp-7: 48px; --rb-sp-8: 64px; /* ---- Shape & depth ---- */ --rb-radius-sm: 4px; --rb-radius: 8px; /* inputs, buttons */ --rb-radius-lg: 12px; /* cards, dialogs */ --rb-shadow-1: 0 1px 2px rgba(15,61,70,.06), 0 1px 3px rgba(15,61,70,.08); --rb-shadow-2: 0 4px 12px rgba(15,61,70,.10); --rb-focus: 0 0 0 3px rgba(184,137,59,.45); /* brass focus ring */ } /* Product accent: add the class on of each product */ .rb-module-entities, .rb-module-bank, .rb-module-facilities { --rb-module: var(--rb-fam-entity); } .rb-module-hr, .rb-module-contracts, .rb-module-attendance, .rb-module-payroll, .rb-module-residents, .rb-module-insurance { --rb-module: var(--rb-fam-people); } .rb-module-compliance, .rb-module-labor, .rb-module-alerts, .rb-module-documents { --rb-module: var(--rb-fam-governance); } .rb-module-fleet, .rb-module-accounting { --rb-module: var(--rb-fam-operations); } .rb-module-platform, .rb-module-hub { --rb-module: var(--rb-fam-platform); }