/* ============================================================
   SAZÚ — Design Tokens
   Paleta: violeta profundo · magenta · lavanda · azul oscuro
   ============================================================ */

:root {
  /* ── Colores de marca ── */
  --color-purple-deep:    #080116;   /* body background */
  --color-purple-dark:    #0F0228;   /* sección oscura */
  --color-purple-card:    #160840;   /* tarjetas oscuras */
  --color-purple-vivid:   #7C3AED;   /* violeta interactivo */
  --color-purple-mid:     #9D6FFF;   /* hover / suave */
  --color-magenta:        #D946EF;   /* acento principal */
  --color-magenta-dark:   #A21CAF;   /* acento oscuro */

  /* ── Texto ── */
  --color-text:           #FFFFFF;
  --color-text-muted:     rgba(255, 255, 255, 0.68);
  --color-text-soft:      rgba(255, 255, 255, 0.45);
  --color-text-accent:    #E879F9;   /* etiquetas rosa/fucsia */
  --color-text-dark:      #1A0B3B;
  --color-text-dark-muted:#4B3D6A;

  /* ── Fondos de sección ── */
  --color-bg-body:        #080116;
  --color-bg-section:     #0D0325;
  --color-bg-card-dark:   rgba(16, 5, 45, 0.88);
  --color-bg-light:       #EDE8FF;
  --color-bg-light-gray:  #F3F0FA;
  --color-bg-contact:     #06091E;
  --color-bg-footer:      #030410;

  /* ── Gradientes ── */
  --gradient-btn:         linear-gradient(135deg, #D946EF 0%, #7C3AED 55%, #4C1D95 100%);
  --gradient-btn-hover:   linear-gradient(135deg, #E879F9 0%, #9D6FFF 55%, #6D28D9 100%);
  --gradient-hero-glow:   radial-gradient(ellipse 90% 65% at 50% 15%, rgba(124, 58, 237, 0.55) 0%, transparent 65%);
  --gradient-separator:   linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.6), rgba(217, 70, 239, 0.4), transparent);

  /* ── Glow / sombras ── */
  --glow-btn:             0 4px 28px rgba(217, 70, 239, 0.45);
  --glow-btn-hover:       0 6px 40px rgba(217, 70, 239, 0.65);
  --glow-card:            0 8px 48px rgba(124, 58, 237, 0.25);
  --glow-circle-purple:   radial-gradient(ellipse 60% 50% at 50% 50%, rgba(124, 58, 237, 0.35) 0%, transparent 70%);
  --shadow-card:          0 2px 32px rgba(0, 0, 0, 0.5);
  --shadow-img:           0 4px 24px rgba(0, 0, 0, 0.4);

  /* ── Tipografía ── */
  --font-brand:           'Bokra', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:            -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, 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 */
  --text-5xl:   3rem;       /* 48px */
  --text-hero:  clamp(2.25rem, 5.5vw, 3.75rem);
  --text-title: clamp(1.75rem, 4vw, 2.5rem);

  /* ── Espaciado ── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  /* ── Bordes ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 9999px;

  /* ── Transiciones ── */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;

  /* ── Contenedor ── */
  --container-max:     1200px;
  --container-padding: 1rem;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: 2rem;
  }
}