/* ============================================================ NILPIS UNIFIED DESIGN TOKENS v2.0 — February 2026 Single source of truth replacing 4 scattered CSS systems. Add as FIRST stylesheet in every PHP page: Dark mode: add class="dark" to or ============================================================ */ :root { /* Brand */ --nl-primary: #059669; --nl-primary-light: #10b981; --nl-primary-dark: #047857; --nl-primary-pale: #f0fdf4; --nl-primary-ghost: rgba(5,150,105,0.08); --nl-gradient: linear-gradient(135deg, #059669, #10b981); --nl-gradient-hover: linear-gradient(135deg, #047857, #059669); /* Status */ --nl-success: #10b981; --nl-success-bg: #ecfdf5; --nl-warning: #f59e0b; --nl-warning-bg: #fffbeb; --nl-danger: #ef4444; --nl-danger-bg: #fef2f2; --nl-info: #3b82f6; --nl-info-bg: #eff6ff; /* Gold / Tokens */ --nl-gold: #fbbf24; --nl-gold-bg: rgba(251,191,36,0.1); --nl-gold-border: rgba(251,191,36,0.25); /* Surfaces */ --nl-bg: #f8fafc; --nl-bg-secondary: #f1f5f9; --nl-card: #ffffff; --nl-card-hover: #f8fafc; --nl-overlay: rgba(0,0,0,0.5); /* Text */ --nl-text: #1e293b; --nl-text-secondary: #64748b; --nl-text-muted: #9ca3af; --nl-text-inverse: #ffffff; /* Borders */ --nl-border: #e2e8f0; --nl-border-light: #f1f5f9; --nl-border-focus: #059669; /* Inputs */ --nl-input-bg: #f8fafc; --nl-input-border: #e2e8f0; --nl-input-focus-bg: #ffffff; --nl-input-focus-border: #059669; /* Shadows */ --nl-shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --nl-shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --nl-shadow-md: 0 4px 16px rgba(0,0,0,0.08); --nl-shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --nl-shadow-xl: 0 24px 80px rgba(0,0,0,0.15); --nl-shadow-green: 0 4px 12px rgba(5,150,105,0.25); --nl-shadow-green-lg: 0 8px 24px rgba(5,150,105,0.3); --nl-shadow-header: 0 4px 24px rgba(5,150,105,0.25); /* Spacing (4px grid) */ --nl-space-1: 4px; --nl-space-2: 8px; --nl-space-3: 12px; --nl-space-4: 16px; --nl-space-5: 20px; --nl-space-6: 24px; --nl-space-8: 32px; --nl-space-10: 40px; --nl-space-12: 48px; /* Radius */ --nl-radius-sm: 8px; --nl-radius-md: 12px; --nl-radius-lg: 16px; --nl-radius-xl: 20px; --nl-radius-2xl: 24px; --nl-radius-pill: 9999px; /* Typography */ --nl-font: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --nl-font-mono: 'SF Mono', 'Fira Code', Consolas, monospace; --nl-text-xs: 10px; --nl-text-sm: 12px; --nl-text-base: 14px; --nl-text-md: 16px; --nl-text-lg: 18px; --nl-text-xl: 20px; --nl-text-2xl: 24px; --nl-text-3xl: 28px; /* Transitions */ --nl-ease-fast: 0.15s ease; --nl-ease: 0.2s ease; --nl-ease-smooth: 0.3s cubic-bezier(0.4,0,0.2,1); --nl-ease-bounce: 0.3s cubic-bezier(0.68,-0.55,0.265,1.55); --nl-ease-modal: 0.3s cubic-bezier(0.34,1.56,0.64,1); /* Layout */ --nl-header-h: 64px; --nl-sidebar-w: 260px; --nl-admin-sidebar-w: 280px; --nl-tab-bar-h: 68px; --nl-mobile-max: 480px; --nl-desktop-max: 1280px; --nl-pad-mobile: 20px; --nl-pad-desktop: 32px; /* Z-Index */ --nl-z-dropdown: 10; --nl-z-sticky: 50; --nl-z-header: 100; --nl-z-drawer: 150; --nl-z-modal: 200; --nl-z-toast: 300; /* Header Glass */ --nl-glass-btn: rgba(255,255,255,0.12); --nl-glass-btn-border: rgba(255,255,255,0.15); /* Badge */ --nl-badge-bg: linear-gradient(135deg, #ef4444, #dc2626); --nl-badge-border: 2px solid rgba(5,150,105,0.95); /* Toggle */ --nl-toggle-w: 48px; --nl-toggle-h: 26px; --nl-toggle-knob: 20px; --nl-toggle-off: #d1d5db; /* Roles */ --nl-role-admin: #8b5cf6; --nl-role-admin-bg: rgba(139,92,246,0.1); --nl-role-shop: #059669; --nl-role-shop-bg: rgba(5,150,105,0.1); --nl-role-customer: #3b82f6; --nl-role-customer-bg: rgba(59,130,246,0.1); } /* ─── DARK MODE ──────────────────────────────────────────── */ .dark, [data-theme="dark"] { --nl-bg: #0f172a; --nl-bg-secondary: #1e293b; --nl-card: #1e293b; --nl-card-hover: #263548; --nl-text: #e2e8f0; --nl-text-secondary: #94a3b8; --nl-text-muted: #64748b; --nl-border: #334155; --nl-border-light: #1e293b; --nl-input-bg: #0f172a; --nl-input-border: #334155; --nl-input-focus-bg: #1e293b; --nl-primary-pale: rgba(16,185,129,0.15); --nl-primary-ghost: rgba(16,185,129,0.08); --nl-success-bg: rgba(16,185,129,0.15); --nl-warning-bg: rgba(245,158,11,0.15); --nl-danger-bg: rgba(239,68,68,0.15); --nl-info-bg: rgba(59,130,246,0.15); --nl-gold-bg: rgba(251,191,36,0.12); --nl-gold-border: rgba(251,191,36,0.2); --nl-shadow-sm: 0 2px 8px rgba(0,0,0,0.2); --nl-shadow-md: 0 4px 16px rgba(0,0,0,0.3); --nl-shadow-lg: 0 8px 32px rgba(0,0,0,0.4); --nl-toggle-off: #334155; --nl-badge-border: 2px solid rgba(15,23,42,0.85); } /* ─── BASE RESET ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } body { font-family: var(--nl-font); color: var(--nl-text); background: var(--nl-bg); line-height: 1.5; transition: background var(--nl-ease-smooth), color var(--nl-ease-smooth); } /* ─── SCROLLBAR ──────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: rgba(100,100,100,0.3); border-radius: 3px; } ::-webkit-scrollbar-track { background: transparent; } /* ─── ANIMATIONS ─────────────────────────────────────────── */ @keyframes nl-fadeIn { from{opacity:0} to{opacity:1} } @keyframes nl-fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } @keyframes nl-fadeInDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} } @keyframes nl-slideInLeft { from{transform:translateX(-100%)} to{transform:translateX(0)} } @keyframes nl-slideInRight { from{transform:translateX(100%)} to{transform:translateX(0)} } @keyframes nl-slideInUp { from{transform:translateY(100%)} to{transform:translateY(0)} } @keyframes nl-modalSlideIn { from{opacity:0;transform:scale(0.9) translateY(-20px)} to{opacity:1;transform:scale(1) translateY(0)} } @keyframes nl-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} } @keyframes nl-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} } @keyframes nl-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} } @keyframes nl-toastProgress { from{width:100%} to{width:0} }