:root {
  --main-color: #00828e;
  --main-color-light: rgba(0, 130, 142, 0.1);
  --main-color-medium: rgba(0, 130, 142, 0.2);
  --main-color-dark: #006a74;
  --main-color-bright: #0096c7;
  --header-height: 60px;
  --sidebar-width: 280px;
  --sidebar-font-color: #333333;
  --border-radius: 5px;
  --border-radius-text-box: 8px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --transition-speed: 0.3s;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --content-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  --background-color: #E7E7E8;
  --container-spacing: 15px;
  --content-padding: 16px;
  --content-bg: white;
  --sidebar-bg: #f8f9fa;
  --header-bg: #f8f9fa;
  --box-bg: #f8f9fa;
  --font-color: #00828e;
  --heading-font: 'Optima', 'Segoe UI', sans-serif;
  --body-font: 'Arial', sans-serif;
  --letter-spacing-large: 0.1rem;
  --letter-spacing-medium: 0.05rem;
  --box-shadow-sidebar: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
    --header-height: 60px;
    --spacing-md: 12px;
    --content-padding: 10px;
  }
}