96 lines
3.1 KiB
CSS
96 lines
3.1 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
|
|
|
|
:root {
|
|
/* ── Brand blue — مأخوذ من login مباشرة ── */
|
|
--color-brand-50: #EFF6FF;
|
|
--color-brand-100: #DBEAFE;
|
|
--color-brand-200: #BFDBFE;
|
|
--color-brand-300: #93C5FD;
|
|
--color-brand-400: #60A5FA;
|
|
--color-brand-500: #3B82F6;
|
|
--color-brand-600: #2563EB;
|
|
--color-brand-700: #1D4ED8;
|
|
--color-brand-800: #1E3A8A;
|
|
--color-brand-900: #172554;
|
|
|
|
/* ── Sidebar gradient stops ── */
|
|
--sidebar-grad-top: #1E3A8A;
|
|
--sidebar-grad-mid: #1D4ED8;
|
|
--sidebar-grad-bottom: #1565C0;
|
|
|
|
/* ── Slate — نفس login ── */
|
|
--color-slate-50: #F8FAFC;
|
|
--color-slate-100: #F1F5F9;
|
|
--color-slate-200: #E2E8F0;
|
|
--color-slate-300: #CBD5E1;
|
|
--color-slate-400: #94A3B8;
|
|
--color-slate-500: #64748B;
|
|
--color-slate-600: #475569;
|
|
--color-slate-700: #334155;
|
|
--color-slate-800: #1E293B;
|
|
--color-slate-900: #0F172A;
|
|
|
|
/* ── Status colors ── */
|
|
--color-success: #16A34A;
|
|
--color-success-light: #DCFCE7;
|
|
--color-success-border:#BBF7D0;
|
|
--color-warning: #D97706;
|
|
--color-warning-light: #FFFBEB;
|
|
--color-warning-border:#FDE68A;
|
|
--color-danger: #DC2626;
|
|
--color-danger-light: #FEF2F2;
|
|
--color-danger-border: #FECACA;
|
|
--color-info: #2563EB;
|
|
--color-info-light: #EFF6FF;
|
|
--color-info-border: #BFDBFE;
|
|
|
|
/* ── Surfaces — light كامل زي login ── */
|
|
--color-surface: #FFFFFF;
|
|
--color-surface-muted: var(--color-slate-50);
|
|
--color-surface-sunken: var(--color-slate-100);
|
|
--color-border: var(--color-slate-200);
|
|
--color-border-strong: var(--color-slate-300);
|
|
|
|
/* ── Text ── */
|
|
--color-text-primary: var(--color-slate-900);
|
|
--color-text-secondary: var(--color-slate-600);
|
|
--color-text-muted: var(--color-slate-500);
|
|
--color-text-hint: var(--color-slate-400);
|
|
--color-text-inverse: #FFFFFF;
|
|
|
|
/* ── للـ dashboard pages — light بدل dark ── */
|
|
--color-surface-dark: var(--color-slate-50);
|
|
--color-surface-dark-raised: var(--color-surface);
|
|
--color-surface-dark-card: var(--color-surface);
|
|
--color-border-dark: var(--color-slate-200);
|
|
--color-text-dark-primary: var(--color-slate-900);
|
|
--color-text-dark-muted: var(--color-slate-500);
|
|
|
|
/* ── Typography ── */
|
|
--font-sans: 'Plus Jakarta Sans', sans-serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
|
|
/* ── Radius ── */
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-2xl: 20px;
|
|
--radius-full: 9999px;
|
|
|
|
/* ── Layout ── */
|
|
--sidebar-width: 240px;
|
|
--topbar-height: 56px;
|
|
--page-padding-x: 24px;
|
|
|
|
/* ── Shadows ── */
|
|
--shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
|
|
--shadow-overlay: 0 10px 40px rgba(0,0,0,.1);
|
|
|
|
/* ── Transitions ── */
|
|
--transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-spin { animation: none; }
|
|
} |