/* ========================================================================== Vector POS — Theme Tokens (Design System) مركز الألوان والمسافات والخطوط. لا تضع ألوانًا ثابتة داخل المكوّنات — استخدم هذه المتغيّرات. السِمة تُبدَّل عبر data-theme على ("light" | "dark"). RTL-first. ========================================================================== */ :root { /* ---- Brand / semantic color roles (light) ---- */ --c-primary: #0647aa ; --c-primary-hover: #3419e1; --c-primary-soft: #2fbce8; --c-primary-contrast: #d80b0b; --c-secondary: #5b6472; --c-secondary-soft: #eef0f3; --c-success: #15803d; --c-success-soft: #e7f4ec; --c-warning: #b45309; --c-warning-soft: #fbf0e2; --c-danger: #b3261e; --c-danger-soft: #fbe9e8; --c-info: #0369a1; --c-info-soft: #e6f1f8; /* ---- Neutrals / surfaces ---- */ --c-bg: #f7f8f9; --c-surface: #ffffff; --c-surface-2: #fafbfc; --c-surface-3: #f1f3f5; --c-border: #e4e7eb; --c-border-strong: #cdd2d9; --c-text: #1e2530; --c-text-soft: #47505e; --c-muted: #7b8695; --c-on-primary: #ffffff; --c-focus: #2f8fb0; --c-overlay: rgba(17, 22, 30, 0.44); /* ---- Chart palette (categorical, calm) ---- */ --chart-1: #1d6f8c; --chart-2: #4c9f70; --chart-3: #c9803a; --chart-4: #7a6ff0; --chart-5: #b3555f; --chart-6: #3a8fb0; --chart-grid: #e7eaee; --chart-track: #eef1f4; /* ---- Typography ---- */ --font-sans: "Segoe UI", "Noto Naskh Arabic", "Tahoma", "Dubai", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "Cascadia Mono", "Consolas", "Courier New", monospace; --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-22: 1.375rem; --fs-28: 1.75rem; --lh-tight: 1.25; --lh: 1.55; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- 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; /* ---- Radius / elevation / motion ---- */ --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(20, 28, 40, 0.06), 0 1px 3px rgba(20, 28, 40, 0.04); --sh-2: 0 2px 6px rgba(20, 28, 40, 0.08), 0 4px 16px rgba(20, 28, 40, 0.06); --sh-pop: 0 6px 24px rgba(16, 24, 40, 0.14); --dur: 160ms; --ease: cubic-bezier(0.2, 0, 0, 1); /* ---- Layout metrics ---- */ --sidebar-w: 264px; --sidebar-w-collapsed: 64px; --header-h: 56px; --content-max: 1440px; } /* ==== Dark theme ==== */ :root[data-theme="dark"] { --c-primary: #4bb3d1; --c-primary-hover: #6ac2db; --c-primary-soft: #14313c; --c-primary-contrast: #06212a; --c-secondary: #9aa4b2; --c-secondary-soft: #232833; --c-success: #46b877; --c-success-soft: #17301f; --c-warning: #d9962f; --c-warning-soft: #33260f; --c-danger: #e26b63; --c-danger-soft: #341917; --c-info: #4aa3d8; --c-info-soft: #12303f; --c-bg: #0f1216; --c-surface: #161a20; --c-surface-2: #1a1f26; --c-surface-3: #20262f; --c-border: #2a313c; --c-border-strong: #3a424f; --c-text: #e7eaef; --c-text-soft: #b9c0cb; --c-muted: #8a93a1; --c-on-primary: #06212a; --c-focus: #5bb8d6; --c-overlay: rgba(0, 0, 0, 0.55); --chart-1: #4bb3d1; --chart-2: #5fc08b; --chart-3: #d99a5a; --chart-4: #9a90f5; --chart-5: #d97b84; --chart-6: #6cb7d1; --chart-grid: #262d38; --chart-track: #232a33; --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 2px 8px rgba(0, 0, 0, 0.45); --sh-pop: 0 8px 28px rgba(0, 0, 0, 0.55); } /* Respect OS preference when the user has not chosen explicitly */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; } }