/* ==========================================================================
   777cx Game — JADE ARENA design tokens
   Single source of truth for colour, type, spacing, motion.
   ========================================================================== */

:root {
  /* ---- Core jade backgrounds ---- */
  --color-bg-primary: #071F17;   /* near-black jade, arena-tunnel dark */
  --color-bg-surface: #0F3327;   /* panel background */
  --color-bg-elevated: #17492F;  /* raised cards/modals — spotlight jump */
  --color-bg-deep: #04140E;      /* deepest well behind everything */

  /* ---- Emerald + gold accent family ---- */
  --color-emerald-glow: #2ED9A0; /* electric emerald — kinetic accents */
  --color-emerald-deep: #0E6A4C;
  --color-emerald-soft: #1FA97C;
  --color-gold-primary: #D9B24C; /* luxury gold */
  --color-gold-flare: #FFE9A8;   /* bright flare highlight */
  --color-gold-shadow: #7A5E1E;  /* deep contrast border */

  /* ---- Text ---- */
  --color-text-primary: #EAF7EE; /* cool near-white */
  --color-text-muted: #7FA895;   /* muted jade-grey */
  --color-text-dim: #5C7E6D;

  /* ---- Glow / shadow ---- */
  --color-glow-shadow: rgba(46, 217, 160, 0.28); /* emerald ambient glow */
  --color-gold-glow: rgba(217, 178, 76, 0.30);
  --shadow-panel: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
  --shadow-lift: 0 30px 70px -24px rgba(0, 0, 0, 0.75);
  --shadow-emerald: 0 18px 50px -14px var(--color-glow-shadow);

  /* ---- Glass ---- */
  --glass-bg: rgba(15, 51, 39, 0.55);
  --glass-bg-strong: rgba(23, 73, 47, 0.72);
  --glass-border: rgba(46, 217, 160, 0.16);
  --glass-border-gold: rgba(217, 178, 76, 0.28);
  --glass-blur: 16px;

  /* ---- Signature gradients ---- */
  --grad-base: linear-gradient(200deg, #071F17 0%, #0F3327 45%, #17492F 100%);
  --grad-gold-sweep: linear-gradient(90deg, #7A5E1E 0%, #FFE9A8 50%, #D9B24C 100%);
  --grad-gold-text: linear-gradient(92deg, #FFE9A8 0%, #D9B24C 45%, #7A5E1E 100%);
  --grad-emerald: linear-gradient(120deg, #2ED9A0 0%, #1FA97C 100%);
  --grad-conic: conic-gradient(from 180deg, rgba(46, 217, 160, 0.20), transparent 60%);
  --grad-panel: linear-gradient(155deg, rgba(23, 73, 47, 0.9) 0%, rgba(15, 51, 39, 0.92) 100%);

  /* ---- Typography ---- */
  --font-display: "Bebas Neue", "Archivo Black", "Arial Narrow", sans-serif;
  --font-heading: "Archivo", "Archivo Black", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.9rem, 8.5vw, 6.4rem);
  --fs-display: clamp(2.3rem, 5.5vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 4.2vw, 3.2rem);
  --fs-h3: clamp(1.35rem, 2.4vw, 1.9rem);
  --fs-h4: clamp(1.1rem, 1.8vw, 1.3rem);
  --fs-lg: 1.15rem;
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.04;
  --lh-snug: 1.28;
  --lh-body: 1.7;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;
  --tracking-mega: 0.28em;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-pad: clamp(3.5rem, 8vw, 7rem);
  --container: 1240px;
  --container-wide: 1440px;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-arc: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur-mid: 0.4s;
  --dur-slow: 0.7s;

  /* ---- Layout ---- */
  --nav-h: 74px;
  --z-nav: 100;
  --z-fab: 90;
  --z-mobilebar: 95;
  --z-modal: 200;
}