/* ==========================================================================
   Bizzo Casino — Design Tokens
   All colors, typography, spacing, radii, shadows and transitions used
   across the site live here as CSS Custom Properties. Never hard-code a
   design value anywhere else — reference a token instead.
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --color-bg-primary: #210728;      /* page background, header, footer */
  --color-bg-dark: #17051d;         /* deep dark blocks, game sections */
  --color-accent-light: #ffd329;    /* badges, active chips, accents */
  --color-white: #f1f4f4;           /* light text on dark background */
  --color-btn-secondary-border: #c18a2e; /* Login, See more, Learn more */
  --color-text-body: #b9a9c4;       /* body copy, menus, descriptions */
  --color-heading-gold: #ffd429;    /* H2, decorative lines, accents */
  --color-btn-text-dark: #102013;   /* text inside light buttons */
  --color-card-bg: #2b0d36;         /* game cards, panels, content blocks */
  --color-accent-neon: #22d943;     /* Register buttons, bright CTAs */

  --gradient-btn-primary: linear-gradient(180deg, #8cff4b 0%, #19c93f 100%);

  --color-success: var(--color-accent-neon);
  --color-danger: #ff4b4b;
  --color-border-subtle: rgba(241, 244, 244, 0.12);

  /* ---- Typography ---- */
  --font-family-base: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-body: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);       /* 14–16px */
  --font-size-small: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --font-size-h1: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);          /* 36–48px */
  --font-size-h2: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);       /* 26–34px */
  --font-size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);        /* 20–24px */

  --line-height-base: 1.6;

  /* ---- Spacing ---- */
  --space-section: clamp(2.5rem, 2rem + 2vw, 3.75rem);   /* 40–60px between sections */
  --space-card-gap: 1.25rem;      /* 20px */
  --space-paragraph: 1.25rem;     /* 20px */
  --space-h2-text: 1.25rem;       /* 20px */
  --space-h3-text: 1rem;          /* 16px */
  --space-faq-gap: 1rem;          /* 12–16px */
  --space-card-padding: 1.5rem;   /* 24px */

  /* ---- Layout ---- */
  --container-max-width: 1440px;
  --container-padding-inline: clamp(1rem, 3vw, 2.5rem);

  /* ---- Radius / borders / shadows ---- */
  --radius-card: 6px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.35);
  --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.4);

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ---- Z-index scale ---- */
  --z-header: 1000;
  --z-burger-menu: 1100;
  --z-to-top: 900;
  --z-toc: 10;
}