/* ============================================================
   DJ ARCTIC VIBE — Design Tokens
   ============================================================ */

:root {
  /* ── Colors (matched from logo) ──────────────────────── */
  --bg-deep:        #080e1e;   /* rich deep navy — logo background tone */
  --bg-card:        #0c1530;   /* navy card bg */
  --bg-surface:     #101d3a;   /* slightly lighter navy */
  --bg-surface-2:   #0a1228;

  --accent-ice:     #4dc8e8;   /* medium bright ice blue — logo text color */
  --accent-teal:    #00ddd0;   /* bright teal — icon gradient top */
  --accent-purple:  #8090f0;   /* blue-purple — icon gradient bottom */
  --accent-glow:    #7adaea;   /* lighter ice */
  --accent-frost:   #c5eaf5;   /* very light frost */

  --text-white:     #eef7fb;
  --text-body:      #8ab0c8;
  --text-muted:     #486070;

  --border-subtle:  rgba(77, 200, 232, 0.14);
  --border-glow:    rgba(77, 200, 232, 0.42);

  --danger:         #e05c72;
  --success:        #00ddd0;

  /* ── Gradients (from logo icon — teal→ice→purple) ────── */
  --grad-ice:       linear-gradient(135deg, #00ddd0 0%, #4dc8e8 55%, #8090f0 100%);
  --grad-ice-simple:linear-gradient(135deg, #4dc8e8 0%, #7adaea 100%);
  --grad-dark:      linear-gradient(180deg, #080e1e 0%, #101d3a 100%);
  --grad-hero:      radial-gradient(ellipse at 50% 40%, rgba(77,200,232,0.09) 0%, rgba(8,14,30,0.97) 68%);
  --grad-card:      linear-gradient(135deg, rgba(77,200,232,0.05) 0%, rgba(12,21,48,0.92) 100%);

  /* ── Shadows / Glows ─────────────────────────────────── */
  --glow-sm:        0 4px 24px rgba(77, 200, 232, 0.22);
  --glow-md:        0 8px 40px rgba(77, 200, 232, 0.28), 0 0 80px rgba(77, 200, 232, 0.1);
  --glow-lg:        0 12px 60px rgba(77, 200, 232, 0.35), 0 0 120px rgba(77, 200, 232, 0.14);
  --shadow-card:    0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-lift:    0 20px 60px rgba(77, 200, 232, 0.14), 0 8px 32px rgba(0,0,0,0.7);

  /* ── Typography (matched to logo lettering style) ────── */
  --font-display:   'Bebas Neue', 'Barlow Condensed', sans-serif;
  --font-heading:   'Barlow Condensed', sans-serif;
  --font-body:      'Inter', sans-serif;

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   2rem;       /* 32px */
  --fs-3xl:   2.5rem;     /* 40px */
  --fs-4xl:   3.5rem;     /* 56px */
  --fs-5xl:   5rem;       /* 80px */

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

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-base:   1.6;
  --lh-loose:  1.8;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Layout ──────────────────────────────────────────── */
  --max-width:     1200px;
  --nav-height:    72px;
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-full:   9999px;

  /* ── Transitions ─────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast:   0.15s var(--ease-out);
  --transition-base:   0.3s var(--ease-out);
  --transition-slow:   0.6s var(--ease-out);
}