/* ============================================================
   777CX GAME — "Emerald Vault" Design Tokens
   Single source of truth for colours, type, spacing, motion.
   ============================================================ */

:root {
  /* ---- Core surfaces ---- */
  --color-bg: #0B0F0D;              /* charcoal black w/ green undertone */
  --color-bg-alt: #101613;          /* secondary panel background        */
  --color-surface: #161D1A;         /* card surface                      */
  --color-surface-elevated: #1C2521;/* elevated card / modal             */

  /* ---- Emerald accents ---- */
  --color-accent: #00C776;          /* primary emerald                   */
  --color-accent-bright: #2FFFA0;   /* glow / hover emerald              */
  --color-accent-deep: #007A4D;     /* deep emerald for gradients        */
  --color-gold-hint: #D4B26A;       /* sparing premium badge accent      */
  --color-gold-bright: #F0D28A;     /* gold highlight                    */

  /* ---- Text ---- */
  --color-text-primary: #F2F5F3;
  --color-text-secondary: #9BAAA3;
  --color-text-muted: #647069;

  /* ---- Borders & lines ---- */
  --color-border: rgba(0, 199, 118, 0.15);
  --color-border-strong: rgba(0, 199, 118, 0.35);
  --color-border-soft: rgba(255, 255, 255, 0.06);

  /* ---- Shadows & glows ---- */
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-card-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 24px rgba(0, 199, 118, 0.35);
  --shadow-glow-strong: 0 0 40px rgba(0, 199, 118, 0.5);
  --shadow-gold-glow: 0 0 22px rgba(212, 178, 106, 0.35);

  /* ---- Gradients ---- */
  --gradient-hero: linear-gradient(135deg, #0B0F0D 0%, #10201A 45%, #0B0F0D 100%);
  --gradient-accent: linear-gradient(135deg, #00C776 0%, #007A4D 100%);
  --gradient-accent-bright: linear-gradient(135deg, #2FFFA0 0%, #00C776 100%);
  --gradient-gold: linear-gradient(135deg, #F0D28A 0%, #D4B26A 55%, #B8934A 100%);
  --gradient-surface: linear-gradient(180deg, #1C2521 0%, #141B18 100%);
  --gradient-line: linear-gradient(90deg, transparent, rgba(0, 199, 118, 0.5), transparent);

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Typography ---- */
  --font-display: "Sora", "Space Grotesk", var(--font-fallback-display);
  --font-body: "Inter", var(--font-fallback-body);
  --font-fallback-display: "Segoe UI", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
  --font-fallback-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-display: clamp(2.4rem, 6vw, 4.2rem);
  --fs-h1: clamp(2rem, 5vw, 3.2rem);
  --fs-h2: clamp(1.6rem, 3.6vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2.4vw, 1.6rem);
  --fs-h4: clamp(1.1rem, 1.8vw, 1.25rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* ---- Spacing scale (8pt) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-narrow: 820px;
  --header-height: 72px;
  --mobile-bar-height: 64px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-mid: 280ms;
  --dur-slow: 480ms;

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-decor: 0;
  --z-sticky-bar: 40;
  --z-header: 100;
  --z-fab: 90;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}