/* ============================================================
   1spin4win — brand tokens (Brandbook V1.26.05).
   Art-Deco casino: Deep Night + Golden Glow + Sapphire, Outfit type.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&display=swap");

:root {
  /* ---- Brand palette ---- */
  --night:      #001C20; /* Deep Night    */
  --teal-deep:  #00343d; /* surface base  */
  --teal:       #00434F; /* Deco Teal     */
  --sapphire:   #00A8BE; /* Sapphire Sparkle */
  --gold:       #E3A355; /* Golden Glow   */
  --gold-deep:  #cf8f3c;
  --ivory:      #FFFAEE; /* Vintage Ivory */

  /* ---- radii ---- */
  --c365-radius-sm: 6px;  --c365-radius-md: 10px; --c365-radius-lg: 16px;
  --c365-radius-xl: 22px; --c365-radius-2xl: 32px; --c365-radius-pill: 40px;
  --c365-radius-full: 9999px;

  /* ---- shadows ---- */
  --c365-shadow-card: 0 18px 40px rgba(0, 12, 14, 0.45);
  --c365-shadow-elev: 0 28px 70px rgba(0, 10, 12, 0.5);

  /* ---- semantic state ---- */
  --c365-danger-700: #ff6b6b;
  --c365-danger-100: #2a1416;

  /* ---- spacing ---- */
  --c365-space-1: 4px;  --c365-space-2: 8px;  --c365-space-3: 12px;
  --c365-space-4: 16px; --c365-space-5: 20px; --c365-space-6: 24px;
  --c365-space-8: 32px; --c365-space-10: 40px; --c365-space-12: 50px;
  --c365-space-16: 60px;--c365-space-20: 80px; --c365-space-24: 100px;

  /* ---- fonts ---- */
  --c365-font-sans: "Outfit", system-ui, -apple-system, sans-serif;
  --c365-font-display: "Outfit", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Softer, eased scrolling (anchor + programmatic). Respect reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg-canvas, var(--night));
  color: var(--ink-base, var(--ivory));
  font-family: var(--c365-font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Art-Deco "beams of light" background — fixed, behind everything. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 52% at 80% -8%, rgba(0, 168, 190, 0.16), transparent 62%),
    radial-gradient(58% 60% at 102% 104%, rgba(0, 67, 79, 0.65), transparent 60%),
    radial-gradient(46% 55% at -6% 24%, rgba(0, 67, 79, 0.5), transparent 60%),
    radial-gradient(40% 40% at 18% 102%, rgba(227, 163, 85, 0.07), transparent 60%),
    linear-gradient(116deg, transparent 0 37%, rgba(0, 168, 190, 0.05) 37% 37.5%, transparent 38%),
    linear-gradient(116deg, transparent 0 61%, rgba(227, 163, 85, 0.05) 61% 61.5%, transparent 62%),
    linear-gradient(116deg, transparent 0 73%, rgba(0, 168, 190, 0.04) 73% 73.4%, transparent 74%),
    var(--night);
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* Hand cursor on interactive elements (cards, buttons, chips, links). */
a, .card, [data-cursor="hover"] { cursor: pointer; }

/* ---- Single brand theme (dark Deep Night) ---- */
:root,
:root[data-theme="spin4win"] {
  --bg-canvas:   #001C20;
  --bg-card:     #06313a;
  --bg-elevated: #084150;
  --ink-base:    #FFFAEE;
  --ink-muted:   rgba(255, 250, 238, 0.62);
  --ink-dim:     rgba(255, 250, 238, 0.40);
  --brand:       #E3A355;
  --brand-deep:  #cf8f3c;
  --brand-tint:  rgba(227, 163, 85, 0.15);
  --brand-glow:  radial-gradient(60% 60% at 30% 30%, #f0c489 0%, #E3A355 50%, transparent 100%);
  --border:      rgba(255, 250, 238, 0.10);
  --border-strong: rgba(255, 250, 238, 0.22);
  --gold-line:   rgba(227, 163, 85, 0.55);
}

/* ---- Magnetic cursor (kept; only renders if mounted) ---- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, width, height, opacity;
}
.cursor-dot { width: 6px; height: 6px; background: var(--brand); transition: opacity .2s ease; }
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid var(--brand);
  opacity: 0.55;
  transition: width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1), opacity .2s, background .2s;
}
.cursor-ring.is-hover { width: 72px; height: 72px; opacity: 1; background: color-mix(in oklab, var(--brand) 12%, transparent); }
.cursor-ring.is-down { width: 20px; height: 20px; opacity: 1; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ---- Reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.1,1), transform .9s cubic-bezier(.2,.7,.1,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---- Utility ---- */
.no-scroll { overflow: hidden; }

/* ---- Buttons ---- */
.btn-primary {
  background: var(--ivory);
  color: var(--night);
  border: 0;
  border-radius: var(--c365-radius-pill);
  padding: 16px 28px;
  font-weight: 500;
  font-size: 15px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s;
}
.btn-primary:hover { background: #fff; }
.btn-primary:active { transform: scale(0.97); }

/* Brand CTA — Golden Glow on Deep Night text */
.btn-brand {
  background: var(--gold);
  color: var(--night);
  border: 0;
  border-radius: var(--c365-radius-pill);
  padding: 16px 28px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  transition: transform .25s, background .25s, box-shadow .25s;
}
.btn-brand:hover {
  background: #efbb78;
  box-shadow: 0 12px 34px color-mix(in oklab, var(--gold) 42%, transparent);
}
.btn-brand:active { transform: scale(0.97); }

/* Ghost — thin golden line */
.btn-ghost {
  background: transparent;
  color: var(--ink-base);
  border: 1px solid var(--gold-line);
  border-radius: var(--c365-radius-pill);
  padding: 14px 22px;
  font-weight: 500;
  font-size: 14px;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-ghost:hover { background: color-mix(in oklab, var(--gold) 10%, transparent); border-color: var(--gold); color: var(--gold); }

/* Pretty scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-line); }

::selection { background: rgba(227, 163, 85, 0.30); color: var(--ivory); }