/* ============================================================
   QAZ Arcade Zone — CSS Design Tokens
   Namespace: QAZ_NORTHFIVEFUN
   Theme: Fantasy 8-bit pixel RPG
   Palette: Pink #F04E98 / Deep Purple #1F1B5E
   Fonts: Press Start 2P (headings) / Space Grotesk (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ─── Brand Colors ─── */
  --color-primary:        #F04E98;  /* Hot pink — main CTA, active pills, brand accents */
  --color-primary-soft:   #FCE4F0;  /* Light pink — hover/active backgrounds */
  --color-primary-strong: #C91B73;  /* Deep pink — hover/pressed states */
  --color-secondary:      #1F1B5E;  /* Deep purple — body text, dark cards, dark hero */
  --color-secondary-soft: #4A4585;  /* Mid purple — secondary text */
  --color-accent:         #FFD93D;  /* Pixel gold — fantasy highlights, magic sparkles */
  --color-teal:           #4ECDC4;  /* Teal — fantasy water/ice elements */

  /* ─── Background & Surface ─── */
  --color-bg:             #FFF5F8;  /* Pale pink tint — main background */
  --color-bg-dark:        #1F1B5E;  /* Deep purple — dark hero / drawer bg */
  --color-surface:        #FFFFFF;  /* White — cards, inputs */
  --color-surface-dark:   #2A246E;  /* Slightly lighter purple — dark card bg */

  /* ─── Text ─── */
  --color-text:           #1F1B5E;  /* Deep purple — body text */
  --color-text-muted:     #6B7280;  /* Gray — metadata, placeholders */
  --color-text-inverse:   #FFFFFF;  /* White — text on dark backgrounds */
  --color-text-accent:    #FFD93D;  /* Gold — fantasy highlights */

  /* ─── Borders ─── */
  --color-border:         #E5E7EB;  /* Light gray — subtle dividers */
  --color-border-focus:   #F04E98;  /* Pink — focus rings */

  /* ─── Fonts ─── */
  --font-heading:         'Press Start 2P', monospace;
  --font-body:            'Space Grotesk', system-ui, sans-serif;

  /* ─── Font Sizes (fluid, mobile-first) ─── */
  --text-xs:   0.625rem;   /* 10px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg:   1.0625rem;  /* 17px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  2rem;       /* 32px */
  --text-4xl:  2.5rem;     /* 40px */

  /* ─── Line Heights ─── */
  --leading-tight:  1.2;  /* For Press Start 2P headings */
  --leading-normal: 1.5;  /* For Space Grotesk body text */
  --leading-loose: 1.75; /* For long-form content */

  /* ─── Spacing Scale ─── */
  --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 */

  /* ─── Border Radius ─── */
  --radius-sm:  0.5rem;  /* 8px — buttons, inputs */
  --radius-md:  0.75rem; /* 12px — cards */
  --radius-lg:  1rem;     /* 16px — modals, large cards */
  --radius-xl:  1.5rem;  /* 24px — pills, badges */
  --radius-full: 9999px;  /* Full round — avatars, pills */

  /* ─── Shadows (subtle only — pixel aesthetic) ─── */
  --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 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-pixel: /* no shadow for pixel art */;

  /* ─── Layout ─── */
  --max-width:      480px;  /* Mobile-first column width */
  --nav-height:     56px;   /* Top nav height */
  --drawer-width:   280px;  /* Max drawer width */
  --drawer-buffer:  30px;   /* Drawer right-edge buffer (prevents scrollbar leak) */

  /* ─── Z-Index Scale ─── */
  --z-base:     0;
  --z-card:     10;
  --z-sticky:   100;
  --z-nav:      200;
  --z-drawer:   300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;

  /* ─── Transitions ─── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:  400ms ease;

  /* ─── Motion (transform + opacity only — no scale bounce) ─── */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
}