/* ==========================================================================
   77 Game / 77BET — Design Tokens  (Ivory Card-Room, light theme)

   Brand colours still come from the real assets:
     assets/images/logo/logo.jpg      -> gold wordmark + crimson field
     assets/images/favicon/favicon.jpg-> maroon crest, gold ornament, ruby gem
   but the canvas is inverted: warm ivory paper, deep maroon ink, crimson as
   the action colour, gold reserved for foil accents.

   THE ONE RULE THAT KEEPS THIS THEME READABLE
   Brand gold (#f7c948) is 1.46:1 on ivory — it can never carry text here.
   Gold is a FILL only (badges, rules, icon tiles, foil bars), always with
   --color-ink on top. Where an accent needs to be *text*, use --color-bronze
   (5.0:1+ on every surface tier) or --color-crimson (6.5:1 on ivory).
   ========================================================================== */

:root {
  /* --- Paper stack (canvas -> raised -> tinted well) --- */
  --color-bg: #fbf6ee;         /* warm ivory canvas */
  --color-bg-elev: #ffffff;    /* raised cards */
  --color-surface: #f5eadb;    /* tinted well / inset blocks */
  --color-surface-2: #efdfcb;  /* deepest tint, still light */

  /* --- Brand gold — FILL ONLY, never text (see rule above) --- */
  --color-accent-hi: #ffd76a;
  --color-accent: #f7c948;
  --color-accent-dim: #e0ad2c;
  --color-accent-deep: #c08f1c;

  /* --- Bronze: the readable stand-in for gold when text is needed --- */
  --color-bronze: #855c0e;     /* 5.5:1 ivory · 5.9:1 white · 5.0:1 tint */

  /* --- Brand reds (logo field, favicon gem) --- */
  --color-crimson: #b01722;    /* primary action */
  --color-crimson-dim: #8a1019;
  --color-ruby: #a3123a;
  --color-plum: #6b1230;

  /* --- Ink (WCAG-verified against --color-bg #fbf6ee) --- */
  --color-text: #2b0a14;        /* 16.9:1  AAA */
  --color-text-muted: #6b4a52;  /*  7.2:1  AAA */
  --color-text-faint: #8e7078;  /*  4.1:1  AA large / decorative only */
  --color-text-invert: #fffaf3; /* on crimson fills — 7.0:1 */

  /* --- Semantic (darkened so they read on paper) --- */
  --color-success: #1f7a4d;
  --color-warn: #9a6a08;
  --color-danger: #b3261e;

  /* --- Raised surfaces (was "glass"; on paper these are solid or near-solid,
     which is what stops a light theme looking like washed-out dark mode) --- */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-strong: rgba(255, 255, 255, 0.96);
  --glass-border: rgba(43, 10, 20, 0.12);
  --glass-border-hover: rgba(176, 23, 34, 0.42);
  --glass-blur: 12px;

  /* Foil bar: the gold hairline that tops raised surfaces. On paper it runs
     solid rather than fading out at the ends — a fade reads as a smudge. */
  --edge-light: linear-gradient(
    90deg,
    var(--color-accent-deep) 0%,
    var(--color-accent-hi) 38%,
    var(--color-accent) 62%,
    var(--color-accent-deep) 100%
  );

  /* --- Gradients --- */
  --grad-gold: linear-gradient(180deg, #ffd76a 0%, #f7c948 46%, #d9a629 100%);
  --grad-gold-text: linear-gradient(135deg, #6b1230 0%, #b01722 55%, #855c0e 100%);
  --grad-crimson: linear-gradient(135deg, #b01722 0%, #6b1230 100%);
  --grad-surface: linear-gradient(160deg, #ffffff 0%, #f7efe3 100%);
  --grad-rule: linear-gradient(90deg, transparent, var(--color-accent-deep), transparent);

  /* --- Glow / focus rings (soft warm haloes, not neon) --- */
  --glow-gold-sm: 0 0 0 1px rgba(192, 143, 28, 0.4), 0 2px 10px rgba(133, 92, 14, 0.14);
  --glow-gold-md: 0 0 0 1px rgba(192, 143, 28, 0.55), 0 8px 22px rgba(133, 92, 14, 0.2);
  --glow-gold-lg: 0 18px 50px rgba(133, 92, 14, 0.22);
  --glow-crimson: 0 10px 30px rgba(176, 23, 34, 0.26);

  /* --- Shadows: warm brown-grey. Neutral black on cream looks like dirt. --- */
  --shadow-sm: 0 1px 2px rgba(74, 32, 26, 0.08), 0 2px 6px rgba(74, 32, 26, 0.06);
  --shadow-md: 0 4px 10px rgba(74, 32, 26, 0.09), 0 12px 28px rgba(74, 32, 26, 0.1);
  --shadow-lg: 0 10px 24px rgba(74, 32, 26, 0.12), 0 28px 60px rgba(74, 32, 26, 0.14);

  /* --- Typography --- */
  --font-display: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.75rem;
  --fs-5xl: 3.25rem;

  --lh-tight: 1.15;
  --lh-snug: 1.32;
  --lh-normal: 1.65;

  /* --- Spacing --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;
  --sp-10: 7rem;

  /* --- Radii --- */
  --r-sm: 7px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Layout --- */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --header-h: 68px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 620ms;

  /* --- Z-index --- */
  --z-bg: 0;
  --z-base: 1;
  --z-sticky: 60;
  --z-header: 80;
  --z-drawer: 90;
  --z-skip: 100;
}

@media (min-width: 768px) {
  :root {
    --fs-4xl: 3.25rem;
    --fs-5xl: 4.25rem;
    --header-h: 76px;
  }
}

@media (min-width: 1200px) {
  :root {
    --fs-5xl: 4.75rem;
  }
}