/*
 * ============================================
 *  ZUBOPACT DESIGN SYSTEM � 2026
 *  Single source of truth for all design tokens
 *  Import this FIRST in every page
 * ============================================
 */

/* ============================================
   COLOR TOKENS
   ============================================ */
:root {
    /* --- Brand Palette --- */
    --zp-brand: #2563eb;
    --zp-brand-light: #60a5fa;
    --zp-brand-dark: #1d4ed8;
    --zp-brand-50: #eff6ff;
    --zp-brand-100: #dbeafe;
    --zp-brand-200: #bfdbfe;
    --zp-brand-500: #2563eb;
    --zp-brand-600: #2563eb;
    --zp-brand-700: #1d4ed8;
    --zp-brand-900: #1e3a5f;
    --zp-brand-glow: rgba(37, 99, 235, 0.35);

    /* --- Accent / Secondary --- */
    --zp-accent: #1d4ed8;
    --zp-accent-light: #60a5fa;

    /* --- Semantic Colors --- */
    --zp-success: #2563eb;
    --zp-success-bg: rgba(37, 99, 235, 0.1);
    --zp-error: #000000;
    --zp-error-bg: rgba(0, 0, 0, 0.1);
    --zp-warning: #1d4ed8;
    --zp-warning-bg: rgba(29, 78, 216, 0.1);
    --zp-info: #2563eb;
    --zp-info-bg: rgba(37, 99, 235, 0.1);

    /* --- Gradient Presets --- */
    --zp-gradient-brand: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --zp-gradient-hero: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 50%, #2563eb 100%);
    --zp-gradient-glow: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
    --zp-gradient-surface: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);

    /* --- Light Theme Surfaces --- */
    --zp-bg: #ffffff;
    --zp-bg-soft: #f5f5f5;
    --zp-bg-muted: #f0f0f0;
    --zp-bg-card: #ffffff;
    --zp-bg-elevated: #ffffff;

    /* --- Light Theme Text --- */
    --zp-text: #000000;
    --zp-text-secondary: #333333;
    --zp-text-muted: #666666;
    --zp-text-on-brand: #ffffff;

    /* --- Light Theme Borders --- */
    --zp-border: #d0d0d0;
    --zp-border-light: #f0f0f0;
    --zp-border-focus: var(--zp-brand);

    /* --- Light Theme Shadows --- */
    --zp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --zp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --zp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --zp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --zp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --zp-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --zp-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);

    /* ============================================
       TYPOGRAPHY TOKENS
       ============================================ */
    --zp-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --zp-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

    --zp-text-xs: 0.75rem;
    /* 12px */
    --zp-text-sm: 0.8125rem;
    /* 13px */
    --zp-text-base: 0.9375rem;
    /* 15px */
    --zp-text-md: 1rem;
    /* 16px */
    --zp-text-lg: 1.125rem;
    /* 18px */
    --zp-text-xl: 1.25rem;
    /* 20px */
    --zp-text-2xl: 1.5rem;
    /* 24px */
    --zp-text-3xl: 1.875rem;
    /* 30px */
    --zp-text-4xl: 2.25rem;
    /* 36px */
    --zp-text-5xl: 3rem;
    /* 48px */

    /* ============================================
       SPACING TOKENS (4px scale)
       ============================================ */
    --zp-space-1: 0.25rem;
    /* 4px */
    --zp-space-2: 0.5rem;
    /* 8px */
    --zp-space-3: 0.75rem;
    /* 12px */
    --zp-space-4: 1rem;
    /* 16px */
    --zp-space-5: 1.25rem;
    /* 20px */
    --zp-space-6: 1.5rem;
    /* 24px */
    --zp-space-8: 2rem;
    /* 32px */
    --zp-space-10: 2.5rem;
    /* 40px */
    --zp-space-12: 3rem;
    /* 48px */
    --zp-space-16: 4rem;
    /* 64px */
    --zp-space-20: 5rem;
    /* 80px */
    --zp-space-24: 6rem;
    /* 96px */

    /* ============================================
       RADIUS TOKENS
       ============================================ */
    --zp-radius-sm: 6px;
    --zp-radius-md: 8px;
    --zp-radius-lg: 12px;
    --zp-radius-xl: 16px;
    --zp-radius-2xl: 20px;
    --zp-radius-full: 9999px;

    /* ============================================
       TRANSITION TOKENS
       ============================================ */
    --zp-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --zp-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --zp-duration-fast: 150ms;
    --zp-duration-base: 250ms;
    --zp-duration-slow: 400ms;
    --zp-transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================
       LAYOUT TOKENS
       ============================================ */
    --zp-navbar-h: 60px;
    --zp-sidebar-w: 280px;
    --zp-container-max: 1280px;
    --zp-container-wide: 1400px;
}

/* ============================================
   GLOBAL RESETS USING TOKENS
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-size-adjust: 100%;
}

body {
    font-family: var(--zp-font);
    font-size: var(--zp-text-base);
    line-height: 1.6;
    color: var(--zp-text);
    background-color: var(--zp-bg-soft);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    transition: background-color var(--zp-duration-base) var(--zp-ease),
        color var(--zp-duration-base) var(--zp-ease);
}

/* ============================================
   UTILITY CLASSES (Design System)
   ============================================ */

/* --- Text Gradient --- */
.zp-text-gradient {
    background: var(--zp-gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Glow Ring --- */
.zp-glow-ring {
    box-shadow: var(--zp-shadow-glow);
}

/* --- Glass Effect --- */
.zp-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- Hover Lift --- */
.zp-lift {
    transition: transform var(--zp-duration-base) var(--zp-ease),
        box-shadow var(--zp-duration-base) var(--zp-ease);
}

.zp-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--zp-shadow-lg);
}

/* --- Divider --- */
.zp-divider {
    height: 1px;
    background: var(--zp-border);
    border: none;
    margin: var(--zp-space-6) 0;
}

/* --- Focus Ring --- */
.zp-focus-ring:focus-visible {
    outline: 2px solid var(--zp-brand);
    outline-offset: 2px;
}

/* --- Skeleton Loader --- */
@keyframes zp-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.zp-skeleton {
    background: linear-gradient(90deg,
            var(--zp-bg-muted) 25%,
            var(--zp-bg-soft) 37%,
            var(--zp-bg-muted) 63%);
    background-size: 200% 100%;
    animation: zp-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--zp-radius-md);
}

/* --- Fade In Animation --- */
@keyframes zp-fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.zp-animate-in {
    animation: zp-fadeIn 0.5s var(--zp-ease) both;
}

/* Stagger delays */
.zp-delay-1 {
    animation-delay: 0.1s;
}

.zp-delay-2 {
    animation-delay: 0.2s;
}

.zp-delay-3 {
    animation-delay: 0.3s;
}

.zp-delay-4 {
    animation-delay: 0.4s;
}

.zp-delay-5 {
    animation-delay: 0.5s;
}

/* --- Scale In --- */
@keyframes zp-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.zp-scale-in {
    animation: zp-scaleIn 0.3s var(--zp-ease) both;
}

/* --- Slide In --- */
@keyframes zp-slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.zp-slide-up {
    animation: zp-slideUp 0.4s var(--zp-ease) both;
}

/* ============================================
   SECTION PATTERNS
   ============================================ */

.zp-section {
    padding: var(--zp-space-16) 0;
}

.zp-section-sm {
    padding: var(--zp-space-10) 0;
}

.zp-section-lg {
    padding: var(--zp-space-20) 0;
}

.zp-section-title {
    font-size: var(--zp-text-2xl);
    font-weight: 800;
    color: var(--zp-text);
    letter-spacing: -0.5px;
    margin-bottom: var(--zp-space-2);
}

.zp-section-subtitle {
    font-size: var(--zp-text-sm);
    color: var(--zp-text-muted);
    margin-bottom: var(--zp-space-8);
}

/* --- Eyebrow Tag --- */
.zp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--zp-space-2);
    padding: var(--zp-space-1) var(--zp-space-4);
    border-radius: var(--zp-radius-full);
    background: var(--zp-brand-50);
    color: var(--zp-brand);
    font-size: var(--zp-text-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: var(--zp-space-4);
    border: 1px solid var(--zp-brand-100);
}