/* ─────────────────────────────────────────────────────────────
   AdvantPlay — colors & type tokens
   Dark casino theme, warm-orange brand, Poppins type
   ───────────────────────────────────────────────────────────── */



/* Reserve vertical-scrollbar gutter on BOTH sides so the visible
   content stays horizontally centered inside the browser-shell
   iframe — otherwise the right-side scrollbar offsets the .wrap
   a few px and the page reads as leaning right. */
html{ scrollbar-gutter: stable both-edges; }

/* On phone widths a real device uses zero-width overlay scrollbars, so
   the desktop-style reserved gutters above would leave an empty 15px
   strip on the left while the scrollbar sits on the right — reading as a
   right-lean. Drop the gutter and hide the scrollbar so mobile content
   fills the full width and stays perfectly centered. */
@media (max-width:900px){
  html{ scrollbar-gutter: auto; scrollbar-width: none; }
  html::-webkit-scrollbar{ width:0; height:0; display:none; }
}

:root {
  /* ── Brand orange ramp — anchored on the AdvantPlay logo color (#FF5E00) */
  --ap-orange-50:  #FFEDDB;
  --ap-orange-100: #FFD4A8;
  --ap-orange-200: #F2A471;
  --ap-orange-300: #E5773F; /* PRIMARY — softened: lower chroma, less bright */
  --ap-orange-400: #D96C36;
  --ap-orange-500: #CC6330;
  --ap-orange-600: #AE5328; /* hover / pressed */
  --ap-orange-700: #9E3900;
  --ap-silver:     #B5B5B5; /* PLAY wordmark grey */

  /* ── Hot/Cold gradients (slot RTP signal) */
  --ap-hot-from:   #FFA661;
  --ap-hot-to:     #E62D45; /* warm red */
  --ap-cold-from:  #2EC8FF;
  --ap-cold-to:    #008FFE;
  --ap-hot-text:   #1E1E1E;
  --ap-cold-text:  #008FFE;

  /* ── Live / status */
  --ap-live:       #CF2D21;
  --ap-win:        #FFB020; /* gold pill */

  /* ── Neutrals (dark theme) */
  --ap-bg:         #0F0F11; /* page bg — deep, slightly cool to let orange pop */
  --ap-surface-1:  #18181B; /* cards / panels */
  --ap-surface-2:  #232327; /* raised tile */
  --ap-surface-3:  #2A2A2F; /* hover / inset */
  --ap-divider:    rgba(255,255,255,0.08);
  --ap-border:     rgba(255,255,255,0.12);
  --ap-border-orange: var(--ap-orange-300);

  /* ── Foreground */
  --ap-fg-1:       #FFFFFF;             /* primary text */
  --ap-fg-2:       #FFEEDD;             /* warm cream — body on dark */
  --ap-fg-3:       rgba(255,255,255,0.73); /* muted */
  --ap-fg-4:       #969EB2;             /* footer label / meta */
  --ap-fg-5:       #BFBFBF;             /* disabled / quiet */
  --ap-on-orange:  #FFEEDD;             /* text on orange */

  /* ── Social brand chips (footer icons) */
  --ap-social-fb:    #1778F2;
  --ap-social-tw:    #00A1F6;
  --ap-social-li:    #2565BD;
  --ap-social-store: #FFB020;

  /* ── Type families */
  --ap-font-sans:    "Poppins", "Inter", system-ui, sans-serif;
  --ap-font-display: "Poppins", "Inter", sans-serif;     /* heavy italics for slogans */
  --ap-font-ui:      "Inter", "Poppins", sans-serif;     /* footer headings, table heads */
  --ap-font-tag:     "Rajdhani", "Poppins", sans-serif;  /* small all-caps tags */
  --ap-font-meta:    "Montserrat", "Poppins", sans-serif;/* tiny meta lines */

  /* ── Type scale */
  --ap-fs-display:  72px;  /* hero on desktop, italic black */
  --ap-fs-h1:       36px;
  --ap-fs-h2:       32px;
  --ap-fs-h3:       24px;
  --ap-fs-h4:       20px;
  --ap-fs-body-lg:  20px;
  --ap-fs-body:     16px;
  --ap-fs-sm:       14px;
  --ap-fs-xs:       12px;
  --ap-fs-tag:      9px;

  /* ── Weights */
  --ap-fw-regular:  400; /* @kind font */
  --ap-fw-medium:   500; /* @kind font */
  --ap-fw-semibold: 600; /* @kind font */
  --ap-fw-bold:     700; /* @kind font */
  --ap-fw-black:    900; /* @kind font */

  /* ── Line height */
  --ap-lh-tight:    1.15; /* @kind font */
  --ap-lh-snug:     1.25; /* @kind font */
  --ap-lh-normal:   1.4; /* @kind font */
  --ap-lh-relaxed:  1.6; /* @kind font */

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

  /* ── Radius */
  --ap-radius-xs: 3px;
  --ap-radius-sm: 5px;
  --ap-radius-md: 6px;
  --ap-radius-lg: 10px;   /* default for buttons, cards */
  --ap-radius-xl: 20px;
  --ap-radius-2xl: 30px;  /* footer plate */
  --ap-radius-pill: 999px;

  /* ── Shadows / elevation */
  --ap-shadow-1: 0 4px 4px rgba(0,0,0,0.25);
  --ap-shadow-2: 0 4px 20px -1px rgba(0,0,0,0.45);
  --ap-shadow-glow-orange: 0 0 24px rgba(255,94,0,0.32);
  --ap-shadow-glow-hot:    0 0 28px rgba(230,45,69,0.38);
  --ap-shadow-glow-cold:   0 0 28px rgba(0,143,254,0.35);

  /* ── Gradients */
  --ap-grad-hot:   linear-gradient(180deg, var(--ap-hot-from) 0%, var(--ap-hot-to) 100%); /* @kind color */
  --ap-grad-cold:  linear-gradient(180deg, var(--ap-cold-from) 0%, var(--ap-cold-to) 100%); /* @kind color */
  --ap-grad-orange:linear-gradient(180deg, var(--ap-orange-300) 0%, var(--ap-orange-600) 100%); /* @kind color */
  --ap-grad-tile-protect: linear-gradient(180deg, rgba(255,94,0,0) 0%, rgba(255,94,0,1) 100%); /* @kind color */
  --ap-grad-overlay: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%); /* @kind color */

  /* ── AP Originals accent (#originals-handoff) — violet, used ONLY on
     Originals surfaces: badges, tile surface, section chrome. Buttons on
     those surfaces stay brand orange. Never mix with Hot/Cold gradients. */
  --ap-originals:      #A583E8;
  --ap-originals-glow: 0 0 34px -6px rgba(165,131,232,.45);
  --ap-originals-tile: radial-gradient(120% 90% at 50% 10%, rgba(165,131,232,.17), transparent 55%),
                       linear-gradient(180deg,#1B1B21 0%,#121216 100%);

  /* ── Motion */
  --ap-ease:      cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ap-dur-fast:  120ms; /* @kind other */
  --ap-dur:       180ms; /* @kind other */
  --ap-dur-slow:  280ms; /* @kind other */
}

/* ── Semantic element styles ────────────────────────────────── */

html, body {
  background: var(--ap-bg);
  color: var(--ap-fg-1);
  font-family: var(--ap-font-sans);
  font-size: var(--ap-fs-body);
  line-height: var(--ap-lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, .ap-h1 {
  font-family: var(--ap-font-sans);
  font-weight: var(--ap-fw-bold);
  font-size: var(--ap-fs-h1);
  line-height: var(--ap-lh-normal);
  color: var(--ap-fg-2);
  letter-spacing: 0;
}

h2, .ap-h2 {
  font-family: var(--ap-font-sans);
  font-weight: var(--ap-fw-bold);
  font-size: var(--ap-fs-h2);
  line-height: var(--ap-lh-normal);
  color: var(--ap-fg-1);
}

h3, .ap-h3 {
  font-family: var(--ap-font-sans);
  font-weight: var(--ap-fw-bold);
  font-size: var(--ap-fs-h3);
  line-height: 1.4;
  color: var(--ap-orange-500);
}

h4, .ap-h4 {
  font-family: var(--ap-font-sans);
  font-weight: var(--ap-fw-bold);
  font-size: var(--ap-fs-h4);
  line-height: 24px;
  color: var(--ap-fg-1);
}

.ap-display {
  font-family: var(--ap-font-display);
  font-weight: var(--ap-fw-black);
  font-style: italic;
  font-size: var(--ap-fs-display);
  line-height: 1;
  color: var(--ap-fg-1);
  text-transform: none;
}

p, .ap-body {
  font-family: var(--ap-font-sans);
  font-size: var(--ap-fs-body);
  line-height: 20px;
  color: var(--ap-fg-2);
}

.ap-body-lg {
  font-size: var(--ap-fs-body-lg);
  line-height: 1;
  color: var(--ap-fg-2);
}

.ap-meta {
  font-family: var(--ap-font-sans);
  font-size: var(--ap-fs-sm);
  color: var(--ap-fg-3);
}

.ap-tag {
  font-family: var(--ap-font-tag);
  font-weight: var(--ap-fw-bold);
  font-size: var(--ap-fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ap-fg-1);
}

.ap-eyebrow {
  font-family: var(--ap-font-meta);
  font-size: var(--ap-fs-tag);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ap-fg-3);
}

.ap-footer-label {
  font-family: var(--ap-font-ui);
  font-weight: var(--ap-fw-bold);
  font-size: var(--ap-fs-h3);
  line-height: 34px;
  color: var(--ap-fg-1);
}