/* ════════════════════════════════════════════════════════════════
 * ZP DESIGN TOKENS — ZovoPay Unified Design System
 * Single source of truth for colors, spacing, typography, shadows
 * Version: 1.0  ·  Date: 2026-05-28
 * ════════════════════════════════════════════════════════════════ */

:root {
    /* ─── BRAND COLORS ─────────────────────────────────────── */
    /* User Panel — Royal Navy */
    --zp-user-50:       #eff6ff;
    --zp-user-100:      #dbeafe;
    --zp-user-200:      #bfdbfe;
    --zp-user-300:      #93c5fd;
    --zp-user-400:      #60a5fa;
    --zp-user-500:      #3b82f6;
    --zp-user-600:      #2563eb;
    --zp-user-700:      #1d4ed8;
    --zp-user-800:      #1e40af;
    --zp-user-900:      #1b2e5f;   /* Primary */
    --zp-user-950:      #0a1f3d;
    --zp-user-deep:     #061228;
    --zp-user-primary:  #1b2e5f;
    --zp-user-accent:   #3b82f6;

    /* Agent Panel — Royal Green */
    --zp-agent-50:      #ecfdf5;
    --zp-agent-100:     #d1fae5;
    --zp-agent-200:     #a7f3d0;
    --zp-agent-300:     #6ee7b7;
    --zp-agent-400:     #34d399;
    --zp-agent-500:     #10b981;
    --zp-agent-600:     #059669;
    --zp-agent-700:     #047857;
    --zp-agent-800:     #065f46;
    --zp-agent-900:     #0b2d1a;   /* Primary */
    --zp-agent-deep:    #042f2e;
    --zp-agent-primary: #0b2d1a;
    --zp-agent-accent:  #22c55e;

    /* Travel Agent — Turquoise */
    --zp-travel-500:    #14b8a6;
    --zp-travel-600:    #0d9488;
    --zp-travel-700:    #0f766e;
    --zp-travel-accent: #2dd4bf;
    --zp-travel-primary:#042f2e;

    /* Merchant Panel — Royal Purple */
    --zp-merchant-50:   #faf5ff;
    --zp-merchant-100:  #f3e8ff;
    --zp-merchant-200:  #e9d5ff;
    --zp-merchant-300:  #d8b4fe;
    --zp-merchant-400:  #c084fc;
    --zp-merchant-500:  #a855f7;
    --zp-merchant-600:  #9333ea;
    --zp-merchant-700:  #7c3aed;
    --zp-merchant-800:  #6b21a8;
    --zp-merchant-900:  #4c1d95;   /* Primary */
    --zp-merchant-deep: #1a0533;
    --zp-merchant-primary: #6b21a8;
    --zp-merchant-accent:  #ad6cef;

    /* Admin Panel — Cosmic Glass */
    --zp-admin-bg0:     #020913;
    --zp-admin-bg1:     #040e1e;
    --zp-admin-bg2:     #060f22;
    --zp-admin-bg3:     #081428;
    --zp-admin-glass:   rgba(11,22,48,.68);
    --zp-admin-border:  rgba(255,255,255,.07);
    --zp-admin-border2: rgba(59,130,246,.22);

    /* ─── SEMANTIC COLORS ─────────────────────────────────── */
    --zp-success:       #10b981;
    --zp-success-bg:    rgba(16,185,129,.15);
    --zp-success-text:  #0d9488;
    --zp-warning:       #f59e0b;
    --zp-warning-bg:    rgba(245,158,11,.15);
    --zp-warning-text:  #d97706;
    --zp-danger:        #ef4444;
    --zp-danger-bg:     rgba(244,63,94,.15);
    --zp-danger-text:   #dc2626;
    --zp-info:          #3b82f6;
    --zp-info-bg:       rgba(59,130,246,.15);
    --zp-info-text:     #1d4ed8;

    /* ─── NEUTRAL GREY SCALE ──────────────────────────────── */
    --zp-gray-50:       #f8fafc;
    --zp-gray-100:      #f1f5f9;
    --zp-gray-200:      #e2e8f0;
    --zp-gray-300:      #cbd5e1;
    --zp-gray-400:      #94a3b8;
    --zp-gray-500:      #64748b;
    --zp-gray-600:      #475569;
    --zp-gray-700:      #334155;
    --zp-gray-800:      #1e293b;
    --zp-gray-900:      #0f172a;
    --zp-white:         #ffffff;
    --zp-black:         #000000;

    /* ─── SPACING (8px Scale) ─────────────────────────────── */
    --zp-sp-0:    0;
    --zp-sp-1:    4px;
    --zp-sp-2:    8px;
    --zp-sp-3:    12px;
    --zp-sp-4:    16px;
    --zp-sp-5:    20px;
    --zp-sp-6:    24px;
    --zp-sp-8:    32px;
    --zp-sp-10:   40px;
    --zp-sp-12:   48px;
    --zp-sp-16:   64px;
    --zp-sp-20:   80px;

    /* ─── BORDER RADIUS ───────────────────────────────────── */
    --zp-r-none:  0;
    --zp-r-xs:    4px;
    --zp-r-sm:    6px;
    --zp-r-md:    10px;
    --zp-r-lg:    14px;
    --zp-r-xl:    18px;
    --zp-r-2xl:   22px;
    --zp-r-3xl:   28px;
    --zp-r-full:  9999px;

    /* ─── SHADOWS (Elevation) ─────────────────────────────── */
    --zp-shadow-0:  none;
    --zp-shadow-1:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --zp-shadow-2:  0 4px 10px rgba(11,46,95,0.06), 0 2px 4px rgba(11,46,95,0.04);
    --zp-shadow-3:  0 8px 22px rgba(11,46,95,0.10), 0 4px 8px rgba(11,46,95,0.05);
    --zp-shadow-4:  0 16px 36px rgba(11,46,95,0.15), 0 8px 16px rgba(11,46,95,0.08);
    --zp-shadow-5:  0 24px 60px rgba(11,46,95,0.25), 0 12px 24px rgba(11,46,95,0.12);

    /* Brand-tinted shadows */
    --zp-shadow-user:     0 14px 36px rgba(59,130,246,0.35);
    --zp-shadow-agent:    0 14px 36px rgba(34,197,94,0.35);
    --zp-shadow-merchant: 0 14px 36px rgba(124,58,237,0.40);
    --zp-shadow-travel:   0 14px 36px rgba(13,148,136,0.35);

    /* ─── TYPOGRAPHY ──────────────────────────────────────── */
    --zp-font-en:    'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --zp-font-ar:    'Tajawal', 'Cairo', sans-serif;
    --zp-font-mono:  'JetBrains Mono', 'Courier New', monospace;
    --zp-font-icon:  'Font Awesome 5 Free', 'Line Awesome Free';

    --zp-fs-xs:    11px;
    --zp-fs-sm:    12px;
    --zp-fs-base:  13px;
    --zp-fs-md:    14px;
    --zp-fs-lg:    16px;
    --zp-fs-xl:    18px;
    --zp-fs-2xl:   22px;
    --zp-fs-3xl:   26px;
    --zp-fs-4xl:   32px;
    --zp-fs-5xl:   42px;
    --zp-fs-6xl:   56px;

    --zp-fw-light:    300;
    --zp-fw-normal:   400;
    --zp-fw-medium:   500;
    --zp-fw-semibold: 600;
    --zp-fw-bold:     700;
    --zp-fw-extrabold:800;
    --zp-fw-black:    900;

    --zp-lh-tight:    1.15;
    --zp-lh-normal:   1.5;
    --zp-lh-relaxed:  1.7;

    /* ─── TRANSITIONS ─────────────────────────────────────── */
    --zp-tr-fast:     0.15s ease;
    --zp-tr-base:     0.25s ease;
    --zp-tr-slow:     0.4s ease;
    --zp-tr-bounce:   0.35s cubic-bezier(.34,1.56,.64,1);

    /* ─── GRADIENTS (Brand) ──────────────────────────────── */
    --zp-grad-user:     linear-gradient(135deg, #1b2e5f 0%, #3b82f6 100%);
    --zp-grad-user-hero:linear-gradient(135deg, #061228 0%, #0d1b3e 25%, #1b2e5f 55%, #2d5299 80%, #3b6fd4 100%);
    --zp-grad-agent:    linear-gradient(135deg, #0b2d1a 0%, #22c55e 100%);
    --zp-grad-agent-hero:linear-gradient(125deg, #042f2e 0%, #0d5c5a 40%, #0d9488 75%, #2dd4bf 100%);
    --zp-grad-merchant: linear-gradient(135deg, #4c1d95 0%, #a855f7 100%);
    --zp-grad-merchant-hero:linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #a855f7 100%);
    --zp-grad-travel:   linear-gradient(135deg, #0d5c5a 0%, #2dd4bf 100%);
    --zp-grad-success:  linear-gradient(135deg, #059669 0%, #34d399 100%);
    --zp-grad-warning:  linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
    --zp-grad-danger:   linear-gradient(135deg, #dc2626 0%, #f87171 100%);
    --zp-grad-info:     linear-gradient(135deg, #1d4ed8 0%, #60a5fa 100%);

    /* ─── Z-INDEX SCALE ──────────────────────────────────── */
    --zp-z-base:      1;
    --zp-z-dropdown:  100;
    --zp-z-sticky:    200;
    --zp-z-overlay:   300;
    --zp-z-modal:     400;
    --zp-z-toast:     500;
    --zp-z-tooltip:   600;

    /* ─── BREAKPOINTS (Reference only) ───────────────────── */
    /* xs:  < 480px   |   sm: 480-768px   |   md: 768-991px
       lg:  992-1199 |   xl: 1200-1535   |   2xl: 1536+      */

    /* ─── ANIMATIONS (Keyframes used everywhere) ─────────── */
    --zp-fade-up-d:   0.5s;
    --zp-fade-in-d:   0.4s;
    --zp-slide-in-d:  0.5s;
}

/* ════════════════════════════════════════════════════════════════
 * KEYFRAMES — Shared animation library
 * ════════════════════════════════════════════════════════════════ */
@keyframes zpFadeUp   { from {opacity:0; transform:translateY(18px);} to {opacity:1; transform:translateY(0);} }
@keyframes zpFadeIn   { from {opacity:0;} to {opacity:1;} }
@keyframes zpSlideR   { from {opacity:0; transform:translateX(-18px);} to {opacity:1; transform:translateX(0);} }
@keyframes zpSlideL   { from {opacity:0; transform:translateX(18px);} to {opacity:1; transform:translateX(0);} }
@keyframes zpScaleIn  { from {opacity:0; transform:scale(0.94);} to {opacity:1; transform:scale(1);} }
@keyframes zpFloat    { 0%,100% {transform:translateY(0);} 50% {transform:translateY(-10px);} }
@keyframes zpGradient { 0%,100% {background-position:0% 50%;} 50% {background-position:100% 50%;} }
@keyframes zpShimmer  { 0% {background-position:-500px 0;} 100% {background-position:500px 0;} }
@keyframes zpPulse    { 0%,100% {box-shadow:0 0 0 0 rgba(59,130,246,.35);} 60% {box-shadow:0 0 0 12px rgba(59,130,246,0);} }
@keyframes zpRotate   { from {transform:rotate(0);} to {transform:rotate(360deg);} }
@keyframes zpSpin     { to {transform:rotate(360deg);} }

/* ════════════════════════════════════════════════════════════════
 * UTILITY CLASSES — common spacing/sizing helpers
 * ════════════════════════════════════════════════════════════════ */
.zp-anim-fade-up    { animation: zpFadeUp var(--zp-fade-up-d) ease both; }
.zp-anim-fade-in    { animation: zpFadeIn var(--zp-fade-in-d) ease both; }
.zp-anim-slide-r    { animation: zpSlideR var(--zp-slide-in-d) ease both; }
.zp-anim-scale-in   { animation: zpScaleIn 0.4s ease both; }

/* ════════════════════════════════════════════════════════════════
 * RTL Support — direction-aware adjustments
 * ════════════════════════════════════════════════════════════════ */
[dir="rtl"], .rtl-mode {
    direction: rtl;
}
[dir="rtl"] .zp-anim-slide-r { animation: zpSlideL var(--zp-slide-in-d) ease both; }

/* ════════════════════════════════════════════════════════════════
 * DARK MODE SUPPORT — opt-in via .dark-mode class
 * ════════════════════════════════════════════════════════════════ */
.dark-mode {
    --zp-gray-50:    #0f172a;
    --zp-gray-100:   #1e293b;
    --zp-gray-200:   #334155;
    --zp-gray-300:   #475569;
    --zp-gray-400:   #64748b;
    --zp-gray-500:   #94a3b8;
    --zp-gray-600:   #cbd5e1;
    --zp-gray-700:   #e2e8f0;
    --zp-gray-800:   #f1f5f9;
    --zp-gray-900:   #f8fafc;
    --zp-white:      #0a0f1c;
    --zp-black:      #ffffff;
}
@media (prefers-color-scheme: dark) {
    .auto-theme {
        --zp-gray-50:    #0f172a;
        --zp-gray-100:   #1e293b;
        --zp-gray-200:   #334155;
        --zp-gray-300:   #475569;
        --zp-gray-400:   #64748b;
        --zp-gray-500:   #94a3b8;
        --zp-gray-600:   #cbd5e1;
        --zp-gray-700:   #e2e8f0;
        --zp-gray-800:   #f1f5f9;
        --zp-gray-900:   #f8fafc;
        --zp-white:      #0a0f1c;
    }
}

/* ════════════════════════════════════════════════════════════════
 * LEGACY ADMIN-MASTER VARIABLES — Merged from zp-admin-master.css
 * Kept for backward compatibility with existing CSS that uses these names.
 * Future refactor: migrate to semantic --zp-admin-* names from main tokens.
 * Merged: 2026-05-28 (P1.1)
 * ════════════════════════════════════════════════════════════════ */
:root {
    --zp-bg0:   #020913;
    --zp-bg1:   #040e1e;
    --zp-bg2:   #060f22;
    --zp-bg3:   #081428;
    --zp-navy:  #1b2e5f;
    --zp-navy2: #2d5299;
    --zp-blue:  #3b82f6;
    --zp-blue2: #60a5fa;
    --zp-cyan:  #06b6d4;
    --zp-green: #10b981;
    --zp-purp:  #8b5cf6;
    --zp-gold:  #f59e0b;
    --zp-rose:  #f43f5e;
    --zp-glass: rgba(11,22,48,.68);
    --zp-gb:    rgba(255,255,255,.07);
    --zp-gb2:   rgba(59,130,246,.22);
    --zp-t1:    #e8eef8;
    --zp-t2:    rgba(232,238,248,.62);
    --zp-t3:    rgba(232,238,248,.35);
    --zp-r:     18px;
    --zp-rs:    12px;
    --gB: 0 0 28px rgba(59,130,246,.40), 0 0 60px rgba(59,130,246,.12);
    --gC: 0 0 28px rgba(6,182,212,.38),  0 0 60px rgba(6,182,212,.10);
    --gG: 0 0 28px rgba(16,185,129,.38), 0 0 60px rgba(16,185,129,.10);
    --gP: 0 0 28px rgba(139,92,246,.38), 0 0 60px rgba(139,92,246,.10);
    --gGo:0 0 28px rgba(245,158,11,.38), 0 0 60px rgba(245,158,11,.10);
    --gR: 0 0 28px rgba(244,63,94,.38),  0 0 60px rgba(244,63,94,.10);
}