/* ============================================================
   tokens.css — Design Tokens: Ilios Vounó SPA Premium
   Paleta neón contemporánea: negro + cian + magenta + lima
   ============================================================ */

:root {
  /* ── COLOR PALETTE — Neón Contemporáneo ── */

  /* Base negra */
  --color-black:        #0a0a0a;
  --color-black-light:  #111111;
  --color-black-mid:    #1a1a1a;
  --color-black-soft:   #222222;
  --color-black-border: #2a2a2a;

  /* Platinum Silver (Replaces Cyan entirely) */
  --color-cyan-50:   #ffffff;
  --color-cyan-200:  #f3f4f6;
  --color-cyan-400:  #d1d5db;
  --color-cyan-500:  #9ca3af;
  --color-cyan-600:  #6b7280;
  --color-cyan-glow: rgba(255, 255, 255, 0.25);

  /* Neón Magenta — Coyote rosa */
  --color-magenta-200: #ff80e8;
  --color-magenta-400: #ff00c8;
  --color-magenta-500: #cc00a0;
  --color-magenta-600: #990078;
  --color-magenta-glow: rgba(255, 0, 200, 0.35);

  /* Neón Lima — acento energía */
  --color-lime-200: #ddff80;
  --color-lime-400: #aaff00;
  --color-lime-500: #88cc00;
  --color-lime-600: #669900;
  --color-lime-glow: rgba(170, 255, 0, 0.35);

  /* Violeta — Tobalá */
  --color-violet-400: #9b59b6;
  --color-violet-500: #7d3c98;
  --color-violet-glow: rgba(155, 89, 182, 0.35);

  /* Dorado — Cuishe */
  --color-gold-400: #f39c12;
  --color-gold-500: #c87f0a;
  --color-gold-glow: rgba(243, 156, 18, 0.35);

  /* Gris plata — Sierra Negra */
  --color-silver-400: #95a5a6;
  --color-silver-500: #717d7e;
  --color-silver-glow: rgba(149, 165, 166, 0.3);

  /* Texto */
  --color-white:   #ffffff;
  --color-gray-200: #e0e0e0;
  --color-gray-400: #aaaaaa;
  --color-gray-600: #666666;

  /* ── SEMANTIC TOKENS ── */
  --bg-primary:        var(--color-black);
  --bg-secondary:      var(--color-black-light);
  --bg-elevated:       var(--color-black-mid);
  --bg-card:           rgba(26, 26, 26, 0.7);
  --text-primary:      var(--color-white);
  --text-secondary:    var(--color-gray-400);
  --text-accent:       var(--color-white);
  --border-subtle:     rgba(255, 255, 255, 0.06);
  --border-accent:     rgba(255, 255, 255, 0.25);

  /* ── TYPOGRAPHY ── */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Courier New', monospace;

  /* Scale */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3.5rem;     /* 56px */
  --text-hero: clamp(3rem, 7vw, 6rem);
  --text-countdown: clamp(3rem, 8vw, 7rem);

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.2em;

  /* ── SPACING (8pt 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-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40: 10rem;

  /* ── LAYOUT ── */
  --container-max:  1280px;
  --container-wide: 1440px;
  --gutter:         clamp(1.5rem, 4vw, 4rem);

  /* ── BORDER RADIUS ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── SHADOWS & GLOW ── */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.6);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.7);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.8);

  --glow-cyan:     0 0 15px rgba(255,255,255,0.3), 0 0 40px rgba(255,255,255,0.1);
  --glow-cyan-sm:  0 0 10px rgba(255,255,255,0.2), 0 0 20px rgba(255,255,255,0.1);
  --glow-magenta:  0 0 20px rgba(255,0,200,0.5), 0 0 60px rgba(255,0,200,0.2);
  --glow-lime:     0 0 20px rgba(170,255,0,0.5), 0 0 60px rgba(170,255,0,0.2);
  --glow-violet:   0 0 20px rgba(155,89,182,0.5), 0 0 60px rgba(155,89,182,0.2);
  --glow-gold:     0 0 20px rgba(243,156,18,0.5), 0 0 60px rgba(243,156,18,0.2);
  --glow-silver:   0 0 15px rgba(149,165,166,0.4), 0 0 40px rgba(149,165,166,0.15);

  /* ── GLASSMORPHISM ── */
  --glass-bg:       rgba(10, 10, 10, 0.75);
  --glass-bg-modal: rgba(5, 5, 5, 0.92);
  --glass-border:   rgba(255, 255, 255, 0.07);

  /* ── MOTION ── */
  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;
  --duration-slowest: 1200ms;

  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX ── */
  --z-canvas:   0;
  --z-content:  1;
  --z-cart:     50;
  --z-nav:      100;
  --z-modal:    200;
  --z-toast:    300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
    --duration-slowest: 0ms;
  }
}