/* ==========================================================================
   22Casino — Design tokens (CSS Custom Properties)
   Section 2 of the spec: colors, typography, spacing, radii.
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --color-bg-primary: #14292b;      /* page bg, header, footer */
  --color-bg-dark: #0d1e21;         /* deep blocks, game sections */
  --color-accent-light: #8bd35a;    /* active buttons, badges, promo accents */
  --color-white: #f1f4f4;           /* main light text on dark bg */
  --gradient-accent: linear-gradient(180deg, #9be86a 0%, #4caf3f 100%); /* primary CTA */
  --color-btn-secondary-border: #4f6a68; /* secondary CTA border */
  --color-text-body: #a9b9b6;       /* body text, menu, descriptions */
  --color-heading-accent: #9be86a;  /* H2, decorative lines, active elements */
  --color-text-on-light-btn: #102013; /* text inside light green buttons */
  --color-card-bg: #1b3335;         /* game cards, panels, content blocks */
  --color-lime: #6fcb45;            /* register buttons, active tabs, categories */

  /* Semantic aliases */
  --color-danger: #e14545;
  --color-border-subtle: rgba(169, 185, 182, 0.18);
  --color-overlay-dark: rgba(13, 30, 33, 0.72);
  --color-focus-ring: #9be86a;

  /* ---- Typography ---- */
  --font-family-base: 'Montserrat', -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.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --font-size-h1: clamp(2.125rem, 1.6rem + 2.2vw, 2.875rem);      /* 34-46px */
  --font-size-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem);     /* 26-34px */
  --font-size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);         /* 20-24px */
  --font-size-badge: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);

  --line-height-body: 1.35;
  --line-height-hero: 1.0;
  --line-height-h2: 1.2;

  /* ---- Spacing ---- */
  --space-section-gap: clamp(3.5rem, 3rem + 2.5vw, 5.5rem); /* 56-88px — gap between body text and the next H2 */
  --space-card-gap: 1.625rem;      /* 26px */
  --space-paragraph-gap: 1.25rem;  /* 20px */
  --space-h2-to-text: 1.5rem;      /* 24px — gap between an H2 and the text that follows it */
  --space-h3-to-text: 1rem;        /* 16px */
  --space-faq-gap: 1rem;           /* 12-16px */
  --space-card-padding: 1.5rem;    /* 24px */
  --container-max-width: 1920px;
  --container-side-padding: clamp(1rem, 1.5vw + 0.5rem, 3.6875rem); /* ~59px */
  --main-bottom-padding: 4.5rem;   /* 72px */

  /* ---- Radii / shadows / transitions ---- */
  --radius-card: 1.875rem;   /* 30px — game cards */
  --radius-card-sm: 1rem;
  --radius-pill: 999px;
  --radius-input: 0.75rem;
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-header: 0 4px 18px rgba(0, 0, 0, 0.25);
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;

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

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}