:root {
  /* General */
  --white: #ffffff;
  --black: #000000;
  --charcoal: #2d2d2d;
  --transparent: transparent;
  /* New Palette */
  --soft-ivory: #EFE9E0;
  --tropical-teal: #0F9E99;
  --dark-teal: #0B7A76;
  --deep-teal: #085855;
  --light-teal: #4DB8B4;
  --coral-accent: #FF6B6B;
  /* Grayscale (can be kept for secondary elements) */
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  /* Base Semantic Colors */
  --primary: var(--tropical-teal);
  --primary-light: var(--light-teal);
  --primary-dark: var(--dark-teal);
  --secondary: var(--gray-600);
  --success: #10b981; /* Kept for semantic meaning */
  --info: #0ea5e9; /* Kept for semantic meaning */
  --warning: #f59e0b; /* Kept for semantic meaning */
  --danger: var(--coral-accent);
  --light: var(--gray-100);
  --dark: var(--deep-teal);
  /* Components */
  --text-color: var(--charcoal);
  --text-color-secondary: var(--gray-700);
  --text-color-muted: var(--gray-600);
  --link-color: var(--primary);
  --link-hover-color: var(--primary-dark);
  --border-color: var(--gray-300);
  --border-radius: 0.375rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 2rem;
  --border-radius-pill: 50rem;
  --body-bg: var(--soft-ivory);
  --body-color: var(--charcoal);
  --component-bg: var(--white);
  --component-hover-bg: var(--gray-100);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  /* External Auth Page Specific */
  --auth-gradient-start: var(--primary-light);
  --auth-gradient-end: var(--primary-dark);
  --auth-container-bg: rgba(255, 255, 255, 0.1);
  --auth-text-color: var(--white);
  /* Global accent border variables */
  --vb-accent-color: var(--primary);
  --vb-accent-border-width: 6px;
  /* Primary gradient colors (project-wide) */
  --vb-primary-start: var(--primary-light);
  --vb-primary-end: var(--primary);
  --vb-primary-rgb: 15, 158, 153; /* RGB for tropical-teal */
  --vb-primary-gradient: linear-gradient(135deg, var(--vb-primary-start), var(--vb-primary-end));
  --vb-primary-gradient-hover: linear-gradient(135deg, color-mix(in srgb, var(--vb-primary-start) 90%, var(--black)), color-mix(in srgb, var(--vb-primary-end) 90%, var(--black)));

  /* Bootstrap primary override */
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--vb-primary-rgb);

  /* Sidebar card typography variables */
  --sidebar-card-title-size: 1.125rem; /* between h5 and h6 */
  --sidebar-card-subtitle-size: 0.875rem;
}