/* ==========================================================================
   777cX Game — Design Tokens ("Emerald Prestige")
   Light-mode premium casino / fintech aesthetic.
   ========================================================================== */

:root {
  /* --- Surfaces --------------------------------------------------------- */
  --color-bg: #FFFFFF;
  --color-bg-soft: #F6FBF8;
  --color-surface: #FFFFFF;
  --color-surface-alt: #EDF7F1;

  /* --- Emerald scale ---------------------------------------------------- */
  --color-emerald-900: #063D26;
  --color-emerald-800: #084F31;
  --color-emerald-700: #0C7A43;
  --color-emerald-600: #129A56;
  --color-emerald-400: #2ECC81;
  --color-emerald-200: #A8E6C6;
  --color-emerald-050: #E9F8F0;

  /* --- Accents ---------------------------------------------------------- */
  --color-gold-accent: #D4AF37;
  --color-gold-soft: #F2E3B0;

  /* --- Text ------------------------------------------------------------- */
  --color-text-primary: #12261C;
  --color-text-secondary: #4B6B5C;
  --color-text-muted: #8FA79C;
  --color-text-invert: #FFFFFF;

  /* --- Lines & states --------------------------------------------------- */
  --color-border: #DCEEE3;
  --color-border-strong: #C2E2CF;
  --color-success: #129A56;
  --color-error: #D64545;
  --color-warning: #C98A0B;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-card: 0 4px 20px rgba(6, 61, 38, 0.08);
  --shadow-card-lg: 0 18px 48px rgba(6, 61, 38, 0.14);
  --shadow-emerald-glow: 0 0 30px rgba(18, 154, 86, 0.18);
  --shadow-emerald-glow-lg: 0 18px 46px rgba(18, 154, 86, 0.30);
  --shadow-inset-hair: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  /* --- Gradients -------------------------------------------------------- */
  --gradient-hero: linear-gradient(135deg, #FFFFFF 0%, #EAF8F0 50%, #DCF2E4 100%);
  --gradient-cta: linear-gradient(135deg, #129A56 0%, #0C7A43 100%);
  --gradient-cta-hover: linear-gradient(135deg, #2ECC81 0%, #129A56 100%);
  --gradient-emerald-text: linear-gradient(120deg, #0C7A43 0%, #129A56 45%, #2ECC81 100%);
  --gradient-gold-line: linear-gradient(90deg, rgba(212, 175, 55, 0) 0%, #D4AF37 22%, #F2E3B0 50%, #D4AF37 78%, rgba(212, 175, 55, 0) 100%);
  --gradient-band: linear-gradient(140deg, #063D26 0%, #0C7A43 55%, #129A56 100%);
  --gradient-glass: linear-gradient(150deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 251, 245, 0.78) 100%);

  /* --- Typography ------------------------------------------------------- */
  --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.4rem, 1.35rem + 4.4vw, 4.35rem);
  --fs-h1: clamp(2.1rem, 1.35rem + 3.1vw, 3.5rem);
  --fs-h2: clamp(1.72rem, 1.22rem + 2.05vw, 2.7rem);
  --fs-h3: clamp(1.24rem, 1.06rem + 0.72vw, 1.6rem);
  --fs-h4: clamp(1.06rem, 0.98rem + 0.34vw, 1.22rem);
  --fs-lead: clamp(1.03rem, 0.97rem + 0.32vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.9125rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.735rem;

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.78;
  --ls-label: 0.16em;
  --ls-tight: -0.022em;

  /* --- Radii ------------------------------------------------------------ */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* --- Spacing ---------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 6rem;

  /* Section rhythm */
  --section-pad-y: clamp(3.75rem, 2.4rem + 5.4vw, 7rem);

  /* --- Layout ----------------------------------------------------------- */
  /* Narrower max-width + generous gutters = deliberate breathing room
     on the left and right edges of every page. */
  --container-max: 1180px;
  --container-wide: 1320px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4.5rem);

  --header-h: 76px;
  --mobilebar-h: 66px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;

  /* --- Z-index ---------------------------------------------------------- */
  --z-blob: 0;
  --z-content: 1;
  --z-sticky: 60;
  --z-header: 80;
  --z-fab: 90;
  --z-drawer: 100;
}

/* Reduced-motion users get an effectively instant, static experience. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}