/* ==========================================================================
   ARENA OASIS VR — Design Tokens (standalone export)
   Copy this whole file into your project's CSS.
   ========================================================================== */

/* Fonts — Google Fonts import (or self-host and replace with @font-face) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&family=Oxanium:wght@500;600;700&family=Rajdhani:wght@500;600;700&family=Exo+2:wght@400;500;600&family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  /* ---- Color: base palette ---- */
  --color-void-black:#0E0A17;
  --color-midnight-purple:#171224;
  --color-neon-yellow:#FFD20F;
  --color-electric-orange:#EBA726;
  --color-neon-pink:#FF4F8E;
  --color-vr-cyan:#00D6FF;
  --color-ice-white:#F7F7FA;
  --color-text-secondary:#C8CADB;
  --color-gray-dark:#53566A;
  --color-gray-mid:#7B8092;

  /* ---- Color: semantic states ---- */
  --color-success:#28D17C;
  --color-warning:#FFB800;
  --color-error:#FF5C5C;
  --color-info:#00D6FF;

  /* ---- Color: glow tints (for box-shadow) ---- */
  --glow-yellow:rgba(255,210,15,.45);
  --glow-pink:rgba(255,79,142,.45);
  --glow-cyan:rgba(0,214,255,.4);

  /* ---- Color: semantic aliases ---- */
  --surface-bg:var(--color-void-black);
  --surface-bg-elevated:var(--color-midnight-purple);
  --surface-card:var(--color-midnight-purple);
  --surface-card-border:rgba(0,214,255,.25);
  --surface-card-border-hover:rgba(255,210,15,.35);
  --surface-input:rgba(255,255,255,.04);
  --surface-input-border:rgba(200,202,219,.25);

  --text-primary:var(--color-ice-white);
  --text-secondary:var(--color-text-secondary);
  --text-muted:var(--color-gray-mid);
  --text-on-accent:#1A1426;

  --accent-primary:var(--color-neon-yellow);
  --accent-secondary:var(--color-neon-pink);
  --accent-tertiary:var(--color-vr-cyan);
  --accent-orange:var(--color-electric-orange);

  --border-default:var(--color-gray-dark);
  --border-subtle:rgba(200,202,219,.14);

  /* ---- Color: gradients ---- */
  --gradient-cta:linear-gradient(90deg,#FFD20F 0%,#F5A623 45%,#FF4F8E 100%);
  --gradient-title:linear-gradient(90deg,#EBA726 0%,#FF4F8E 100%);
  --gradient-bg:radial-gradient(circle at 50% 20%,#1A1430 0%,#100B1D 45%,#0E0A17 100%);

  /* ---- Type: families ---- */
  --font-display:'Orbitron',sans-serif;      /* weights used: 600, 700, 800 — hero H1 only */
  --font-heading:'Oxanium',sans-serif;       /* weights used: 500, 600, 700 — H2/H3/UI headings */
  --font-subtitle:'Rajdhani',sans-serif;     /* weights used: 500, 600, 700 — labels, nav, data */
  --font-alt:'Exo 2',sans-serif;             /* weights used: 400, 500, 600 */
  --font-body:'Montserrat',sans-serif;       /* weights used: 400, 500, 600, 700 — all body copy */

  /* ---- Type: size scale ---- */
  --text-h1:clamp(2.5rem,5vw,4rem);
  --text-h2:clamp(1.75rem,3vw,2.75rem);
  --text-h3:1.75rem;
  --text-h4:1.375rem;
  --text-lead:1.25rem;
  --text-body:1rem;
  --text-small:.875rem;
  --text-xs:.75rem;

  /* ---- Type: line-height & tracking ---- */
  --leading-tight:1.08;
  --leading-heading:1.2;
  --leading-body:1.6;
  --tracking-display:.02em;
  --tracking-caps:.14em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --container-max:1200px;

  /* ---- Border radius ---- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;

  /* ---- Shadows & motion ---- */
  --shadow-card:0 8px 30px rgba(0,0,0,.45);
  --shadow-glow-yellow:0 0 24px var(--glow-yellow);
  --shadow-glow-pink:0 0 24px var(--glow-pink);
  --shadow-glow-cyan:0 0 24px var(--glow-cyan);
  --shadow-inset-line:inset 0 1px 0 rgba(255,255,255,.06);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --duration-fast:120ms;
  --duration-base:200ms;
  --duration-slow:400ms;
}

/* ==========================================================================
   Base component styles — Button & Card
   ========================================================================== */

.btn{
  font-family:var(--font-subtitle);
  font-weight:600;
  letter-spacing:.02em;
  border:none;
  border-radius:var(--radius-pill);
  padding:12px 26px;
  font-size:15px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:all var(--duration-base) var(--ease-standard);
}
.btn-primary{ background:var(--gradient-cta); color:var(--text-on-accent); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-secondary{ background:transparent; color:var(--accent-tertiary); border:1.5px solid var(--accent-tertiary); }
.btn-secondary:hover{ background:rgba(0,214,255,.1); }
.btn-ghost{ background:transparent; color:var(--text-primary); border:1.5px solid var(--border-subtle); }
.btn-ghost:hover{ border-color:var(--accent-tertiary); color:var(--accent-tertiary); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-sm{ padding:8px 18px; font-size:13px; }
.btn-lg{ padding:16px 34px; font-size:17px; }

.card{
  background:var(--surface-card);
  border:1px solid var(--surface-card-border);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-card);
  font-family:var(--font-body);
  color:var(--text-primary);
  transition:all var(--duration-base) var(--ease-standard);
}
.card:hover{
  border-color:var(--surface-card-border-hover);
  box-shadow:var(--shadow-glow-cyan); /* swap for --shadow-glow-pink / --shadow-glow-yellow per card */
}
.card h4{ font-family:var(--font-heading); font-size:18px; margin:0 0 8px; color:var(--text-primary); }
.card p{ font-size:14px; line-height:var(--leading-body); color:var(--text-secondary); margin:0; }