/* ============================================================
   variables.css — THE REBRAND LAYER
   This file is the only CSS a new brand needs to edit.
   Values below reproduce the WinSpirit-grade reference system
   (extracted via computed-style inspection, 2026-06-10).
   ============================================================ */

:root {
  /* ---------- BRAND BLOCK (swap per site) ---------- */

  /* primary = the CTA accent (reference: mint-green ramp) */
  --brand-primary-10: #4df2c1;
  --brand-primary-20: #00eda6;   /* main CTA fill */
  --brand-primary-30: #00d595;
  --brand-primary-40: #00be85;
  --brand-primary-50: #00a674;
  --brand-primary-ink: #110e1b;  /* text ON primary buttons */

  /* secondary = pop/gradient accent (reference: magenta-purple) */
  --brand-secondary-10: #dc79eb;
  --brand-secondary-20: #cd3fe2;
  --brand-secondary-30: #a432b5;
  --brand-secondary-40: #7625a8;

  /* signature gradients (retune stops to brand hues) */
  --g-primary:    linear-gradient(90deg, #eb02e2 0%, #2797ff 100%);
  --g-secondary:  linear-gradient(89.77deg, #ff3858 .17%, #d200e1 99.8%);
  --g-tertiary:   linear-gradient(201deg, #ffe602 -4.58%, #ff5810 38.35%, #c110ff 111.23%);
  --g-table-head: linear-gradient(89deg, #3e00c1 .38%, #fa00ff 107.78%);
  --g-vip-badge:  linear-gradient(59deg, #5a21fc 23.22%, #9f06ef 69.06%);
  --g-hero-1:     linear-gradient(to right, #2c0a5b 0%, #3b0b7d 50%, #6c01f3 100%);
  --g-hero-2:     linear-gradient(120deg, #064e3b 0%, #047857 55%, #10b981 110%);
  --g-hero-3:     linear-gradient(131deg, #41009b 1.06%, #5d00ba 98.57%);
  --g-popup-1:    linear-gradient(110deg, #5a21fc 0%, #2797ff 100%);
  --g-popup-2:    linear-gradient(110deg, #d200e1 0%, #ff3858 100%);
  --g-card-art:   linear-gradient(to right, #4c0b53 0%, #2c0a5b 100%);
  --g-vip-hero:   linear-gradient(0deg, #110e1b 0%, #1c0e47 70.9%, #1b0861 120.7%);

  /* brand glows */
  --glow-brand:   0 0 6px 0 rgba(118, 37, 168, .8);
  --glow-purple:  0 0 15px 0 #a046ff;
  --glow-purple-edge: inset 0 0 0 2px #b66eff;
  --glow-magenta: 0 0 15px 0 #fc00ff;
  --glow-cyan:    0 0 .75rem 0 #00bfff8c;

  /* logo (swap the file per brand) */
  --logo-url: url("../assets/template/logo.svg");

  /* ---------- SYSTEM BLOCK (keep fixed across brands) ---------- */

  /* canvas + neutral surface ramp — DO NOT tint with the brand hue */
  --c-bg:        #110e1b;
  --c-surface-1: #221c36;
  --c-surface-2: #30284c;
  --c-surface-3: #362f4c;
  --c-line:      #4c426b;
  --c-line-soft: #574c7b;
  --c-ink:       #fcfcfc;
  --c-ink-muted: #c1b3db;
  --c-ink-faint: #b6bdcc;
  --c-input:     #443a70;
  --c-header-bg: rgba(48, 40, 76, .84);

  /* status + personal */
  --c-gold:    #ffe114;
  --c-warning: #ffba33;
  --c-error:   #f65757;
  --c-success: #20d552;

  /* type scale (Sora) */
  --font: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --t-xs: .75rem;  --t-sm: .875rem;  --t-base: 1rem;
  --t-lg:  clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --t-h3:  clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --t-h2:  clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --t-h1:  clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem);

  /* spacing + layout */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:5rem;
  --container: 82.5rem;             /* 1320px */
  --gutter: clamp(1rem, 4vw, 2rem);
  --carousel-gap: 1.5rem;
  --header-h: 64px;

  /* radius scale */
  --r-xs:.125rem; --r-sm:.5rem; --r-md:1rem; --r-lg:1.5rem; --r-xl:2rem; --r-full:9999px;

  /* shadows */
  --sh-hairline: inset 0 0 0 1px var(--c-line);
  --sh-card: 0 8px 24px rgba(0, 0, 0, .35);
  --ring-current: inset 0 0 0 2px var(--c-gold);
  --ring-exclusive: inset 0 0 0 2px #ff3858;

  /* motion */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms;
}