:root {
  /*
   * Color System
   * Based on WCAG AA standards for accessibility
   */

  /* Primary colors */
  --color-primary: #FFD700; /* Darker yellow for better contrast - 更深的黄色 */
  --color-secondary: #2B8BAD; /* Darker blue for better contrast - 更深的蓝色 */
  --color-white: #FFFFFF;

  /* RGB format colors - for transparency adjustments */
  --color-primary-rgb: 255, 215, 0;
  --color-secondary-rgb: 43, 139, 173;
  --color-white-rgb: 255, 255, 255;

  /* Secondary colors */
  --color-tertiary: #A05C1B; /* Darker brown for better contrast - 更深的棕色 */
  --color-accent: #2D8534; /* Darker green for better contrast - 更深的绿色 */

  /* RGB format secondary colors */
  --color-tertiary-rgb: 160, 92, 27;
  --color-accent-rgb: 45, 133, 52;

  /* Text colors - Improved contrast ratios */
  --color-text-primary: #1A1A1A; /* Darker gray for better contrast */
  --color-text-secondary: #4D4D4D; /* Medium gray with improved contrast */
  --color-text-tertiary: #717171; /* Light gray meeting WCAG AA */

  /* Functional colors */
  --color-success: #2D8534; /* Same as accent for consistency */
  --color-warning: #D35400; /* Darker orange for better contrast */
  --color-border: #D1D1D1; /* Border color with sufficient contrast */

  /*
   * Typography System
   * Fonts, sizes and line heights
   */

  /* Font families */
  --font-heading: 'Baloo 2', 'Comic Neue', sans-serif; /* Heading font */
  --font-body: 'Nunito', 'Quicksand', sans-serif; /* Body text font */

  /* Font sizes - Headings */
  --font-size-h1: 32px; /* h1 size */
  --font-size-h2: 24px; /* h2 size */
  --font-size-h3: 20px; /* h3 size */
  --font-size-h4: 18px; /* h4 size */

  /* Font sizes - Body text */
  --font-size-regular: 16px; /* Regular text size */
  --font-size-small: 14px; /* Small text size */
  --font-size-tiny: 12px; /* Tiny text size */

  /* Font weights */
  --font-weight-regular: 400; /* Regular */
  --font-weight-semibold: 600; /* Semi-bold */
  --font-weight-bold: 700; /* Bold */

  /* Line heights */
  --line-height-heading: 1.2; /* Heading line height */
  --line-height-body: 1.5; /* Body text line height */

  /*
   * Spacing System
   * Spacing variables based on 4px base unit
   */

  /* Basic spacing */
  --space-xs: 4px; /* Extra small spacing */
  --space-sm: 8px; /* Small spacing */
  --space-md: 16px; /* Medium spacing */
  --space-lg: 24px; /* Large spacing */
  --space-xl: 32px; /* Extra large spacing */
  --space-xxl: 48px; /* Double extra large spacing */
  --space-xxxl: 64px; /* Triple extra large spacing */

  /* Border radius */
  --radius-sm: 8px; /* Small radius */
  --radius-md: 12px; /* Medium radius */
  --radius-lg: 20px; /* Large radius */
  --radius-circular: 50%; /* Circular radius */

  /*
   * Responsive breakpoints
   * For media queries
   */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 1023px;
}

/* Mobile responsive font size adjustments */
@media (max-width: 767px) {
  :root {
    --font-size-h1: 28px;
    --font-size-h2: 22px;
    --font-size-h3: 18px;
    --font-size-h4: 16px;
  }
}