/* ============================================================
   777cx Game — Emerald Palace Design Tokens
   Deep jade + brushed gold luxury system
   ============================================================ */

:root {
  /* ---- Core surfaces ---- */
  --color-bg-primary: #0B2E23;   /* deep emerald-black, forest depth */
  --color-bg-surface: #123D2E;   /* card / panel background */
  --color-bg-elevated: #1B5240;  /* modals, raised surfaces */
  --color-bg-deep: #071e17;      /* darkest wells / footer */

  /* ---- Emerald accents ---- */
  --color-emerald-bright: #1FA97C; /* secondary accent, used sparingly */
  --color-emerald-soft: #2CC894;

  /* ---- Gold system ---- */
  --color-gold-primary: #C9A227; /* main accent */
  --color-gold-light: #E8C766;   /* hover glow / highlight sweep */
  --color-gold-bronze: #8C6D1F;  /* borders, deep shadow accents */

  /* ---- Text ---- */
  --color-text-primary: #F2EFE3; /* warm ivory */
  --color-text-muted: #9FBDAE;   /* muted sage-grey-green */
  --color-text-soft: #C7DACE;    /* between primary and muted */

  /* ---- Status ---- */
  --color-success: #3ECF8E;
  --color-danger: #E5695B;

  /* ---- Glow / shadow ---- */
  --color-glow-shadow: rgba(201, 162, 39, 0.30);
  --color-emerald-glow: rgba(31, 169, 124, 0.15);
  --shadow-card: 0 18px 44px -18px rgba(0, 0, 0, 0.62);
  --shadow-soft: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 12px 40px -12px var(--color-glow-shadow);
  --shadow-inset: inset 0 1px 0 rgba(242, 239, 227, 0.06);

  /* ---- Gradient signatures ---- */
  --grad-base: linear-gradient(160deg, #0B2E23 0%, #123D2E 55%, #1B5240 100%);
  --grad-gold: linear-gradient(90deg, #8C6D1F 0%, #E8C766 45%, #C9A227 100%);
  --grad-gold-diag: linear-gradient(115deg, #8C6D1F 0%, #E8C766 42%, #C9A227 70%, #E8C766 100%);
  --grad-emerald-glow: radial-gradient(circle, rgba(31, 169, 124, 0.15) 0%, transparent 70%);
  --grad-panel: linear-gradient(155deg, rgba(27, 82, 64, 0.55) 0%, rgba(18, 61, 46, 0.72) 100%);
  --grad-text-gold: linear-gradient(92deg, #E8C766 0%, #C9A227 55%, #E8C766 100%);

  /* ---- Typography ---- */
  --font-display: "Playfair Display", "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.6rem, 6vw, 4.6rem);
  --fs-h1: clamp(2.1rem, 4.6vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-lead: clamp(1.02rem, 1.5vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.7;

  /* ---- Spacing scale ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;
  --space-4xl: 7.5rem;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 820px;
  --nav-h: 74px;

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.22s;
  --dur-mid: 0.45s;
  --dur-slow: 0.9s;

  /* ---- Faceted-gem clip paths (cut-emerald motif) ---- */
  --facet-card: polygon(
    0 14px, 14px 0,
    calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px)
  );
  --facet-badge: polygon(
    10px 0, calc(100% - 10px) 0, 100% 50%,
    calc(100% - 10px) 100%, 10px 100%, 0 50%
  );
  --facet-tag: polygon(
    6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%
  );
}