/* ============================================================
   STORYTIME "BEACHY LILA" — Design Tokens
   Coinshop Admin Panel · FiveM Server
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Brand · Lila ---------- */
  --lila-50:  #F8F1FF;
  --lila-100: #EFE0FF;
  --lila-200: #DCC1FF;
  --lila-300: #C49AFF;
  --lila-400: #A972F4;
  --lila-500: #8A4FE2;  /* MAIN brand */
  --lila-600: #6F39C9;
  --lila-700: #532896;
  --lila-800: #361963;
  --lila-900: #1F0E3D;
  --lila-950: #110724;

  /* ---------- Sunset (warm accents) ---------- */
  --gold:    #FFD27A;
  --peach:   #FFB48A;
  --coral:   #FF7E8B;
  --magenta: #E94CD0;

  /* ---------- Ocean / Sand / Foam ---------- */
  --aqua:  #6EE0D2;
  --deep:  #2BB0C8;
  --sand:  #FFE9C9;
  --foam:  #FFF7EC;

  /* ---------- Semantic ---------- */
  --success: #5FD8A6;
  --warning: #FFC267;
  --danger:  #FF6E8A;
  --info:    #8FB7FF;

  /* ---------- Backgrounds (Dark Dusk) ---------- */
  --bg-page:       #150828;
  --bg-surface:    rgba(45, 22, 80, 0.55);
  --bg-card:       rgba(35, 18, 65, 0.72);
  --bg-card-hover: rgba(50, 26, 90, 0.82);
  --bg-input:      rgba(20, 10, 40, 0.55);
  --bg-overlay:    rgba(17, 7, 36, 0.72);

  /* ---------- Foreground / Text ---------- */
  --fg-1: #FFF7EC;  /* primary on dark (foam) */
  --fg-2: #E4D2FF;  /* secondary (soft lilac) */
  --fg-3: #A78DC8;  /* muted */
  --fg-4: #6F5A8E;  /* faint */
  --fg-on-light: #2A1656;

  /* ---------- Borders (Lilac translucency) ---------- */
  --border-hairline: rgba(255,247,236,0.08);
  --border-soft:     rgba(196,154,255,0.18);
  --border-medium:   rgba(196,154,255,0.32);
  --border-bright:   rgba(220,193,255,0.55);
  --border-warm:     rgba(255,180,138,0.35);

  /* ---------- Signature Gradients ---------- */
  --grad-sunset:  linear-gradient(135deg, #FFD27A 0%, #FF7E8B 38%, #E94CD0 70%, #8A4FE2 100%);
  --grad-dusk:    linear-gradient(180deg, #1F0E3D 0%, #2A1657 30%, #3F2173 60%, #553296 100%);
  --grad-lila:    linear-gradient(135deg, #A972F4 0%, #6F39C9 100%);
  --grad-palmbar: linear-gradient(135deg, #E94CD0 0%, #8A4FE2 60%, #2BB0C8 100%);
  --grad-sky:     linear-gradient(180deg, #3CB8CE 0%, #5C8FD9 22%, #8064D8 42%, #A350C8 58%, #C84DBA 72%, #E68AA8 86%, #FFB48A 100%);

  /* ---------- Shadows & Glows (warm violet, never neutral) ---------- */
  --shadow-card: 0 12px 36px rgba(20, 8, 40, 0.5), inset 0 1px 0 rgba(255,247,236,0.06);
  --shadow-sm:   0 2px 8px rgba(20, 8, 40, 0.4);
  --shadow-lg:   0 24px 64px rgba(20, 8, 40, 0.55), inset 0 1px 0 rgba(255,247,236,0.08);
  --glow-lila:   0 0 24px rgba(169, 114, 244, 0.45), 0 0 56px rgba(138, 79, 226, 0.18);
  --glow-coral:  0 0 24px rgba(255, 126, 139, 0.45), 0 0 56px rgba(233, 76, 208, 0.18);
  --glow-aqua:   0 0 20px rgba(110, 224, 210, 0.45);
  --glow-gold:   0 0 24px rgba(255, 210, 122, 0.5);

  /* ---------- Spacing (4pt base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ---------- Radii ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---------- Font families ---------- */
  --font-display: 'Pacifico', cursive;
  --font-sans:    'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============================================================
   Base reset / page setup
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tabular numbers everywhere a number lives */
.num, .stat, .price, .coins, table td:has(.num), [data-numeric] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Type scale
   ============================================================ */

.display, h1.hero {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.wordmark, .brand {
  font-family: var(--font-display);
  font-weight: 400;
  background: var(--grad-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.01em;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-3);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0 0 var(--s-3);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
  margin: 0 0 var(--s-2);
  color: var(--fg-1);
}

p, .body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 var(--s-3);
  text-wrap: pretty;
}

.body-lg { font-size: 1.125rem; line-height: 1.55; }
.body-sm { font-size: 0.875rem; line-height: 1.5; }

.caption {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg-3);
}

.label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg-1);
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.4;
}

.stat-readout {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

.mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
}

/* ============================================================
   Common atoms (use across UI kit)
   ============================================================ */

.card {
  background: var(--bg-card);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s-6);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
  transform: translateY(-2px);
}

a { color: var(--lila-300); text-decoration: none; }
a:hover { color: var(--lila-200); }

::selection { background: rgba(169,114,244,0.45); color: var(--fg-1); }

/* Scrollbar — beachy lila */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(169,114,244,0.25);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(169,114,244,0.45); }