/* ============================================================
   KING CANDY — DESIGN TOKENS v1 (Dark + Neon)
   ============================================================ */

:root {
  /* ---------- Color: Base oscura ---------- */
  --kc-bg-deep:  #0A0612;
  --kc-bg:       #14081F;
  --kc-surface:  #1A0E2E;
  --kc-surface-2:#221237;
  --kc-border:   #2B1A47;
  --kc-border-strong:#3A2360;

  /* ---------- Color: Neón ---------- */
  --kc-magenta:      #FF1F8F;
  --kc-magenta-hot:  #FF4DA6;
  --kc-cyan:         #00E5FF;
  --kc-cyan-soft:    #4DEEFF;
  --kc-yellow:       #FFE600;
  --kc-yellow-soft:  #FFF066;
  --kc-lime:         #B8FF1F;
  --kc-lime-soft:    #CFFF66;
  --kc-orange:       #FF6B1F;
  --kc-orange-soft:  #FF9966;
  --kc-purple:       #9D4EFF;
  --kc-purple-soft:  #B884FF;

  /* ---------- Acción ---------- */
  --kc-whatsapp:       #25D366;
  --kc-whatsapp-hover: #1FB957;
  --kc-success:        #4CFFB6;
  --kc-danger:         #FF4D6B;

  /* ---------- Texto ---------- */
  --kc-text:          #FFFFFF;
  --kc-text-2:        #D4D0E0;
  --kc-text-3:        #B8B5C4;
  --kc-text-mute:     #7A7589;
  --kc-text-on-light: #1A0E2E;

  /* ---------- Gradientes ---------- */
  --kc-grad-hero:    linear-gradient(120deg, var(--kc-magenta) 0%, var(--kc-purple) 35%, var(--kc-cyan) 70%, var(--kc-yellow) 100%);
  --kc-grad-cta:     linear-gradient(90deg, var(--kc-magenta), var(--kc-orange), var(--kc-yellow));
  --kc-grad-text:    linear-gradient(90deg, var(--kc-magenta) 0%, var(--kc-cyan) 60%, var(--kc-yellow) 100%);
  --kc-grad-text-2:  linear-gradient(135deg, var(--kc-cyan), var(--kc-lime));
  --kc-grad-magenta: linear-gradient(135deg, #FF1F8F, #9D4EFF);
  --kc-grad-cyan:    linear-gradient(135deg, #00E5FF, #B8FF1F);
  --kc-grad-yellow:  linear-gradient(135deg, #FFE600, #FF6B1F);
  --kc-grad-lime:    linear-gradient(135deg, #B8FF1F, #00E5FF);
  --kc-grad-orange:  linear-gradient(135deg, #FF6B1F, #FF1F8F);
  --kc-grad-purple:  linear-gradient(135deg, #9D4EFF, #FF1F8F);

  /* ---------- Tipografía ---------- */
  --kc-font-display: 'Sour Gummy', 'Inter', system-ui, sans-serif;
  --kc-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --kc-font-brand:   'Sour Gummy', 'Inter', system-ui, sans-serif;

  --kc-fs-xs:   0.75rem;
  --kc-fs-sm:   0.875rem;
  --kc-fs-base: 1rem;
  --kc-fs-md:   1.125rem;
  --kc-fs-lg:   1.25rem;
  --kc-fs-xl:   1.5rem;
  --kc-fs-2xl:  2rem;
  --kc-fs-3xl:  2.5rem;
  --kc-fs-4xl:  3.5rem;
  --kc-fs-5xl:  4.5rem;
  --kc-fs-6xl:  6rem;

  --kc-fw-regular: 400;
  --kc-fw-medium:  500;
  --kc-fw-semi:    600;
  --kc-fw-bold:    700;
  --kc-fw-black:   900;

  --kc-lh-tight:   1.05;
  --kc-lh-snug:    1.2;
  --kc-lh-normal:  1.5;
  --kc-lh-relaxed: 1.7;

  --kc-tracking-tight:  -0.02em;
  --kc-tracking-normal: 0;
  --kc-tracking-wide:   0.04em;
  --kc-tracking-widest: 0.12em;

  /* ---------- Espaciado ---------- */
  --kc-space-1:  0.25rem;
  --kc-space-2:  0.5rem;
  --kc-space-3:  0.75rem;
  --kc-space-4:  1rem;
  --kc-space-5:  1.5rem;
  --kc-space-6:  2rem;
  --kc-space-7:  2.5rem;
  --kc-space-8:  3rem;
  --kc-space-9:  4rem;
  --kc-space-10: 5rem;
  --kc-space-12: 7rem;
  --kc-space-16: 10rem;

  /* ---------- Container ---------- */
  --kc-container:        1240px;
  --kc-container-narrow: 920px;
  --kc-gutter:           clamp(1rem, 4vw, 2.5rem);

  /* ---------- Radios ---------- */
  --kc-radius-sm:  6px;
  --kc-radius-md:  12px;
  --kc-radius-lg:  20px;
  --kc-radius-xl:  28px;
  --kc-radius-2xl: 36px;
  --kc-radius-full:999px;

  /* ---------- Sombras y glows ---------- */
  --kc-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.4);
  --kc-shadow-md:   0 8px 24px rgba(0, 0, 0, 0.5);
  --kc-shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.6);
  --kc-glow-magenta:0 0 24px rgba(255, 31, 143, 0.45), 0 0 56px rgba(255, 31, 143, 0.25);
  --kc-glow-cyan:   0 0 24px rgba(0, 229, 255, 0.45), 0 0 56px rgba(0, 229, 255, 0.25);
  --kc-glow-yellow: 0 0 24px rgba(255, 230, 0, 0.45), 0 0 56px rgba(255, 230, 0, 0.25);
  --kc-glow-lime:   0 0 24px rgba(184, 255, 31, 0.45), 0 0 56px rgba(184, 255, 31, 0.25);
  --kc-glow-purple: 0 0 24px rgba(157, 78, 255, 0.45), 0 0 56px rgba(157, 78, 255, 0.25);
  --kc-glow-orange: 0 0 24px rgba(255, 107, 31, 0.45), 0 0 56px rgba(255, 107, 31, 0.25);
  --kc-glow-soft:   0 8px 32px rgba(157, 78, 255, 0.25);

  /* ---------- Transiciones ---------- */
  --kc-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --kc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --kc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --kc-dur-fast:    160ms;
  --kc-dur:         280ms;
  --kc-dur-slow:    480ms;

  /* ---------- Z-index ---------- */
  --kc-z-base:    1;
  --kc-z-sticky:  50;
  --kc-z-fab:     80;
  --kc-z-modal:   100;
  --kc-z-toast:   110;

  /* ---------- Header ---------- */
  --kc-header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kc-dur-fast: 0ms;
    --kc-dur:      0ms;
    --kc-dur-slow: 0ms;
  }
}