/* ============================================================
   Golden Play — Design tokens (CSS Custom Properties)
   ============================================================ */
:root {
  /* ---- Colors ---- */
  --color-bg-primary: #1B1B1F;   /* page bg, header, footer */
  --color-bg-dark: #131313;      /* dark cards / sections */
  --color-surface: #262727;      /* cards, panels, search field */
  --color-white: #FFFFFF;        /* primary light text */
  --color-text: #FFFFFF;         /* body text */
  --color-text-muted: #B7B7BE;   /* secondary text */
  --color-gold: #D1AA41;         /* headings / accents / CTA */
  --color-gold-strong: #E4BE55;  /* gold hover */
  --color-on-gold: #000000;      /* text on gold buttons */
  --color-green: #18AE62;        /* login / secondary CTA */
  --color-green-hover: #27AA5E;
  --color-neutral-btn: #313236;  /* "Read more" neutral button */
  --color-border: #303036;
  --color-danger: #D2323B;       /* 18+ badge bg */

  --gold-gradient: linear-gradient(180deg, #8E713A 0%, #282010 100%);
  --hero-overlay: linear-gradient(180deg, rgba(19,19,19,.55) 0%, rgba(19,19,19,.88) 100%);

  /* ---- Typography ---- */
  --font-main: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-head: "Montserrat", "Poppins", system-ui, Arial, sans-serif;

  --fs-body: 1rem;               /* 16px */
  --fs-small: 0.875rem;          /* 14px */
  --fs-h1: clamp(28px, 5vw, 43px);
  --fs-h1-logo: 24px;
  --fs-h2: clamp(17px, 2.4vw, 18px);
  --fs-h3: 16px;

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

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing / grid ---- */
  --space-section: clamp(40px, 6vw, 60px); /* between page sections */
  --space-card-gap: 26px;                  /* grid gap between cards */
  --space-paragraph: 20px;                 /* between paragraphs */
  --space-h2-text: 20px;                   /* H2 -> text */
  --space-h3-text: 16px;                   /* H3 -> text */
  --space-faq: 14px;                       /* between FAQ items */
  --card-padding: 24px;

  --container-max: 1920px;
  --container-pad: clamp(16px, 4vw, 59px);
  --content-max: 1180px;                   /* readable text column */
  --main-bottom: 72px;

  /* ---- Radius / borders ---- */
  --radius-card: 30px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --game-card-w: 150px;

  /* ---- Shadows ---- */
  --shadow-card: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-soft: 0 4px 18px rgba(0, 0, 0, .25);

  /* ---- Transitions ---- */
  --transition: 200ms ease;
  --transition-slow: 350ms ease;

  /* ---- Layout ---- */
  --header-h: 72px;
  --z-header: 1000;
  --z-totop: 900;
}