/* CSS Variables */
:root {
  /* Colors */
  --eump-primary: #0073aa;
  --eump-primary-hover: #005a8c;
  --eump-secondary: #666666;
  --eump-success: #155724;
  --eump-danger: #dc3545;
  --eump-warning: #e6a23c;
  --eump-info: #0c5460;

  /* Background Colors */
  --eump-background: #ffffff;
  --eump-background-light: #f8f9fa;
  --eump-background-dark: #333333;

  /* Text Colors */
  --eump-text: #333333;
  --eump-text-light: #666666;
  --eump-text-lighter: #888888;
  --eump-text-white: #ffffff;

  /* Border Colors */
  --eump-border: #dddddd;
  --eump-border-light: #eeeeee;

  /* Typography */
  --eump-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --eump-font-size-base: 16px;
  --eump-font-size-sm: 14px;
  --eump-font-size-lg: 18px;
  --eump-font-size-xl: 24px;
  --eump-line-height: 1.5;

  /* Spacing */
  --eump-spacing-xs: 5px;
  --eump-spacing-sm: 10px;
  --eump-spacing-md: 15px;
  --eump-spacing-lg: 20px;
  --eump-spacing-xl: 30px;
  --eump-spacing-xxl: 40px;

  /* Layout */
  --eump-container-max-width: 1200px;
  --eump-sidebar-width: 250px;
  --eump-content-width: 800px;

  /* Border Radius */
  --eump-border-radius: 4px;
  --eump-border-radius-lg: 8px;

  /* Box Shadow */
  --eump-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --eump-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --eump-transition: all 0.3s ease;

  /* Z-index */
  --eump-z-index-modal: 1000;
  --eump-z-index-dropdown: 100;
  --eump-z-index-sticky: 50;

  /* Breakpoints */
  --eump-breakpoint-sm: 480px;
  --eump-breakpoint-md: 768px;
  --eump-breakpoint-lg: 992px;
  --eump-breakpoint-xl: 1200px;

  /* Form Elements */
  --eump-input-height: 44px;
  --eump-input-padding: 12px;
  --eump-input-border: 1px solid var(--eump-border);
  --eump-input-focus-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}