:root {
  /* === Colors === */
  /* Brand & Primary */
  --color-primary: #2a3647;
  --color-primary-light: #29abe2;
  --color-accent-blue: #23a5e3;
  --color-mail: #007cee;
  --color-menu: #42526e;

  /* Neutral */
  --color-white: #ffffff;
  --color-background: #f6f7f8;
  --color-hover-background: #091931;
  --color-hover-background-light: #edf2fa;
  --color-border: #d1d1d1;
  --color-border-gray: #e5e7eb;
  --color-text-secondary: #cdcdcd;
  --color-text-gray: #6b7280;
  --color-text-primary: #000000;
  --color-hover-contact: #f0f0f0;

  /* Priority & Status */
  --color-priority-urgent: #ff3d00;
  --color-priority-medium: #ffa800;
  --color-priority-low: #7ae229;
  --color-error: #e60026;

  /* === Typography === */
  --font-family-base: "Inter", sans-serif;

  /* === Borders & Shadows === */
  --border-radius-small: 8px;
  --border-radius-medium: 10px;
  --border-radius-large: 20px;
  --border-radius-xl: 30px;
  --shadow-light: 0px 0px 4px rgba(0, 0, 0, 0.1);
  --shadow-light-plus: 0px 0px 4px rgba(0, 0, 0, 0.15);
  --shadow-light-plusplus: 0px 0px 4px rgba(0, 0, 0, 0.16);
  --shadow-medium: 0px 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0px 4px 8px rgba(0, 0, 0, 0.16);
  --shadow-overlay: 0px 4px 10px rgba(0, 0, 0, 0.3);
  --border-radius-round: 50%;

  /* === Layout === */
  --max-width-layout: 1440px;
  --width-sidebar: 260px;
  --height-topbar: 90px;
  --main-content-padding: 120px;

  /* === Responsive Spacing === */
  --spacing-mobile: 15px;
  --spacing-tablet: 15px;
  --spacing-desktop: 120px;
  --height-topbar-mobile: 80px;
  --height-sidebar-mobile: 80px;
}