/*
  Golden Play — Design Tokens
  Alle Design-Variablen (Farben, Typografie, Abstände, Radien, Schatten, Übergänge)
*/
:root {
  /* ---------- Farben ---------- */
  --color-bg-primary: #1B1B1F;
  --color-bg-dark: #131313;
  --color-surface: #262727;
  --color-white: #FFFFFF;
  --color-text: #FFFFFF;
  --color-heading: #D1AA41;

  --color-accent: #D1AA41;
  --color-accent-gradient: linear-gradient(180deg, #8E713A 0%, #282010 100%);
  --color-accent-text: #000000;

  --color-secondary: #18AE62;
  --color-secondary-hover: #27AA5E;
  --color-secondary-text: #FFFFFF;

  --color-neutral-btn: #313236;

  --color-border: rgba(209, 170, 65, 0.25);
  --color-overlay: rgba(10, 10, 10, 0.55);

  /* ---------- Typografie ---------- */
  --font-primary: 'Poppins', Arial, sans-serif;
  --font-heading: 'Montserrat', Arial, sans-serif;

  --fs-base: 16px;
  --fs-h1: clamp(28px, 5vw, 43px);
  --fs-logo: 24px;
  --fs-h2: 18px;
  --fs-h3: 16px;
  --fs-small: 14px;

  --lh-base: 1.35;
  --lh-banner: 1.0;
  --lh-h2: 1.2;

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

  /* ---------- Abstände ---------- */
  --space-section: clamp(40px, 6vw, 60px);
  --space-card-gap: 26px;
  --space-paragraph: 20px;
  --space-h2-text: 20px;
  --space-h3-text: 16px;
  --space-faq-gap: 14px;
  --space-card-padding: 24px;

  --container-max: 1920px;
  --container-padding: clamp(16px, 4vw, 59px);
  --main-bottom-space: 72px;

  /* ---------- Radien ---------- */
  --radius-card: 30px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* ---------- Schatten ---------- */
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.4);

  /* ---------- Übergänge ---------- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* ---------- Z-Index ---------- */
  --z-header: 100;
  --z-menu: 200;
  --z-modal: 300;
  --z-totop: 90;
}