/* ═══════════════════════════════════════════════════
   ATLAS PRO ONTV — Design Tokens
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Colors: Brand ─────────────────────────────── */
  --color-primary:          #8b5cf6;
  --color-primary-dark:     #6d28d9;
  --color-primary-light:    #a78bfa;
  --color-primary-glow:     rgba(139, 92, 246, 0.35);

  --color-accent:           #f59e0b;
  --color-accent-dark:      #d97706;
  --color-accent-light:     #fbbf24;
  --color-accent-glow:      rgba(245, 158, 11, 0.30);

  /* ── Colors: Backgrounds ───────────────────────── */
  --color-bg-dark:          #0b071e;
  --color-bg-dark-alt:      #120c2e;
  --color-bg-body:          #f9fafb;
  --color-bg-section-alt:   #f5f3ff;

  /* ── Colors: Surfaces ──────────────────────────── */
  --color-surface:          #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-glass:    rgba(255, 255, 255, 0.05);
  --color-surface-glass-border: rgba(255, 255, 255, 0.08);

  /* ── Colors: Text ──────────────────────────────── */
  --color-text:             #1f1a3a;
  --color-text-secondary:   #4b4566;
  --color-text-muted:       #8a83a3;
  --color-text-white:       #f5f3ff;
  --color-text-white-muted: rgba(245, 243, 255, 0.72);

  /* ── Colors: Semantic ──────────────────────────── */
  --color-success:          #10b981;
  --color-success-glow:     rgba(16, 185, 129, 0.30);
  --color-whatsapp:         #25d366;
  --color-whatsapp-dark:    #1ebe5d;
  --color-danger:           #ef4444;
  --color-border:           #e9e7f5;
  --color-border-light:     rgba(255, 255, 255, 0.08);

  /* ── Gradients ─────────────────────────────────── */
  --gradient-hero:          linear-gradient(160deg, #0b071e 0%, #150e3a 40%, #100a2b 100%);
  --gradient-hero-overlay:  linear-gradient(180deg, rgba(11, 7, 30, 0.3) 0%, rgba(11, 7, 30, 0.88) 100%);
  --gradient-cta:           linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-cta-hover:     linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --gradient-primary:       linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  --gradient-featured:      linear-gradient(160deg, #4c1d95 0%, #6d28d9 55%, #8b5cf6 100%);
  --gradient-dark-card:     linear-gradient(160deg, #120c2e 0%, #1c1445 100%);

  /* ── Typography ────────────────────────────────── */
  --font-heading:           'Poppins', sans-serif;
  --font-body:              'Poppins', sans-serif;

  --fs-display:             clamp(2.4rem, 5vw, 4rem);
  --fs-h1:                  clamp(2rem, 4vw, 3.2rem);
  --fs-h2:                  clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3:                  clamp(1.2rem, 2vw, 1.5rem);
  --fs-h4:                  clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body:                1rem;
  --fs-body-lg:             1.125rem;
  --fs-small:               0.875rem;
  --fs-xs:                  0.75rem;

  --lh-heading:             1.15;
  --lh-body:                1.7;

  --fw-normal:              400;
  --fw-medium:              500;
  --fw-semibold:            600;
  --fw-bold:                700;
  --fw-extrabold:           800;
  --fw-black:               900;

  --ls-tight:               -0.025em;
  --ls-heading:             -0.035em;

  /* ── Spacing ───────────────────────────────────── */
  --space-2xs:              0.25rem;
  --space-xs:               0.5rem;
  --space-sm:               0.75rem;
  --space-md:               1rem;
  --space-lg:               1.5rem;
  --space-xl:               2rem;
  --space-2xl:              3rem;
  --space-3xl:              4rem;
  --space-4xl:              6rem;
  --space-section:          clamp(4rem, 8vw, 7rem);

  /* ── Border Radius ─────────────────────────────── */
  --radius-sm:              0.5rem;
  --radius-md:              0.75rem;
  --radius-lg:              1rem;
  --radius-xl:              1.25rem;
  --radius-2xl:             1.5rem;
  --radius-full:            9999px;

  /* ── Shadows ───────────────────────────────────── */
  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:              0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:              0 24px 56px rgba(0, 0, 0, 0.14);
  --shadow-glow-primary:    0 8px 32px var(--color-primary-glow);
  --shadow-glow-accent:     0 8px 32px var(--color-accent-glow);
  --shadow-glow-whatsapp:   0 8px 28px rgba(37, 211, 102, 0.45);

  /* ── Transitions ───────────────────────────────── */
  --ease-out:               cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:            cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:          150ms;
  --duration-normal:        250ms;
  --duration-slow:          400ms;

  /* ── Layout ────────────────────────────────────── */
  --container-max:          1200px;
  --container-wide:         1400px;
  --container-narrow:       800px;
  --container-padding:      clamp(1rem, 4vw, 2rem);

  /* ── Z-Index ───────────────────────────────────── */
  --z-base:                 1;
  --z-dropdown:             10;
  --z-sticky:               100;
  --z-header:               120;
  --z-overlay:              200;
  --z-modal:                300;
  --z-whatsapp:             150;
}