/**
 * css/tokens.css
 * Design tokens (CSS Custom Properties) for Wild Casino
 */
:root {
  /* Colors */
  --color-bg-primary: #0b100c;
  --color-bg-dark: #151515;
  --color-accent-light: #31b83f;
  --color-white: #ffffff;
  --color-text-main: #b8b8b8;
  --color-heading-accent: #ffd21f;
  --color-text-on-btn: #151515;
  --gradient-cta: linear-gradient(180deg, #ffb72b 0%, #ff7a00 100%);
  --color-btn-secondary-border: #ffffff;
  --color-overlay-dark: rgba(11, 16, 12, 0.72);
  --color-danger: #e2333a;

  /* Typography */
  --font-family-base: 'Montserrat', Arial, sans-serif;
  --fs-base: clamp(14px, 1.2vw, 16px);
  --fs-small: clamp(12px, 1vw, 14px);
  --fs-h1: clamp(34px, 4.2vw, 46px);
  --fs-h2: clamp(26px, 3vw, 32px);
  --fs-h3: clamp(20px, 2.2vw, 24px);
  --line-height-base: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Spacing */
  --space-section: clamp(20px, 2.5vw, 30px);
  --gap-cards: 20px;
  --gap-paragraph: 20px;
  --gap-h2-text: 20px;
  --gap-h3-text: 16px;
  --gap-faq: 16px;
  --card-padding: 24px;

  /* Layout */
  --container-max: 1440px;
  --container-padding: clamp(16px, 4vw, 40px);
  --radius-card: 6px;
  --radius-btn: 6px;
  --border-card: none;

  /* Effects */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --transition-base: 0.25s ease;
  --header-height: 76px;
}

/* Collapses every var(--transition-base)-driven transition site-wide for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: 0.01ms;
  }
}