/* ==========================================================================
   Golden Play — Design tokens (CSS Custom Properties)
   All colours, fonts, spacing, radii, shadows and transitions live here.
   ========================================================================== */

:root {
    /* --- Colours --- */
    --color-bg-primary: #1B1B1F;   /* page, header, footer */
    --color-bg-dark: #131313;      /* dark cards / sections */
    --color-surface: #262727;      /* cards, panels, search field */
    --color-surface-2: #313236;    /* neutral button (Read more) */
    --color-white: #FFFFFF;        /* light text on dark */
    --color-text: #FFFFFF;         /* body text */
    --color-text-muted: #B8B8BE;   /* secondary text */
    --color-heading: #D1AA41;      /* H1/H2, gold accents, branding */
    --color-gold: #D1AA41;         /* solid gold accent / CTA */
    --color-gold-dark: #8E713A;
    --color-on-gold: #000000;      /* text inside gold buttons */
    --color-green: #18AE62;        /* Login / secondary CTA */
    --color-green-hover: #27AA5E;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-danger: #C8332B;       /* 18+ badge background */

    /* Gradients */
    --gradient-gold: linear-gradient(180deg, #8E713A 0%, #282010 100%);
    --overlay-hero: linear-gradient(180deg, rgba(19, 19, 19, 0.55) 0%, rgba(19, 19, 19, 0.85) 100%);

    /* --- Typography --- */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Montserrat', 'Poppins', sans-serif;

    --fs-body: 1rem;               /* 16px */
    --fs-small: 0.875rem;          /* 14px */
    --fs-h1: clamp(1.75rem, 5vw, 2.6875rem);  /* up to 43px banner */
    --fs-h2: clamp(1.125rem, 2.4vw, 1.35rem); /* ~18-21.6px */
    --fs-h3: 1rem;                 /* 16px */
    --fs-logo: 1.5rem;             /* 24px */

    --lh-body: 1.35;
    --lh-heading: 1.2;
    --lh-banner: 1.05;

    /* --- Spacing --- */
    --space-section: clamp(2.5rem, 5vw, 3.75rem); /* 40-60px between sections */
    --space-card-gap: 1.625rem;    /* 26px grid gap */
    --space-paragraph: 1.25rem;    /* 20px between paragraphs */
    --space-h2-text: 1.25rem;      /* 20px H2 -> text */
    --space-h3-text: 1rem;         /* 16px H3 -> text */
    --space-faq: 0.875rem;         /* 14px between FAQ items */
    --space-card-padding: 1.5rem;  /* 24px card inner padding */

    /* --- Layout --- */
    --container-max: 1920px;
    --container-pad: clamp(1rem, 4vw, 3.6875rem); /* ~59px side padding */
    --main-bottom: 4.5rem;         /* 72px */
    --content-max: 1180px;         /* readable text column inside wide container */

    /* --- Radius --- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-card: 30px;           /* game cards strongly rounded */
    --radius-pill: 999px;

    /* --- Shadows --- */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.25);

    /* --- Transitions --- */
    --transition-fast: 0.18s ease;
    --transition-base: 0.28s ease;

    /* Header height for sticky offset */
    --header-h: 72px;
}