:root {
  /* ==========================================
     SUOMEN PARHAAT NETTIKASINOT
     Premium Casino Affiliate Design
     Dark Blue + Gold Theme
     ========================================== */

  /* Primary Colors */
  --primary-blue: #1E3A5F;
  --primary-blue-light: #2A5298;
  --primary-blue-dark: #152942;
  --primary-blue-rgb: 30, 58, 95;

  /* Accent Gold */
  --accent-gold: #F5A623;
  --accent-gold-hover: #E09000;
  --accent-gold-light: #F8D56B;
  --accent-gold-dark: #D4920F;
  --accent-gold-rgb: 245, 166, 35;

  /* Backgrounds */
  --bg-white: #FFFFFF;
  --bg-light-gray: #F8F9FA;
  --bg-gray: #EEF1F5;
  --bg-card: #FFFFFF;
  --bg-dark: #1A1A2E;

  /* Text Colors */
  --text-dark: #1A1A2E;
  --text-gray: #6B7280;
  --text-light-gray: #9CA3AF;
  --text-white: #FFFFFF;

  /* Gradients */
  --hero-gradient: linear-gradient(135deg, #0F1F30 0%, #1E3A5F 100%);
  --hero-gradient-overlay: linear-gradient(135deg, rgba(15, 31, 48, 0.95) 0%, rgba(30, 58, 95, 0.9) 100%);
  --gold-gradient: linear-gradient(135deg, #F5A623 0%, #F8D56B 50%, #F5A623 100%);
  --gold-shine: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);
  --shadow-gold: 0 4px 15px rgba(245, 166, 35, 0.3);
  --shadow-gold-lg: 0 8px 25px rgba(245, 166, 35, 0.4);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* Typography */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes */
  --h1-size: clamp(2.5rem, 5vw, 4rem);
  --h2-size: clamp(1.75rem, 3vw, 2.25rem);
  --h3-size: 1.25rem;
  --h4-size: 1.125rem;
  --body-size: 1rem;
  --small-size: 0.875rem;
  --xs-size: 0.75rem;

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1400px;
  --header-height: 80px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius-pill: 25px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Z-index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
}

/* Responsive images */
img { max-width: 100%; height: auto; }