/* ==========================================================================
   777cX Game — Design System Tokens
   Theme: emerald-glass-light
   Premium fintech-meets-gaming visual identity (light mode only)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Core surfaces ---- */
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F4FAF6;
  --color-bg-tint:        #EFF8F2;
  --color-surface:        #FFFFFF;
  --color-surface-glass:  rgba(255, 255, 255, 0.65);
  --color-surface-glass-strong: rgba(255, 255, 255, 0.82);

  /* ---- Brand accents ---- */
  --color-accent:         #0F9D58;
  --color-accent-deep:    #0B7A43;
  --color-accent-darker:  #085C32;
  --color-accent-soft:    #E3F6EC;
  --color-accent-mint:    #7FE3B0;
  --color-gold:           #D4AF37;
  --color-gold-soft:      #FBF3DC;

  /* ---- Text ---- */
  --color-text-primary:   #0B1F16;
  --color-text-secondary: #4B6358;
  --color-text-muted:     #8AA398;
  --color-text-inverse:   #FFFFFF;

  /* ---- Lines & states ---- */
  --color-border:         #DCEEE3;
  --color-border-strong:  #BFE2CE;
  --color-success:        #12B76A;
  --color-error:          #E5484D;
  --color-focus:          #0B7A43;

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

  --fs-display-xl: clamp(2.15rem, 1.35rem + 3.3vw, 3.5rem);
  --fs-display-lg: clamp(1.9rem, 1.25rem + 2.6vw, 3rem);
  --fs-h2:         clamp(1.65rem, 1.15rem + 2.1vw, 2.6rem);
  --fs-h3:         clamp(1.22rem, 1.03rem + 0.8vw, 1.6rem);
  --fs-h4:         clamp(1.06rem, 0.98rem + 0.36vw, 1.22rem);
  --fs-lead:       clamp(1.02rem, 0.96rem + 0.32vw, 1.19rem);
  --fs-body:       1rem;
  --fs-sm:         0.9125rem;
  --fs-xs:         0.8125rem;

  --lh-tight: 1.1;
  --lh-snug:  1.28;
  --lh-body:  1.75;
  --lh-loose: 1.85;

  --tracking-tight: -0.028em;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.14em;

  /* ---- Spacing scale ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  --section-pad-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- Layout: generous side gutters ---- */
  --container-max: 1240px;
  --container-pad: 20px;
  --measure: 74ch;

  /* ---- Radii ---- */
  --radius-xs:  8px;
  --radius-sm:  12px;
  --radius-md:  18px;
  --radius-lg:  26px;
  --radius-xl:  34px;
  --radius-pill: 999px;

  /* ---- Elevation (soft, layered, emerald-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(11, 31, 22, 0.04);
  --shadow-sm: 0 2px 6px rgba(11, 31, 22, 0.05), 0 1px 2px rgba(11, 31, 22, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(11, 31, 22, 0.10), 0 2px 8px rgba(11, 31, 22, 0.04);
  --shadow-lg: 0 22px 50px -20px rgba(11, 31, 22, 0.18), 0 6px 18px -8px rgba(11, 31, 22, 0.07);
  --shadow-xl: 0 40px 90px -30px rgba(11, 31, 22, 0.26), 0 12px 30px -14px rgba(11, 31, 22, 0.10);
  --shadow-glow: 0 10px 30px -10px rgba(15, 157, 88, 0.55);
  --shadow-glow-strong: 0 16px 44px -12px rgba(15, 157, 88, 0.62);

  /* ---- Gradients ---- */
  --grad-accent:  linear-gradient(135deg, #12B76A 0%, #0F9D58 45%, #0B7A43 100%);
  --grad-accent-soft: linear-gradient(135deg, #E9FAF1 0%, #DCF3E7 100%);
  --grad-gold:    linear-gradient(135deg, #EACB6A 0%, #D4AF37 55%, #B8942A 100%);
  --grad-dark:    linear-gradient(140deg, #0B1F16 0%, #0D3B27 55%, #0B7A43 130%);
  --grad-mesh:    radial-gradient(1100px 620px at 12% -8%, rgba(127, 227, 176, 0.30), transparent 62%),
                  radial-gradient(900px 560px at 92% 4%, rgba(15, 157, 88, 0.18), transparent 60%),
                  radial-gradient(760px 520px at 55% 105%, rgba(212, 175, 55, 0.10), transparent 62%);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 160ms;
  --dur-mid:  280ms;
  --dur-slow: 520ms;

  /* ---- Layers ---- */
  --z-aurora: 0;
  --z-content: 1;
  --z-sticky: 60;
  --z-nav: 80;
  --z-fab: 90;
  --z-overlay: 100;
}

@media (min-width: 768px) {
  :root { --container-pad: 40px; }
}

@media (min-width: 1200px) {
  :root { --container-pad: 72px; --container-max: 1300px; }
}

@media (min-width: 1600px) {
  :root { --container-pad: 96px; }
}