/* ============================================================ SAFI · صافي — Design Tokens: Color + Type The clear, calm, Arabic-first face of an ERP. "صافي" (Arabic) = clear / pure / net. RTL-first. Calm over clutter. Trust. Speed + dignity. Brand color: Safi Blue (#1565C0). Market: Egypt · EGP (ج.م). Usage: + ============================================================ */ /* ---- Webfonts (Google Fonts CDN) ------------------------------- IBM Plex Sans Arabic — Arabic-native UI + display. ALL text. IBM Plex Mono — SKUs, receipt numbers, timestamps (Latin/digits). NOTE: CDN-linked. For offline, drop .woff2 into /fonts and swap @import. IBM Plex Sans Arabic was chosen as a genuine Arabic typeface (not a Latin font with Arabic bolted on). Flag for review if you have a licensed brand face. ----------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* ---------- BRAND PALETTE ---------- */ /* Safi Green — calm, clear, trustworthy. The signature color. */ --safi-900: #0A2E5C; --safi-800: #0E417F; --safi-700: #1565C0; /* primary / brand — the Safi blue (Material 800 anchor, elevated) */ --safi-600: #2A78D0; --safi-500: #4790DD; /* lively / focus */ --safi-300: #9CC4EE; --safi-200: #C6DDF6; --safi-100: #E3EEFB; --safi-50: #F0F6FD; /* Clay — warm secondary (stock, physical goods, highlights) */ --clay-700: #A7502A; --clay-600: #C2693C; --clay-500: #D2814E; --clay-200: #F0D7C6; --clay-100: #F8E9DF; /* Gold — small earned/owner accents only */ --gold-500: #C79A3E; --gold-100: #F4E9CE; /* ---------- NEUTRALS (calm, soft cool — not cold enterprise gray) ---------- */ --paper: #F5F7FA; /* app / page background */ --paper-2: #EBEFF4; /* sunken / alt sections */ --surface: #FFFFFF; /* cards, sheets */ --surface-2:#FBFCFE; --ink: #161E29; /* fg1 — primary text (blue-undertone near-black) */ --ink-2: #4A5560; /* fg2 — secondary */ --ink-3: #7B8794; /* fg3 — muted / captions */ --ink-4: #AEB6C0; /* fg4 — disabled / placeholder */ --line: #E2E7EE; /* hairline */ --line-2: #D0D7E0; /* stronger border */ /* ---------- SEMANTIC ---------- Money & state. SAFE vs DESTRUCTIVE must always read instantly: green = safe/confirm/paid, red = destructive/void/reverse, blue = brand/primary (never use green for primary actions). */ --positive: #1E854F; /* paid · in stock · success */ --positive-bg: #DEF1E6; --destructive: #C0392B; /* void · reverse · delete — used sparingly, never as primary */ --destructive-bg: #F8E3E0; --warning: #B07A1E; /* low stock · pending */ --warning-bg: #F6EBD2; --info: var(--safi-700); /* blue */ /* ---------- ROLE TOKENS ---------- */ --bg: var(--paper); --fg1: var(--ink); --fg2: var(--ink-2); --fg3: var(--ink-3); --primary: var(--safi-700); --primary-hover:var(--safi-800); --primary-press:var(--safi-900); --on-primary: #FFFFFF; --accent: var(--clay-600); /* warm amber/clay secondary — keeps the blue from feeling cold */ /* ---------- TYPE FAMILIES ---------- */ --font-arabic: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --font-sans: var(--font-arabic); /* alias: all UI text */ --font-display: var(--font-arabic); /* alias: large headings (weight, not a 2nd family) */ --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --num-tabular: 'tnum' 1; /* @kind other */ /* ---------- TYPE SCALE (px) ---------- */ --text-display: 3.5rem; /* 56 — hero */ --text-h1: 2.5rem; /* 40 */ --text-h2: 1.875rem; /* 30 */ --text-h3: 1.5rem; /* 24 */ --text-h4: 1.25rem; /* 20 */ --text-lg: 1.125rem; /* 18 */ --text-base: 1rem; /* 16 */ --text-sm: 0.875rem; /* 14 */ --text-xs: 0.8125rem; /* 13 — Arabic small text needs a touch more than 12 */ /* ---------- SPACING (4px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ---------- RADII ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-full: 999px; /* ---------- SHADOWS (soft, cool-tinted) ---------- */ --shadow-xs: 0 1px 2px rgba(20, 30, 48, 0.05); --shadow-sm: 0 1px 3px rgba(20, 30, 48, 0.07), 0 1px 2px rgba(20, 30, 48, 0.04); --shadow-md: 0 4px 12px rgba(20, 30, 48, 0.08), 0 2px 4px rgba(20, 30, 48, 0.04); --shadow-lg: 0 12px 32px rgba(20, 30, 48, 0.11), 0 4px 8px rgba(20, 30, 48, 0.05); --shadow-xl: 0 24px 60px rgba(20, 30, 48, 0.15); /* ---------- MOTION (calm, quick, no bounce) ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur: 240ms; /* @kind other */ --dur-slow: 380ms; /* @kind other */ } /* ============================================================ BASE IMPORTANT for Arabic: - NEVER apply negative letter-spacing to Arabic text — it breaks the cursive letter-joining. Tracking stays at normal/0. - There is no uppercase in Arabic; "eyebrows" use weight+color, not text-transform. - Line-height runs a little taller than a Latin system to give room to Arabic ascenders, descenders, and diacritics. ============================================================ */ .safi, .safi-scope { color: var(--fg1); background: var(--bg); font-family: var(--font-arabic); font-size: var(--text-base); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .display-xl { font-family: var(--font-arabic); font-weight: 600; font-size: var(--text-display); line-height: 1.18; letter-spacing: 0; } .h1 { font-family: var(--font-arabic); font-weight: 600; font-size: var(--text-h1); line-height: 1.22; letter-spacing: 0; } .h2 { font-family: var(--font-arabic); font-weight: 600; font-size: var(--text-h2); line-height: 1.25; letter-spacing: 0; } .h3 { font-family: var(--font-arabic); font-weight: 600; font-size: var(--text-h3); line-height: 1.3; } .h4 { font-family: var(--font-arabic); font-weight: 600; font-size: var(--text-h4); line-height: 1.4; } .body-lg { font-size: var(--text-lg); line-height: 1.7; color: var(--fg2); } .body { font-size: var(--text-base); line-height: 1.65; } .small { font-size: var(--text-sm); } .caption { font-size: var(--text-xs); color: var(--fg3); } .mono { font-family: var(--font-mono); font-feature-settings: var(--num-tabular); } /* "eyebrow" — Arabic-safe: colored + medium weight, NO uppercase/tracking */ .eyebrow { font-family: var(--font-arabic); font-size: var(--text-sm); font-weight: 600; color: var(--accent); } /* small label — for Latin codes/SKUs it's fine to track; keep off for Arabic */ .label { font-family: var(--font-arabic); font-size: var(--text-xs); font-weight: 600; color: var(--fg3); } /* money / figures — tabular */ .num { font-variant-numeric: tabular-nums; font-feature-settings: var(--num-tabular); } /* RTL helpers */ [dir="rtl"] { direction: rtl; } .flip-rtl { transform: scaleX(-1); } /* for directional glyphs that must mirror */