/* ========================================
   DESIGN TOKENS - GurmeClickPos
   Centralized design system variables
   ======================================== */

:root {
    /* ============================
       COLOR SYSTEM
       ============================ */

    /* Primary Colors - Sofistike Mavi */
    --color-primary-50: #E8F0FE;
    --color-primary-100: #C5DAFC;
    --color-primary-200: #9FC3FA;
    --color-primary-300: #79ACF8;
    --color-primary-400: #5C9AF7;
    --color-primary-500: #4088F5; /* Ana Mavi */
    --color-primary-600: #3A80F3;
    --color-primary-700: #3175F1;
    --color-primary-800: #286BEF;
    --color-primary-900: #1858EC;

    /* Secondary Colors - Zarif Mor */
    --color-secondary-50: #F3E8FF;
    --color-secondary-100: #E0C5FF;
    --color-secondary-200: #CC9FFF;
    --color-secondary-300: #B879FF;
    --color-secondary-400: #A95CFF;
    --color-secondary-500: #9A40FF; /* Ana Mor */
    --color-secondary-600: #923AFF;
    --color-secondary-700: #8831FF;
    --color-secondary-800: #7E28FF;
    --color-secondary-900: #6B1AFF;

    /* Accent Colors - Premium Altın */
    --color-accent-50: #FFF9E6;
    --color-accent-100: #FFEFC0;
    --color-accent-200: #FFE596;
    --color-accent-300: #FFDB6C;
    --color-accent-400: #FFD34D;
    --color-accent-500: #FFCB2E; /* Ana Altın */
    --color-accent-600: #FFC629;
    --color-accent-700: #FFBE22;
    --color-accent-800: #FFB61C;
    --color-accent-900: #FFA910;

    /* Neutral Colors - Gri Tonları */
    --color-neutral-50: #FAFBFC;
    --color-neutral-100: #F4F6F8;
    --color-neutral-200: #E9ECEF;
    --color-neutral-300: #DEE2E6;
    --color-neutral-400: #CED4DA;
    --color-neutral-500: #ADB5BD;
    --color-neutral-600: #6C757D;
    --color-neutral-700: #495057;
    --color-neutral-800: #343A40;
    --color-neutral-900: #212529;
    --color-neutral-950: #0A0C0E;

    /* Semantic Colors - Durum Renkleri */
    --color-success-50: #ECFDF5;
    --color-success-100: #D1FAE5;
    --color-success-500: #10B981;
    --color-success-600: #059669;
    --color-success-700: #047857;

    --color-warning-50: #FFFBEB;
    --color-warning-100: #FEF3C7;
    --color-warning-500: #F59E0B;
    --color-warning-600: #D97706;
    --color-warning-700: #B45309;

    --color-danger-50: #FEF2F2;
    --color-danger-100: #FEE2E2;
    --color-danger-500: #EF4444;
    --color-danger-600: #DC2626;
    --color-danger-700: #B91C1C;

    --color-info-50: #EFF6FF;
    --color-info-100: #DBEAFE;
    --color-info-500: #3B82F6;
    --color-info-600: #2563EB;
    --color-info-700: #1D4ED8;

    /* ============================
       GRADIENT SYSTEM
       ============================ */

    /* Primary Gradients */
    --gradient-primary: linear-gradient(135deg, #4088F5 0%, #3068D5 100%);
    --gradient-primary-soft: linear-gradient(135deg, #4088F5 0%, #3A80F3 100%);
    --gradient-primary-intense: linear-gradient(135deg, #3175F1 0%, #1858EC 100%);

    /* Secondary Gradients */
    --gradient-secondary: linear-gradient(135deg, #9A40FF 0%, #7E28FF 100%);
    --gradient-secondary-soft: linear-gradient(135deg, #B879FF 0%, #9A40FF 100%);

    /* Success Gradients */
    --gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
    --gradient-success-soft: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);

    /* Warning Gradients */
    --gradient-warning: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    --gradient-warning-soft: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

    /* Danger Gradients */
    --gradient-danger: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    --gradient-danger-soft: linear-gradient(135deg, #f87171 0%, #dc2626 100%);

    /* Info Gradients */
    --gradient-info: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    --gradient-info-soft: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);

    /* Accent/Gold Gradients */
    --gradient-accent: linear-gradient(135deg, #FFCB2E 0%, #FFB61C 100%);
    --gradient-gold: linear-gradient(135deg, #FFD34D 0%, #FFA910 100%);

    /* Premium Gradients */
    --gradient-premium: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-sunset: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

    /* Multi-color Gradients */
    --gradient-rainbow: linear-gradient(90deg,
        var(--color-primary-500),
        var(--color-secondary-500),
        var(--color-accent-500));

    /* Dark Gradients - For dark backgrounds and overlays */
    --gradient-dark: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 50%, #16213e 100%);
    --gradient-dark-soft: linear-gradient(135deg, #1a1a1a 0%, #2d2d3a 100%);

    /* Neutral/Gray Gradients - For text and subtle backgrounds */
    --gradient-neutral: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
    --gradient-neutral-soft: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);

    /* White Gradients - For light overlays and text */
    --gradient-white: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
    --gradient-white-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);

    /* Glass/Transparent Gradients */
    --gradient-glass: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.9) 100%);
    --gradient-glass-dark: linear-gradient(135deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.02) 100%);

    /* ============================
       SPACING SYSTEM
       ============================ */

    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-7: 1.75rem;   /* 28px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* ============================
       BORDER RADIUS SYSTEM
       ============================ */

    --radius-none: 0;
    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-3xl: 2rem;      /* 32px */
    --radius-full: 9999px;   /* Circular */

    /* ============================
       SHADOW SYSTEM
       ============================ */

    --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.06),
                 0 1px 2px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Colored Shadows */
    --shadow-primary: 0 4px 6px -1px rgba(64, 136, 245, 0.2),
                      0 2px 4px -1px rgba(64, 136, 245, 0.1);
    --shadow-success: 0 4px 6px -1px rgba(16, 185, 129, 0.2),
                      0 2px 4px -1px rgba(16, 185, 129, 0.1);
    --shadow-warning: 0 4px 6px -1px rgba(245, 158, 11, 0.2),
                      0 2px 4px -1px rgba(245, 158, 11, 0.1);
    --shadow-danger: 0 4px 6px -1px rgba(239, 68, 68, 0.2),
                     0 2px 4px -1px rgba(239, 68, 68, 0.1);

    /* ============================
       TYPOGRAPHY SYSTEM
       ============================ */

    /* Font Families */
    --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

    /* Font Sizes - Fluid Typography */
    --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.2rem + 0.25vw, 1.375rem);
    --text-2xl: clamp(1.5rem, 1.44rem + 0.3vw, 1.625rem);
    --text-3xl: clamp(1.75rem, 1.68rem + 0.35vw, 2rem);
    --text-4xl: clamp(2rem, 1.92rem + 0.4vw, 2.25rem);
    --text-5xl: clamp(2.5rem, 2.4rem + 0.5vw, 3rem);
    --text-6xl: clamp(3rem, 2.88rem + 0.6vw, 3.75rem);

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* Font Weights */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* ============================
       TRANSITION SYSTEM
       ============================ */

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 700ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Easing Functions */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ============================
       Z-INDEX SYSTEM
       ============================ */

    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-menu-toggle: 1080;
    --z-toast: 9999;
    --z-maximum: 99999;

    /* ============================
       GLASS MORPHISM
       ============================ */

    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-bg-medium: rgba(255, 255, 255, 0.2);
    --glass-bg-strong: rgba(255, 255, 255, 0.3);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: blur(10px);
    --glass-blur-strong: blur(20px);

    /* ============================
       BACKWARD COMPATIBILITY
       Legacy variable names
       ============================ */

    --primary-color: var(--color-primary-500);
    --secondary-color: var(--color-secondary-500);
    --accent-color: var(--color-accent-500);
    --success-color: var(--color-success-500);
    --warning-color: var(--color-warning-500);
    --danger-color: var(--color-danger-500);
    --info-color: var(--color-info-500);
    --text-color: var(--color-neutral-900);
    --bg-color: var(--color-neutral-50);
    --border-color: var(--color-neutral-200);
    --text-muted: var(--color-neutral-600);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Gradient Background Classes */
.gradient-primary {
    background: var(--gradient-primary);
    color: white;
}
.gradient-primary-soft {
    background: var(--gradient-primary-soft);
    color: white;
}
.gradient-secondary {
    background: var(--gradient-secondary);
    color: white;
}
.gradient-success {
    background: var(--gradient-success);
    color: white;
}
.gradient-warning {
    background: var(--gradient-warning);
    color: white;
}
.gradient-danger {
    background: var(--gradient-danger);
    color: white;
}
.gradient-info {
    background: var(--gradient-info);
    color: white;
}
.gradient-accent {
    background: var(--gradient-accent);
    color: var(--color-neutral-900); /* Dark text on gold */
}
.gradient-gold {
    background: var(--gradient-gold);
    color: var(--color-neutral-900); /* Dark text on gold */
}
.gradient-premium {
    background: var(--gradient-premium);
    color: white;
}
.gradient-sunset {
    background: var(--gradient-sunset);
    color: white;
}
.gradient-ocean {
    background: var(--gradient-ocean);
    color: white;
}
.gradient-rainbow {
    background: var(--gradient-rainbow);
    color: white;
}
.gradient-dark {
    background: var(--gradient-dark);
    color: white;
}
.gradient-neutral {
    background: var(--gradient-neutral);
    color: white;
}
.gradient-white {
    background: var(--gradient-white);
    color: var(--color-neutral-900); /* Dark text on white */
}

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

.gradient-text-secondary {
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Morphism Classes */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

.glass-card-strong {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--glass-border);
}

/* Shadow Classes */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-success { box-shadow: var(--shadow-success); }
.shadow-warning { box-shadow: var(--shadow-warning); }
.shadow-danger { box-shadow: var(--shadow-danger); }

/* Border Radius Classes */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ========================================
   COMPONENT-SPECIFIC CLASSES
   ======================================== */

/* Stat Cards with Gradients */
.stat-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    color: white;
    transition: all var(--transition-base);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    transform: translate(30%, -30%);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2xl);
}

/* Dashboard Hero Section */
.dashboard-hero {
    background: var(--gradient-primary);
    color: white;
    padding: var(--space-12) 0 var(--space-20) 0;
    position: relative;
    overflow: hidden;
}

.dashboard-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
}

/* Premium Card Hover Effect */
.card-premium {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    border: 1px solid var(--color-neutral-200);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.card-premium:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary-500);
}

.card-premium:hover::before {
    transform: scaleX(1);
}

/* ========================================
   DARK MODE SUPPORT (Future)
   ======================================== */

@media (prefers-color-scheme: dark) {
    :root {
        /* Override colors for dark mode */
        /* Will be implemented in Phase 2 */
    }
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-slower: 0ms;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}