/** * Design tokens — أسهل (Cloudflare-inspired) * نهاري / ليلي: [data-theme="light"|"dark"] على * البرتقالي: علامة الشعار فقط — الإجراءات والروابط: أزرق --color-primary */ :root { --font-sans: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-ar: "IBM Plex Sans Arabic", "Inter", "IBM Plex Sans", var(--font-sans); --color-brand: #f6821f; --color-brand-hover: #e07818; --layout-max-width: 1280px; --sidebar-width: 200px; --global-topbar-height: 48px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px; --shadow-0: none; --shadow-1: none; --z-dropdown: 10; --z-modal-backdrop: 20; --z-modal: 30; --z-tooltip: 40; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 40px; } [data-theme="light"] { --color-bg: #f3f4f6; --color-surface-container-low: #f3f4f6; --color-surface: #ffffff; --color-outline-variant: #e5e7eb; --color-border: #e5e7eb; --color-border-strong: #d1d5db; --color-text-1: #1a1a1e; --color-text-2: #52525b; --color-text-3: #71717a; --color-primary: #1d5ed8; --color-primary-hover: #1649b3; --color-primary-muted: #eff4ff; --color-success: #0d7a52; --color-success-bg: #e8f5ef; --color-warning-bg: #fff8e6; --color-warning-text: #8a5b00; --color-warning-canvas: #fffbf0; --color-warning-border-strong: #e4b047; --color-danger: #b42318; --color-danger-bg: #fdecec; --color-row-hover: #f0f0f2; --color-selected: #e8eefc; /* شريط علوي فاتح (نفس سطح البطاقة) */ --color-header-bg: #ffffff; --color-on-header: #1a1a1e; --color-on-header-muted: #52525b; --shadow-cloud: 0 4px 20px rgba(5, 25, 45, 0.05); --shadow-sm: none; --shadow-md: none; --color-text-secondary: var(--color-text-2); --color-bg-surface: var(--color-surface); --color-bg-muted: var(--color-row-hover); --color-border-default: var(--color-border); --color-border-subtle: var(--color-border); } [data-theme="dark"] { --color-bg: #111111; --color-surface-container-low: #161616; --color-surface: #161616; --color-outline-variant: #3f3f3f; --color-border: #2a2a2a; --color-border-strong: #3f3f3f; --color-text-1: #f4f4f5; --color-text-2: #a1a1aa; --color-text-3: #71717a; --color-primary: #5b8def; --color-primary-hover: #7aa3f5; --color-primary-muted: #1e2a3d; --color-success: #4ade80; --color-success-bg: #14532d; --color-warning-bg: #422006; --color-warning-text: #fcd34d; --color-warning-canvas: #2a1508; --color-warning-border-strong: #a16207; --color-danger: #f87171; --color-danger-bg: #450a0a; --color-row-hover: #242b35; --color-selected: #1e2f4d; --color-header-bg: #161616; --color-on-header: #f4f4f5; --color-on-header-muted: #a1a1aa; --shadow-cloud: 0 4px 24px rgba(0, 0, 0, 0.35); --shadow-sm: none; --shadow-md: none; --color-text-secondary: var(--color-text-2); --color-bg-surface: var(--color-surface); --color-bg-muted: var(--color-row-hover); --color-border-default: var(--color-border); --color-border-subtle: var(--color-border); } html[dir="rtl"] body { font-family: var(--font-ar); } html[dir="ltr"] body { font-family: var(--font-sans); } .num, .mono, .data-table .num, code, pre { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace; font-variant-numeric: tabular-nums; } html[dir="rtl"] .num, html[dir="rtl"] .mono { unicode-bidi: isolate; direction: ltr; } html[dir="rtl"] code, html[dir="rtl"] pre { direction: ltr; unicode-bidi: embed; text-align: left; } html[dir="ltr"] .num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }