/**
 * tokens.css — Sistema de variables y tokens de diseño oficial KOVE Moto Perú
 * Identidad visual: kovemotoperu.com (Turquesa KOVE #32A6AA + Obsidiana Profunda)
 * Premium Enterprise SaaS — Dark UI de alta gama técnica
 */

:root {
  /* ══════════════════════════════════════════════
     FONDOS Y SUPERFICIES (Negro Obsidiana KOVE)
     ══════════════════════════════════════════════ */
  --bg-primary: #060810;
  --bg-secondary: #0c1018;
  --bg-tertiary: #111720;
  --bg-elevated: #161e2a;
  --bg-hover: #1c2636;
  --bg-active: #243044;
  --bg-card: #0d1219;

  /* Glassmorphism & Backdrop */
  --glass-bg: rgba(10, 14, 22, 0.88);
  --glass-bg-light: rgba(16, 22, 32, 0.75);
  --glass-border: rgba(50, 166, 170, 0.15);
  --glass-blur: blur(16px);

  /* ══════════════════════════════════════════════
     BORDES TÉCNICOS
     ══════════════════════════════════════════════ */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-focus: #32A6AA;
  --border-card: rgba(50, 166, 170, 0.12);

  /* ══════════════════════════════════════════════
     COLOR OFICIAL KOVE (kovemotoperu.com)
     ══════════════════════════════════════════════ */
  --accent: #32A6AA;
  --accent-light: #3ec1c6;
  --accent-lighter: #5cd5d9;
  --accent-dark: #247d81;
  --accent-subtle: rgba(50, 166, 170, 0.10);
  --accent-subtle-strong: rgba(50, 166, 170, 0.18);
  --accent-glow: rgba(50, 166, 170, 0.35);
  --accent-glow-strong: rgba(50, 166, 170, 0.6);
  --accent-gradient: linear-gradient(135deg, #32A6AA 0%, #28959a 50%, #207e82 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(50,166,170,0.15) 0%, rgba(50,166,170,0.05) 100%);
  --accent-text: #ffffff;

  /* ══════════════════════════════════════════════
     TIPOGRAFÍA Y JERARQUÍAS
     ══════════════════════════════════════════════ */
  --text-primary: #f0f2f5;
  --text-secondary: #8b95a5;
  --text-muted: #556070;
  --text-disabled: #3a4250;

  /* ══════════════════════════════════════════════
     SEMÁFOROS OPERATIVOS
     ══════════════════════════════════════════════ */
  --status-green: #10b981;
  --status-green-bg: rgba(16, 185, 129, 0.10);
  --status-green-border: rgba(16, 185, 129, 0.25);
  --status-green-text: #34d399;

  --status-amber: #f59e0b;
  --status-amber-bg: rgba(245, 158, 11, 0.10);
  --status-amber-border: rgba(245, 158, 11, 0.25);

  --status-red: #ef4444;
  --status-red-bg: rgba(239, 68, 68, 0.10);
  --status-red-border: rgba(239, 68, 68, 0.25);

  --status-blue: #38bdf8;
  --status-blue-bg: rgba(56, 189, 248, 0.10);
  --status-blue-border: rgba(56, 189, 248, 0.25);

  --status-purple: #a855f7;
  --status-purple-bg: rgba(168, 85, 247, 0.10);
  --status-purple-border: rgba(168, 85, 247, 0.25);

  /* ══════════════════════════════════════════════
     CANALES DE COMUNICACIÓN
     ══════════════════════════════════════════════ */
  --channel-whatsapp: #25d366;
  --channel-tiktok: #ff004f;
  --channel-instagram: #e1306c;
  --channel-web: #32A6AA;
  --channel-showroom: #f59e0b;

  /* ══════════════════════════════════════════════
     TIPOGRAFÍAS — Sistema Genjutsu:Paint
     ══════════════════════════════════════════════ */
  --font-display:   'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-editorial: 'Playfair Display', Georgia, serif;
  --font-ui:        'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      'IBM Plex Mono', 'Courier New', monospace;
  /* Alias de compatibilidad para componentes existentes */
  --font-body:      var(--font-ui);
  --font-condensed: var(--font-display);

  /* ══════════════════════════════════════════════
     RADIOS — Premium suavizados
     ══════════════════════════════════════════════ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ══════════════════════════════════════════════
     ESPACIADO MODULAR (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;

  /* ══════════════════════════════════════════════
     SOMBRAS Y ELEVACIONES
     ══════════════════════════════════════════════ */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px -4px rgba(0, 0, 0, 0.7), 0 4px 10px -2px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.8);
  --shadow-cyan: 0 0 24px -4px rgba(50, 166, 170, 0.25);
  --shadow-cyan-strong: 0 0 32px -4px rgba(50, 166, 170, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--border-default);

  /* ══════════════════════════════════════════════
     ANIMACIÓN — Easing validado (sin bounce)
     ══════════════════════════════════════════════ */
  --easing:          cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:       150ms;
  --dur-page:        450ms;
  --dur-stagger:     60ms;
  --transition-fast: 150ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 450ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ══════════════════════════════════════════════
     DIMENSIONES DEL SHELL
     ══════════════════════════════════════════════ */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --topbar-height: 56px;
  --footer-height: 40px;
  /* ══════════════════════════════════════════════
     PROFUNDIDAD 3D & PERSPECTIVA — Motion Layer
     ══════════════════════════════════════════════ */
  --perspective-card: 900px;
  --tilt-max:         6deg;

  /* Glows semánticos adicionales */
  --glow-accent-xs:  0 0  8px rgba(50, 166, 170, 0.28);
  --glow-accent-sm:  0 0 16px rgba(50, 166, 170, 0.36);
  --glow-accent-md:  0 0 32px rgba(50, 166, 170, 0.28);
  --glow-green-sm:   0 0 12px rgba(16,  185, 129, 0.40);
  --glow-red-sm:     0 0 12px rgba(239, 68,  68,  0.40);
  --glow-amber-sm:   0 0 12px rgba(245, 158, 11,  0.40);

  /* Shimmer */
  --shimmer-gradient: linear-gradient(
    120deg,
    transparent            0%,
    transparent           32%,
    rgba(255,255,255,0.07) 50%,
    transparent           68%,
    transparent          100%
  );
  --shimmer-size: 280% 100%;

  /* Timing adicional */
  --dur-shimmer:  1800ms;
  --dur-pulse:    2200ms;
  --dur-float:    4000ms;
  --stagger-sm:   40ms;
  --stagger-md:   60ms;
  --stagger-lg:   80ms;

  /* Easing adicional */
  --easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0.0, 1.0, 1);
}

/* ══════════════════════════════════════════════
   MODO CLARO — Overrides editoriales
   ══════════════════════════════════════════════ */
[data-theme="light"] {
  --bg-primary:          #F5F4F1;
  --bg-secondary:        #ECEAE5;
  --bg-tertiary:         #E3E1DB;
  --bg-elevated:         #FFFFFF;
  --bg-hover:            rgba(0, 0, 0, 0.04);
  --bg-active:           rgba(0, 0, 0, 0.07);
  --bg-card:             #FFFFFF;

  --glass-bg:            rgba(245, 244, 241, 0.92);
  --glass-bg-light:      rgba(255, 255, 255, 0.85);
  --glass-border:        rgba(50, 166, 170, 0.20);

  --border-subtle:       rgba(0, 0, 0, 0.08);
  --border-default:      rgba(0, 0, 0, 0.12);
  --border-strong:       rgba(0, 0, 0, 0.18);
  --border-focus:        #32A6AA;
  --border-card:         rgba(50, 166, 170, 0.15);

  --accent:              #1E9AA0;
  --accent-light:        #32A6AA;
  --accent-lighter:      #3BBEC2;
  --accent-dark:         #156B70;
  --accent-subtle:       rgba(50, 166, 170, 0.10);
  --accent-subtle-strong:rgba(50, 166, 170, 0.15);
  --accent-glow:         rgba(50, 166, 170, 0.20);
  --accent-glow-strong:  rgba(50, 166, 170, 0.40);
  --accent-gradient:     linear-gradient(135deg, #32A6AA 0%, #28959a 50%, #207e82 100%);
  --accent-gradient-soft:linear-gradient(135deg, rgba(50,166,170,0.12) 0%, rgba(50,166,170,0.04) 100%);
  --accent-text:         #ffffff;

  --text-primary:        #111318;
  --text-secondary:      #5A6478;
  --text-muted:          #9AA3B0;
  --text-disabled:       #C5CAD2;

  --shadow-sm:           0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:           0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:           0 12px 28px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.08);
  --shadow-xl:           0 24px 48px rgba(0,0,0,0.14);
  --shadow-cyan:         0 0 20px rgba(50,166,170,0.16);
  --shadow-cyan-strong:  0 0 28px rgba(50,166,170,0.28);
  --shadow-inset:        inset 0 1px 0 rgba(255,255,255,0.80);
  --shadow-modal:        0 25px 50px rgba(0,0,0,0.18), 0 0 0 1px var(--border-default);
}