/* tokens.css — design tokens as CSS Custom Properties (Раздел 2) */
:root {
    /* ---- Colour palette ---- */
    --color-bg-primary: #3b0047;   /* page background, header, footer */
    --color-bg-dark: #26002f;      /* deeper dark blocks, game sections */
    --color-accent-yellow: #ffd12a;/* badges, active chips, promo accents */
    --color-white: #ffffff;        /* light text on dark */
    --color-text: #c7b6d6;         /* body text, menu, captions */
    --color-heading: #ffd429;      /* H1/H2, bonus sums, decorative lines */
    --color-btn-text: #1b1020;     /* text inside yellow/gold buttons */
    --color-card: #4b0057;         /* game cards, category panels */
    --color-blue: #1798f5;         /* top Join Now, contrast CTA accents */
    --color-btn-border: #ffbf16;   /* secondary CTA border */
    --color-red: #d61f2b;          /* 18+ badge background */

    /* Gradients */
    --gradient-primary: linear-gradient(180deg, #ffe15a 0%, #ffb000 100%);

    /* ---- Typography ---- */
    --font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --fs-body: clamp(0.9375rem, 0.9rem + 0.3vw, 1rem);   /* 15–16px */
    --fs-small: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
    --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);       /* 36–48px */
    --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);  /* 26–34px */
    --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);     /* 20–24px */
    --lh-base: 1.6;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extra: 800;

    /* ---- Spacing & grid ---- */
    --space-section: clamp(2.5rem, 2rem + 2vw, 3.75rem); /* 40–60px */
    --space-grid-gap: 1.25rem;                            /* 20px */
    --space-paragraph: 1.25rem;                           /* 20px */
    --space-h2-text: 1.25rem;                             /* 20px */
    --space-h3-text: 1rem;                                /* 16px */
    --space-faq-gap: 0.875rem;                            /* 14px */
    --space-card-padding: 1.5rem;                         /* 24px */
    --container-max: 1440px;
    --radius-card: 6px;
    --radius-pill: 999px;

    /* ---- Effects ---- */
    --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.25);
    --transition-base: 0.25s ease;
    --header-height: 72px;
}