/* CSS Custom Properties */
:root {
  /* Colors */
  --color-primary: #0088cc;
  --color-accent-green: #6eb04f;
  --color-accent-red: #e01212;
  --color-text: #27292b;
  --color-text-light: #777;
  --color-bg: #ffffff;
  --color-bg-light: #f6f6f6;
  --color-border: #e5e5e5;
  --color-shadow: rgba(0, 0, 0, 0.1);

  /* Typography */
  --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-large: 18px;
  --font-size-h1: 36px;
  --font-size-h2: 30px;
  --font-size-h3: 24px;
  --line-height-base: 1.6;
  --line-height-heading: 1.3;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;

  /* Layout */
  --container-max-width: 1200px;
  --header-height: 80px;
  --border-radius: 8px;
  --transition-speed: 0.3s;

  /* Breakpoints (for reference in media queries) */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 980px;
}