:root {
  /* ===== TYPOGRAPHY ===== */
  /* Font sizes */
  --font-size-xs: 9px;
  --font-size-sm: 10px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 22px;
  --font-size-4xl: 24px;
  --font-size-5xl: 26px;
  --font-size-6xl: 28px;
  --font-size-7xl: 32px;
  --font-size-8xl: 48px;

  /* Line heights */
  --line-height-tight: 1.3;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.9;

  /* Letter spacing */
  --letter-spacing-tight: 0.5px;
  --letter-spacing-normal: 1px;
  --letter-spacing-wide: 3px;

  /* ===== SPACING ===== */
  /* Padding */
  --padding-xs: 5px 10px;
  --padding-sm: 12px 24px;
  --padding-md: 14px 35px;
  --padding-lg: 15px 10px;
  --padding-xl: 20px;
  --padding-2xl: 25px;
  --padding-3xl: 25px 15px;
  --padding-4xl: 25px 30px;
  --padding-5xl: 30px 20px;
  --padding-6xl: 35px 40px;
  --padding-7xl: 50px 40px;
  --padding-button: 14px 40px;
  --padding-button-sm: 12px 30px;
  --padding-cell: 25px 15px;

  /* Margins */
  --margin-xs: 10px;
  --margin-sm: 12px;
  --margin-md: 15px;
  --margin-lg: 18px;
  --margin-xl: 20px;
  --margin-2xl: 25px;
  --margin-3xl: 30px;
  --margin-4xl: 35px;
  --margin-5xl: 40px;
  --margin-6xl: 50px;
  --margin-7xl: 80px;

  /* Gaps */
  --gap-xs: 8px;
  --gap-sm: 10px;
  --gap-md: 12px;
  --gap-lg: 15px;
  --gap-xl: 25px;

  /* ===== BORDERS ===== */
  /* Border radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;

  /* ===== COLORS ===== */
  /* Primary colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gold: #ffd700;

  /* Text colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: #e8e8e8;
  --color-text-tertiary: #e0e0e0;
  --color-text-muted: #888;

  /* Brand colors */
  --color-bronze-light: #9d7e57;
  --color-bronze-dark: #7d5e37;

  /* Accent colors */
  --color-blue: #4a90e2;
  --color-blue-hover: #6ba8e5;
  --color-blue-dark: #357abd;
  --color-blue-darker: #2868a8;

  /* Background colors */
  --color-bg-dark-1: rgba(30, 25, 20, 0.95);
  --color-bg-dark-2: rgba(20, 15, 10, 0.95);
  --color-bg-dark-3: rgba(30, 25, 20, 0.98);
  --color-bg-dark-4: rgba(20, 15, 10, 0.98);
  --color-bg-overlay: rgba(0, 0, 0, 0.4);
  --color-bg-black-95: rgba(0, 0, 0, 0.95);
  --color-bg-black-98: rgba(0, 0, 0, 0.98);

  /* Payment method colors */
  --color-mastercard-start: #eb001b;
  --color-mastercard-end: #f79e1b;
  --color-maestro-start: #0099df;
  --color-maestro-end: #0077b5;
  --color-paypal-start: #003087;
  --color-paypal-end: #009cde;
  --color-visa-start: #1a1f71;
  --color-visa-end: #0e47a1;

  /* Button colors */
  --color-button-bg-start: #ffffff;
  --color-button-bg-end: #e8e8e8;
  --color-button-hover-start: #f8f8f8;
  --color-button-hover-end: #ffffff;
  --color-button-text: #000000;

  /* ===== GRADIENTS ===== */
  --gradient-bronze: linear-gradient(180deg, var(--color-bronze-light) 0%, var(--color-bronze-dark) 100%);
  --gradient-blue: linear-gradient(180deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
  --gradient-blue-hover: linear-gradient(180deg, var(--color-blue-dark) 0%, var(--color-blue-darker) 100%);
  --gradient-button: linear-gradient(180deg, var(--color-button-bg-start) 0%, var(--color-button-bg-end) 100%);
  --gradient-button-hover: linear-gradient(180deg, var(--color-button-hover-start) 0%, var(--color-button-hover-end) 100%);
  --gradient-content-bg: linear-gradient(180deg, var(--color-bg-dark-1) 0%, var(--color-bg-dark-2) 100%);
  --gradient-disclaimer-bg: linear-gradient(180deg, var(--color-bg-dark-3) 0%, var(--color-bg-dark-4) 100%);
  --gradient-mastercard: linear-gradient(135deg, var(--color-mastercard-start) 0%, var(--color-mastercard-end) 100%);
  --gradient-maestro: linear-gradient(135deg, var(--color-maestro-start) 0%, var(--color-maestro-end) 100%);
  --gradient-paypal: linear-gradient(135deg, var(--color-paypal-start) 0%, var(--color-paypal-end) 100%);
  --gradient-visa: linear-gradient(135deg, var(--color-visa-start) 0%, var(--color-visa-end) 100%);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
/* Mobile-first approach */
/* Use these in media queries:
  @media (max-width: 768px) { ... }
*/