/* ═══════════════════════════════════════════════════════════
   VOLLEY — Design Tokens  (tokens.css)
   All CSS custom properties used across every page
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700;800;900&family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {

  /* ── Brand Colors ─────────────────────── */
  --lime:           #C8F135;
  --lime-bright:    #D4FF3A;
  --lime-muted:     rgba(200, 241, 53, 0.13);
  --lime-glow:      rgba(200, 241, 53, 0.26);
  --lime-border:    rgba(200, 241, 53, 0.22);
  --lime-text:      rgba(200, 241, 53, 0.78);

  --obsidian:       #111111;
  --surface-1:      #181818;
  --surface-2:      #202020;
  --surface-3:      #2A2A2A;
  --surface-4:      #333333;
  --surface-hover:  #303030;

  --ghost:          #F4F4F4;
  --ghost-2:        rgba(244, 244, 244, 0.65);
  --ghost-3:        rgba(244, 244, 244, 0.30);
  --ghost-4:        rgba(244, 244, 244, 0.10);
  --ghost-5:        rgba(244, 244, 244, 0.06);

  --grey:           #888888;
  --grey-muted:     rgba(136, 136, 136, 0.45);

  --border:         rgba(255, 255, 255, 0.07);
  --border-strong:  rgba(255, 255, 255, 0.13);

  /* ── Functional Colors ────────────────── */
  --error:          #FF4D4D;
  --error-muted:    rgba(255, 77, 77, 0.14);
  --warning:        #FFB800;
  --warning-muted:  rgba(255, 184, 0, 0.14);
  --success:        var(--lime);

  /* ── Border Radius ────────────────────── */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-2xl:   40px;
  --r-pill:  9999px;

  /* ── Shadows ──────────────────────────── */
  --shadow-sm:    0 1px 8px  rgba(0, 0, 0, 0.35);
  --shadow-md:    0 4px 24px rgba(0, 0, 0, 0.50);
  --shadow-lg:    0 12px 60px rgba(0, 0, 0, 0.65);
  --shadow-lime:  0 0 32px rgba(200, 241, 53, 0.22),
                  0 0 64px rgba(200, 241, 53, 0.09);

  /* ── Typography Scale ─────────────────── */
  --font-display:   'Barlow Condensed', sans-serif;
  --font-body:      'DM Sans', sans-serif;
  --font-reel:      'DM Serif Display', serif;

  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  52px;
  --text-5xl:  72px;
  --text-6xl:  96px;

  /* ── Motion ───────────────────────────── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:  cubic-bezier(0.65, 0.00, 0.35, 1);

  /* ── Layout ───────────────────────────── */
  --nav-height:   56px;
  --panel-width:  360px;
}