:root {
  --color-primary: #4056F4;
  --color-success: #37c978;
  --color-danger: #f15b63;
  --color-warning: #FBFB4B;
  --color-bg: #F5F6FA;
  --color-surface: #ffffff;
  --color-border: #e7e8ec;
  --radius-sm: 8px;
  --radius-md: 14px;
  --shadow-sm: 0 10px 28px rgba(18, 21, 26, 0.06);
  --shadow-md: 0 16px 34px rgba(18, 21, 26, 0.12);

  --primary: #4056F4;
  --secondary: #2f3037;
  --success: #37c978;
  --danger: #f15b63;
  --warning: #FBFB4B;
  --bg-light: #F5F6FA;
  --bg-dark: #0B090A;
  --sidebar-bg: #0B090A;

  --accent-cyan:        #8AF3FF;
  --accent-cyan-soft:   rgba(138, 243, 255, 0.18);
  --accent-yellow:      #FBFB4B;
  --accent-yellow-soft: rgba(251, 251, 75, 0.22);

  --text-strong: #141517;
  --text-muted: #71747f;
  --line: #e7e8ec;
  --surface: #ffffff;
  --surface-muted: #f9fafb;
  --canvas-bg: #ececec;

  --white: #ffffff;
  --black: #000000;
  --nav-icon: #cbced8;
  --toggle-track: #e8eaee;
  --toggle-text: #555a66;
  --legend-text: #6c7281;
  --note-text-success: #89ad95;
  --badge-success-text: #2ca362;
  --badge-success-bg: #def8e9;
  --badge-danger-text: #c63f47;
  --badge-danger-bg: #ffdfe2;
  --badge-warning-text: #6B5E00;
  --badge-warning-bg: #FFFBC2;
  --progress-track: #e8ebf0;
  --cover-accent: #5b647a;
  --cover-dark: #23283d;
  --cover-light-a: #f8f8fb;
  --cover-light-b: #eaebef;
  --avatar-bg: #f5f6f8;
  --avatar-text: #555f73;
  --category-text: #4e5462;
  --footer-text: #7e8492;
  --table-income: #66dd9a;
  --table-expense: #ffa0a5;
  --input-placeholder: #9aa0ac;

  --radius: 14px;
  --radius-lg: 18px;
  --shadow: 0 10px 28px rgba(18, 21, 26, 0.06);
  --focus-ring: 0 0 0 3px rgba(64, 86, 244, 0.28);
  --control-height: 36px;
  --control-height-sm: 32px;
  --control-font-size: 13px;

  /* Fluid spacing: scales between 1080p and 2K viewports */
  --space-1: clamp(6px, 0.5vw + 6px, 10px);
  --space-2: clamp(12px, 1vw + 10px, 20px);
  --space-3: clamp(18px, 1.5vw + 12px, 28px);
  --space-4: clamp(24px, 2vw + 16px, 36px);
  --space-5: clamp(32px, 2.5vw + 20px, 48px);

  --app-padding: clamp(12px, 1.25vw + 8px, 24px);
  --dashboard-gap: clamp(12px, 1vw + 8px, 20px);
}