/* ==========================================================================
   PlayEola — Colors & Type
   Source: Branding Gridlines PDF + app_website tailwind.config.js + index.css
   ========================================================================== */

/* Fonts: subsetted Orbitron + Inter are loaded via fonts.css in the kit (keeps the
   PDF light). Do not @import the full Google families here, it defeats the subset. */

:root {
  /* ---------- BRAND COLOR PRIMITIVES (from Branding Gridlines PDF) ---------- */
  --pe-purple:        #0a0037;  /* Deep brand purple — RGB 10, 0, 55 */
  --pe-dark:          #111425;  /* Near-black indigo — RGB 17, 20, 37 */
  --pe-orange:        #eaa338;  /* Brand orange — RGB 234, 163, 56 */
  --pe-yellow:        #efe175;  /* Brand yellow — RGB 239, 225, 117 */

  /* Gradients (per brand book) */
  --pe-gradient-dark:  linear-gradient(135deg, #111425 0%, #0a0037 100%);
  --pe-gradient-gold:  linear-gradient(135deg, #eaa338 0%, #efe175 100%);
  --pe-gradient-text:  linear-gradient(90deg, #eaa338 0%, #efe175 50%, #eaa338 100%);

  /* ---------- NEUTRALS (used in app_website) ---------- */
  --pe-black:         #000000;
  --pe-night:         #0a0e27;  /* Card backgrounds */
  --pe-gray-900:      #111827;
  --pe-gray-800:      #1f2937;
  --pe-gray-700:      #374151;
  --pe-gray-600:      #4b5563;
  --pe-gray-500:      #6b7280;
  --pe-gray-400:      #9ca3af;
  --pe-gray-300:      #d1d5db;
  --pe-gray-200:      #e5e7eb;
  --pe-white:         #ffffff;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:               #111425;       /* Page bg (brand-dark) */
  --bg-elevated:      rgba(10,14,39,0.80);   /* Card bg w/ backdrop-blur */
  --bg-elevated-hover:rgba(10,14,39,0.95);
  --surface-glass:    rgba(255,255,255,0.05);
  --surface-glass-hi: rgba(255,255,255,0.10);

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg-1:             #ffffff;       /* Primary text on dark */
  --fg-2:             #e5e7eb;       /* Secondary body */
  --fg-3:             #d1d5db;       /* Tertiary / supporting */
  --fg-4:             #9ca3af;       /* Muted / metadata */
  --fg-disabled:      #4b5563;

  /* ---------- ACCENT / INTERACTIVE ---------- */
  --accent:           var(--pe-orange);
  --accent-hover:     var(--pe-yellow);
  --accent-soft:      rgba(234,163,56,0.10);
  --accent-glow:      rgba(234,163,56,0.50);
  --accent-glow-hi:   rgba(234,163,56,0.80);
  --focus-ring:       var(--pe-orange);

  /* ---------- BORDERS ---------- */
  --border-subtle:    rgba(255,255,255,0.10);
  --border:           rgba(75,85,99,0.50);     /* gray-600/50 */
  --border-strong:    rgba(255,255,255,0.80);
  --border-accent:    var(--pe-orange);

  /* ---------- SEMANTIC STATES ---------- */
  --success:          #4ade80;
  --warning:          #facc15;
  --danger:           #ef4444;
  --info:             #6366f1;

  /* PILLAR ACCENT GLOWS (Three Pillars / Solutions) */
  --pillar-rgs:       #a855f7;       /* Core Eola — purple */
  --pillar-studio:    #eaa338;       /* Studio Eola — orange */
  --pillar-platform:  #6366f1;       /* Platform Eola — indigo */

  /* ---------- TYPOGRAPHY: FAMILIES ---------- */
  --font-logo:    'Orbitron','Inter',ui-sans-serif,system-ui,sans-serif;
  --font-heading: 'Orbitron','Inter',ui-sans-serif,system-ui,sans-serif;
  --font-body:    'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---------- TYPOGRAPHY: SCALE (rem-based) ---------- */
  --fs-display:   clamp(3rem, 8vw, 10rem);   /* 48–160px */
  --fs-h1:        clamp(2.25rem, 5vw, 4rem); /* 36–64px */
  --fs-h2:        clamp(1.875rem, 4vw, 3rem);/* 30–48px */
  --fs-h3:        1.5rem;     /* 24 */
  --fs-h4:        1.25rem;    /* 20 */
  --fs-lg:        1.125rem;   /* 18 */
  --fs-body:      1rem;       /* 16 */
  --fs-sm:        0.875rem;   /* 14 */
  --fs-xs:        0.75rem;    /* 12 */
  --fs-2xs:       0.6875rem;  /* 11 — pillar labels */

  /* WEIGHTS */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-xbold:   800;
  --fw-black:   900;

  /* TRACKING — heavy use of widest tracking on UPPERCASE labels */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;       /* Logo */
  --ls-wider:   0.1em;
  --ls-widest:  0.15em;       /* Eyebrow / nav UPPERCASE */

  /* LINE HEIGHT */
  --lh-display: 1;
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.5;
  --lh-relaxed: 1.625;

  /* ---------- SPACING (4px base) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-20:80px;
  --sp-24:96px;
  --sp-32:128px;

  /* ---------- RADII ---------- */
  --r-sm:  4px;     /* CTA buttons (rounded-sm) */
  --r-md:  8px;
  --r-lg:  12px;    /* Game stat tiles */
  --r-xl:  16px;
  --r-2xl: 24px;    /* Pillar / game cards (rounded-2xl) */
  --r-full: 9999px;

  /* ---------- SHADOWS / GLOWS ---------- */
  --shadow-card:       0 10px 30px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 25px 50px rgba(0,0,0,0.5), 0 0 30px rgba(234,163,56,0.3);
  --shadow-glow:       0 0 20px rgba(234,163,56,0.5);
  --shadow-glow-hi:    0 0 40px rgba(234,163,56,0.8);
  --shadow-text-hero:  0 2px 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.5);
  --letterpress: 0 -1px 1px rgba(0,0,0,0.25), 0 1px 1px rgba(255,255,255,0.08);

  /* ---------- MOTION ---------- */
  --ease-out-quart: cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* Site primary */
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   700ms;
}

/* ==========================================================================
   SEMANTIC TYPE STYLES — drop-in classes
   ========================================================================== */

html { background: var(--bg); color: var(--fg-1); }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

.font-logo,
.pe-logo {
  font-family: var(--font-logo);
  font-weight: var(--fw-xbold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.font-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
}

.pe-display {
  font: var(--fw-black) var(--fs-display)/var(--lh-display) var(--font-heading);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.pe-h1 {
  font: var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-heading);
  letter-spacing: var(--ls-tight);
}

.pe-h2 {
  font: var(--fw-bold) var(--fs-h2)/var(--lh-tight) var(--font-heading);
  letter-spacing: var(--ls-tight);
}

.pe-h3 {
  font: var(--fw-bold) var(--fs-h3)/var(--lh-snug) var(--font-heading);
}

.pe-h4 {
  font: var(--fw-bold) var(--fs-h4)/var(--lh-snug) var(--font-heading);
}

.pe-eyebrow {
  font: var(--fw-bold) var(--fs-xs)/var(--lh-snug) var(--font-body);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-2);
}

.pe-body-lg {
  font: var(--fw-regular) var(--fs-lg)/var(--lh-relaxed) var(--font-body);
  color: var(--fg-2);
}

.pe-body {
  font: var(--fw-regular) var(--fs-body)/var(--lh-base) var(--font-body);
  color: var(--fg-2);
}

.pe-small {
  font: var(--fw-regular) var(--fs-sm)/var(--lh-base) var(--font-body);
  color: var(--fg-3);
}

.pe-meta {
  font: var(--fw-regular) var(--fs-xs)/var(--lh-snug) var(--font-body);
  color: var(--fg-4);
}

.pe-stat-value {
  font: var(--fw-bold) var(--fs-sm)/1 var(--font-body);
  color: var(--fg-1);
}

.pe-stat-label {
  font: var(--fw-regular) var(--fs-2xs)/1 var(--font-body);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-4);
}

/* Letterpress / chrome text effect on dark bgs (used on hero "1 STOP / SHOP") */
.pe-letterpress {
  color: rgba(255,255,255,0.92);
  text-shadow: var(--letterpress);
}

/* Animated gold gradient text */
.pe-gold-text {
  background: var(--pe-gradient-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: pe-gradient-shift 3s ease-in-out infinite;
}
@keyframes pe-gradient-shift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}