/* =========================================
   MiniTiendAI — Unified Design Tokens v1.0
   Single source of truth for all design tokens.
   Loaded first on every page.
   ========================================= */

:root {
  /* ── Brand Colors ── */
  --primary-color: #ff3131;
  --primary-dark: #e02b2b;
  --primary-light: #ff6b6b;
  --primary-color-light: rgba(255, 49, 49, 0.1);
  --primary-gradient: linear-gradient(135deg, #ff3131 0%, #ff6b6b 100%);
  --primary-gradient-soft: linear-gradient(135deg, rgba(255, 49, 49, 0.08) 0%, rgba(255, 107, 107, 0.08) 100%);
  --primary-glow: rgba(255, 49, 49, 0.35);
  --primary-text: #ffffff;
  --gradient: linear-gradient(135deg, #ff3131 0%, #ff6b6b 100%);

  /* ── Multi-Hue Gradients ── */
  --gradient-vibrant: linear-gradient(135deg, #ff3131 0%, #c471ed 50%, #6366f1 100%);
  --gradient-sunset: linear-gradient(135deg, #ff9f43 0%, #ff3131 100%);
  --gradient-aurora: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --gradient-ocean: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --gradient-mint: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --gradient-whatsapp: linear-gradient(135deg, #25D366 0%, #128C7E 100%);

  /* ── Secondary & Accent Colors ── */
  --secondary-color: #6366f1;
  --secondary-dark: #4f46e5;
  --secondary-light: #818cf8;
  --secondary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --accent-color: #8b5cf6;
  --accent-pink: #ec4899;
  --accent-cyan: #06b6d4;
  --accent-amber: #fbbf24;

  /* ── AI Assistant Colors ── */
  --ai-accent: #667eea;
  --ai-accent-dark: #764ba2;
  --ai-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* ── Status Colors ── */
  --success-color: #10b981;
  --success-light: #34d399;
  --success-dark: #059669;
  --warning-color: #f59e0b;
  --warning-dark: #d97706;
  --error-color: #ef4444;
  --error-dark: #dc2626;
  --info-color: #3b82f6;

  /* ── WhatsApp ── */
  --whatsapp-color: #25D366;
  --whatsapp-dark: #128C7E;

  /* ── Text Colors ── */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-tertiary: #64748b;
  --text-color: #1e293b;
  --text-light: #475569;
  --text-muted: #64748b;

  /* ── Background Colors ── */
  --bg-body: #f8fafc;
  --bg-surface: #ffffff;
  --bg-muted: #f1f5f9;
  --bg-gradient: linear-gradient(160deg, var(--bg-body) 0%, #eef2f7 40%, #f1f0f9 100%);
  --bg-glass: rgba(255, 255, 255, 0.75);
  --bg-glass-strong: rgba(255, 255, 255, 0.9);
  --light-gray: #f8fafc;
  --white: #ffffff;
  --background-color: #f8fafc;
  --background-white: #ffffff;

  /* ── Border Colors ── */
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --border-hover: rgba(203, 213, 225, 0.8);
  --glass-border: 1px solid rgba(255, 255, 255, 0.4);

  /* ── Shadows (xs → 2xl scale) ── */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.04), 0 24px 56px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 12px 24px rgba(0, 0, 0, 0.05), 0 36px 72px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 4px 12px rgba(255, 49, 49, 0.2), 0 10px 40px -10px rgba(255, 49, 49, 0.4);
  --shadow-glow: 0 0 20px rgba(255, 49, 49, 0.1), 0 0 40px rgba(255, 49, 49, 0.08);
  --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.04), 0 24px 56px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.06), 0 24px 60px rgba(0, 0, 0, 0.08);

  /* ── Border Radius ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-full: 9999px;
  --border-radius: 16px;

  /* ── Easing ── */
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Transitions ── */
  --transition-fast: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
  --transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s var(--easing), transform 0.2s var(--easing), opacity 0.2s;
  --transition-base: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s var(--easing), transform 0.2s var(--easing), opacity 0.2s;
  --transition-medium: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s var(--easing), transform 0.3s var(--easing), opacity 0.3s;
  --transition-slow: color 0.4s, background-color 0.4s, border-color 0.4s, box-shadow 0.4s var(--easing), transform 0.4s var(--easing), opacity 0.4s;
  --transition-bounce: transform 0.4s var(--easing-bounce), box-shadow 0.4s var(--easing-bounce), opacity 0.3s;

  /* ── Glass Effects ── */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-bg-dark: rgba(15, 23, 42, 0.85);
  --glass-blur: blur(20px);
  --glass-saturate: saturate(180%);

  /* ── Animation ── */
  --animation-duration: 0.3s;
  --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --sidebar-width: 280px;
  --header-height: 80px;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);

  /* ── Container Widths ── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1600px;

  /* ── Spacing Scale (4px grid) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Semantic Spacing ── */
  --space-section: var(--space-16);
  --space-card-padding: var(--space-6);
  --space-card-gap: var(--space-4);
  --space-input-padding: var(--space-3) var(--space-4);
  --space-btn-padding: var(--space-3) var(--space-6);

  /* ── Typography Scale (1.25 ratio) ── */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-2xs: 0.65rem;

  /* ── Line Heights ── */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ── Z-Index Scale ── */
  --z-base: 0;
  --z-content: 1;
  --z-above: 2;
  --z-float: 10;
  --z-sidebar: 50;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-ai-panel: 500;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-toast: 1200;
  --z-fullscreen: 9999;
  --z-tutorial: 10000;

  /* ── Derived Color Tokens (theme-aware via color-mix) ── */
  --primary-shadow-sm: 0 4px 12px color-mix(in oklch, var(--primary-color) 25%, transparent);
  --primary-shadow-lg: 0 8px 24px color-mix(in oklch, var(--primary-color) 35%, transparent);
  --primary-shadow-hover: 0 8px 24px color-mix(in oklch, var(--primary-color) 35%, transparent), 0 4px 8px rgba(0, 0, 0, 0.06);
  --primary-focus-ring: 0 0 0 4px color-mix(in oklch, var(--primary-color) 10%, transparent);
  --primary-border-hover: color-mix(in oklch, var(--primary-color) 20%, transparent);
  --primary-bg-subtle: color-mix(in oklch, var(--primary-color) 5%, transparent);
  --primary-bg-hover: color-mix(in oklch, var(--primary-color) 8%, white);
  --success-shadow-sm: 0 4px 15px color-mix(in oklch, var(--success-color) 30%, transparent);
  --success-shadow-lg: 0 8px 25px color-mix(in oklch, var(--success-color) 40%, transparent);
  --overlay-dark: rgba(15, 23, 42, 0.6);
  --overlay-blur: blur(8px);
  --tint-black-2: rgba(0, 0, 0, 0.02);
  --tint-black-5: rgba(0, 0, 0, 0.05);
  --tint-black-6: rgba(0, 0, 0, 0.06);
  --dark-surface-bg: rgba(15, 23, 42, 0.8);
  --dark-surface-solid: #0f172a;
  --dark-border: rgba(51, 65, 85, 0.6);
  --dark-border-strong: rgba(51, 65, 85, 0.8);

  /* ── Status Color Tokens ── */
  --status-pending-bg: #fff7ed;
  --status-pending-text: #c2410c;
  --status-pending-border: #ffedd5;
  --status-processing-bg: #eff6ff;
  --status-processing-text: #2563eb;
  --status-processing-border: #dbeafe;
  --status-completed-bg: #ecfdf5;
  --status-completed-text: #047857;
  --status-completed-border: #d1fae5;
  --status-cancelled-bg: #fef2f2;
  --status-cancelled-text: #dc2626;
  --status-cancelled-border: #fee2e2;
  --status-info-bg: #eff6ff;
  --status-info-text: #2563eb;
  --status-warning-bg: #fefce8;
  --status-warning-text: #92400e;
  --status-success-dark: #065f46;
  --status-success-darker: #064e3b;

  /* ── Brand Color Tokens ── */
  --brand-facebook: #1877F2;
  --brand-instagram-start: #f09433;
  --brand-instagram-mid1: #e6683c;
  --brand-instagram-mid2: #dc2743;
  --brand-instagram-mid3: #cc2366;
  --brand-instagram-end: #bc1888;
  --brand-tiktok: #000000;
  --brand-tiktok-accent: #25F4EE;
  --brand-twitter: #1DA1F2;
  --brand-youtube: #FF0000;
  --brand-linkedin: #0A66C2;
  --brand-paypal: #00457C;
  --brand-paypal-light: #0079C1;
  --brand-mercadopago: #009ee3;
  --brand-mercadopago-accent: #ffe600;
  --brand-google: #4285f4;
  --brand-google-text: #3c4043;
  --brand-google-border: #dadce0;

  /* ── Stat Card Icon Tokens ── */
  --stat-purple-bg: #f0eaff;
  --stat-purple-border: #e3d9ff;
  --stat-green-bg: #e6fff5;
  --stat-green-border: #d1fae5;
  --stat-orange-bg: #fff5e6;
  --stat-orange-border: #ffe7c2;
  --stat-pink-bg: #ffe6ec;
  --stat-pink-border: #ffcfd9;

  /* ── Surface Tokens for on-dark text ── */
  --text-on-dark: #ffffff;

  accent-color: var(--primary-color);
}

/* Fallback for browsers without color-mix() support (Safari < 16.4) */
@supports not (color: color-mix(in oklch, red 50%, blue)) {
  :root {
    --primary-shadow-sm: 0 4px 12px rgba(255, 49, 49, 0.25);
    --primary-shadow-lg: 0 8px 24px rgba(255, 49, 49, 0.35);
    --primary-shadow-hover: 0 8px 24px rgba(255, 49, 49, 0.35), 0 4px 8px rgba(0, 0, 0, 0.06);
    --primary-focus-ring: 0 0 0 4px rgba(255, 49, 49, 0.10);
    --primary-border-hover: rgba(255, 49, 49, 0.20);
    --primary-bg-subtle: rgba(255, 49, 49, 0.05);
    --primary-bg-hover: rgba(255, 49, 49, 0.08);
    --success-shadow-sm: 0 4px 15px rgba(16, 185, 129, 0.30);
    --success-shadow-lg: 0 8px 25px rgba(16, 185, 129, 0.40);
  }
}