/**
 * QUIZTREFF SHOP DESIGN TOKENS
 * ============================
 * Consistent design system for premium shop experience
 */

:root {
    /* ===========================================
       SPACING SCALE (4px base)
       =========================================== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ===========================================
       BORDER RADIUS
       =========================================== */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ===========================================
       COLORS - SHOP THEME
       =========================================== */

    /* Background layers */
    --shop-bg-base: #0a0806;
    --shop-bg-elevated: rgba(20, 15, 10, 0.7);
    --shop-bg-card: rgba(25, 18, 12, 0.75);
    --shop-bg-card-hover: rgba(30, 22, 15, 0.85);
    --shop-bg-glass: rgba(15, 10, 5, 0.45);
    --shop-bg-glass-strong: rgba(20, 15, 8, 0.65);

    /* Text colors */
    --shop-text-primary: rgba(255, 248, 235, 0.95);
    --shop-text-secondary: rgba(255, 235, 200, 0.70);
    --shop-text-muted: rgba(255, 235, 200, 0.50);
    --shop-text-disabled: rgba(255, 235, 200, 0.35);

    /* Accent colors */
    --shop-accent-gold: #ffc864;
    --shop-accent-gold-light: #ffd894;
    --shop-accent-gold-dark: #d4a44a;
    --shop-accent-amber: rgba(255, 180, 80, 0.9);

    /* Status colors */
    --shop-success: #4ade80;
    --shop-success-bg: rgba(74, 222, 128, 0.15);
    --shop-success-border: rgba(74, 222, 128, 0.30);

    --shop-error: #f87171;
    --shop-error-bg: rgba(248, 113, 113, 0.15);
    --shop-error-border: rgba(248, 113, 113, 0.30);

    --shop-info: #38bdf8;
    --shop-info-bg: rgba(56, 189, 248, 0.15);
    --shop-info-border: rgba(56, 189, 248, 0.30);

    /* Border colors */
    --shop-border-subtle: rgba(255, 200, 120, 0.10);
    --shop-border-default: rgba(255, 200, 120, 0.18);
    --shop-border-hover: rgba(255, 180, 100, 0.35);
    --shop-border-active: rgba(255, 180, 100, 0.50);

    /* Glow / Shadow */
    --shop-glow-gold: rgba(255, 180, 80, 0.25);
    --shop-glow-gold-strong: rgba(255, 150, 50, 0.40);
    --shop-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);
    --shop-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30);
    --shop-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40);
    --shop-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.35);

    /* ===========================================
       TYPOGRAPHY
       =========================================== */
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* ===========================================
       TRANSITIONS
       =========================================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===========================================
       Z-INDEX SCALE
       =========================================== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-tooltip: 1200;
}

/* ===========================================
   RARITY COLORS
   =========================================== */
:root {
    --rarity-common: #9ca3af;
    --rarity-common-bg: rgba(156, 163, 175, 0.12);
    --rarity-common-border: rgba(156, 163, 175, 0.25);

    --rarity-uncommon: #22c55e;
    --rarity-uncommon-bg: rgba(34, 197, 94, 0.12);
    --rarity-uncommon-border: rgba(34, 197, 94, 0.25);

    --rarity-rare: #3b82f6;
    --rarity-rare-bg: rgba(59, 130, 246, 0.12);
    --rarity-rare-border: rgba(59, 130, 246, 0.30);

    --rarity-epic: #a855f7;
    --rarity-epic-bg: rgba(168, 85, 247, 0.12);
    --rarity-epic-border: rgba(168, 85, 247, 0.35);

    --rarity-legendary: #f59e0b;
    --rarity-legendary-bg: rgba(245, 158, 11, 0.12);
    --rarity-legendary-border: rgba(245, 158, 11, 0.40);
    --rarity-legendary-glow: 0 0 20px rgba(245, 158, 11, 0.25);

    --rarity-mythic: #ec4899;
    --rarity-mythic-bg: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(168, 85, 247, 0.12));
    --rarity-mythic-border: rgba(236, 72, 153, 0.45);
    --rarity-mythic-glow: 0 0 25px rgba(236, 72, 153, 0.30);
}

/* ===========================================
   BASE COMPONENT CLASSES
   =========================================== */

/* Card */
.shop-card {
    background: var(--shop-bg-card);
    border: 1px solid var(--shop-border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all var(--transition-base);
    position: relative;
}

.shop-card:hover {
    background: var(--shop-bg-card-hover);
    border-color: var(--shop-border-hover);
    transform: translateY(-3px);
    box-shadow: var(--shop-shadow-hover);
}

.shop-card.featured {
    border-color: var(--shop-border-active);
    box-shadow: 0 0 40px var(--shop-glow-gold);
}

/* Buttons */
.shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    text-decoration: none;
}

.shop-btn:active {
    transform: scale(0.98);
}

.shop-btn-primary {
    background: linear-gradient(135deg, var(--shop-accent-gold), var(--shop-accent-gold-dark));
    color: #1a1512;
    border-color: var(--shop-accent-gold);
}

.shop-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shop-glow-gold-strong);
}

.shop-btn-secondary {
    background: var(--shop-bg-glass);
    color: var(--shop-text-primary);
    border-color: var(--shop-border-default);
}

.shop-btn-secondary:hover {
    background: var(--shop-bg-glass-strong);
    border-color: var(--shop-border-hover);
}

.shop-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.shop-btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
    border-radius: var(--radius-xl);
}

/* Badges */
.shop-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shop-badge-gold {
    background: linear-gradient(135deg, var(--shop-accent-gold), var(--shop-accent-gold-dark));
    color: #1a1512;
}

.shop-badge-success {
    background: var(--shop-success-bg);
    color: var(--shop-success);
    border: 1px solid var(--shop-success-border);
}

.shop-badge-new {
    background: linear-gradient(135deg, #ff00ff, #00ffff);
    color: white;
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
}

/* Alerts / Messages */
.shop-alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    text-align: center;
    font-weight: var(--font-medium);
    margin-bottom: var(--space-5);
}

.shop-alert-success {
    background: var(--shop-success-bg);
    border: 1px solid var(--shop-success-border);
    color: var(--shop-success);
}

.shop-alert-error {
    background: var(--shop-error-bg);
    border: 1px solid var(--shop-error-border);
    color: var(--shop-error);
}

.shop-alert-info {
    background: var(--shop-info-bg);
    border: 1px solid var(--shop-info-border);
    color: var(--shop-info);
}

/* Price display */
.shop-price {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    color: var(--shop-accent-gold);
}

.shop-price-period {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--shop-text-secondary);
}

.shop-price-note {
    font-size: var(--text-sm);
    color: var(--shop-text-muted);
    margin-top: var(--space-1);
}

/* Feature lists */
.shop-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-features li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--shop-text-secondary);
    font-size: var(--text-sm);
}

.shop-features li.highlight {
    color: var(--shop-text-primary);
    font-weight: var(--font-medium);
}

.shop-features li.disabled {
    color: var(--shop-text-disabled);
}

.shop-features li .check {
    color: var(--shop-accent-gold);
    font-weight: bold;
    flex-shrink: 0;
    width: 1.25em;
}

.shop-features li.disabled .check {
    color: var(--shop-error);
}

/* ===========================================
   SKELETON LOADING
   =========================================== */

.shop-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.shop-skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.shop-skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-bottom: 1em;
}

.shop-skeleton-btn {
    height: 44px;
    width: 100%;
}

/* ===========================================
   RESPONSIVE UTILITIES
   =========================================== */

@media (max-width: 768px) {
    :root {
        --space-6: 20px;
        --space-8: 28px;
        --text-3xl: 1.5rem;
        --text-4xl: 1.875rem;
    }
}

@media (max-width: 480px) {
    :root {
        --space-4: 14px;
        --space-5: 16px;
        --space-6: 18px;
        --text-2xl: 1.25rem;
        --text-3xl: 1.375rem;
    }
}