/* ============================================================
   B9NEW.PK — Design Tokens
   Theme: "Emerald Motion"
   Single source of truth for colour, type, space, motion.
   ============================================================ */

:root {
  /* ---- Brand palette ---------------------------------- */
  --emerald-950: #061109;   /* deepest bg */
  --emerald-900: #0A1F14;   /* primary bg */
  --emerald-850: #0C2318;   /* raised bg */
  --emerald-800: #0F2C1E;   /* panels */
  --emerald-700: #13452E;   /* borders / hover */
  --accent:      #00E676;   /* primary accent */
  --accent-2:    #00C853;   /* accent gradient stop */
  --accent-3:    #69F0AE;   /* light accent / highlights */
  --gold:        #FFC947;   /* reward highlight */

  /* ---- Text ------------------------------------------- */
  --text:        #F5FFF8;   /* primary text */
  --text-2:      #E8F5E9;   /* secondary text */
  --text-muted:  #A9C9B4;   /* muted / captions */
  --text-faint:  #6E8C79;   /* faint / disabled */

  /* ---- Glass surfaces --------------------------------- */
  --glass:        rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(0, 230, 118, 0.18);
  --glass-border-strong: rgba(0, 230, 118, 0.34);
  --hairline:     rgba(233, 245, 233, 0.08);

  /* ---- Gradients -------------------------------------- */
  --grad-accent: linear-gradient(135deg, #00E676 0%, #00C853 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(0,230,118,.16), rgba(0,200,83,.06));
  --grad-text: linear-gradient(120deg, #F5FFF8 0%, #69F0AE 60%, #00E676 100%);
  --grad-panel: linear-gradient(160deg, rgba(19,69,46,.55), rgba(10,31,20,.35));

  /* ---- Shadows & glow --------------------------------- */
  --glow:        0 0 24px rgba(0, 230, 118, 0.25);
  --glow-lg:     0 0 48px rgba(0, 230, 118, 0.35);
  --glow-soft:   0 0 18px rgba(0, 230, 118, 0.16);
  --shadow-sm:   0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 30px 70px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 20px 50px rgba(3, 14, 8, 0.6);

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

  /* ---- Typography ------------------------------------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.6rem, 6vw, 5rem);
  --fs-h1:   clamp(2.1rem, 4.4vw, 3.4rem);
  --fs-h2:   clamp(1.7rem, 3.2vw, 2.6rem);
  --fs-h3:   clamp(1.28rem, 2vw, 1.6rem);
  --fs-h4:   clamp(1.1rem, 1.5vw, 1.28rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.22rem);
  --fs-body: 1rem;
  --fs-sm:   0.9rem;
  --fs-xs:   0.8rem;

  --lh-tight: 1.1;
  --lh-snug: 1.32;
  --lh-body: 1.7;

  /* ---- Layout / spacing ------------------------------- */
  --container: 1200px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 5.5vw, 5rem); /* generous left/right breathing room */
  --section-y: clamp(4rem, 9vw, 8rem);
  --nav-h: 76px;

  --space-1: 0.35rem;
  --space-2: 0.6rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.25rem;
  --space-7: 4.5rem;

  /* ---- Motion ----------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  /* ---- Z-index ---------------------------------------- */
  --z-nav: 100;
  --z-fab: 90;
  --z-mobilebar: 95;
  --z-modal: 200;
  --z-skip: 300;
}