:root {
  /* ==========================================================================
     Design System - Semantic Colors
     Using Tailwind Colors (stone for neutrals, lime for accent)
     ========================================================================== */

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* ==========================================================================
     Typography & Text
     ========================================================================== */
  --color-primary: var(--stone-600);
  --color-darker: var(--stone-800);
  --color-muted: var(--stone-400);
  --color-lighter: var(--stone-400);

  /* ==========================================================================
     Links
     ========================================================================== */
  --link: var(--lime-800);
  --link-hover: var(--violet-800);

  /* ==========================================================================
     Backgrounds
     ========================================================================== */
  --background-nav: var(--stone-200);
  --background-body: var(--stone-100);
  --background-control: var(--stone-150);
  --background-section: var(--stone-100);
  --background-light: var(--stone-50);

  /* ==========================================================================
     Navigation
     ========================================================================== */
  --color-nav: var(--color-primary);
  --background-nav-tab-active: var(--background-body);

  /* ==========================================================================
     Buttons
     ========================================================================== */
  --button-primary-background: var(--stone-100);
  --button-primary-color: var(--color-primary);
  --button-primary-border: var(--border-medium);
  --button-secondary-background: var(--background-body);
  --button-secondary-color: var(--color-primary);
  --button-secondary-border: var(--border-medium);

  /* ==========================================================================
     Forms & Inputs
     ========================================================================== */
  --input-border: var(--stone-500);
  --input-border-focus: var(--violet-700);
  --input-background: var(--stone-50);
  --input-placeholder: var(--stone-700);
  --input-disabled-background: var(--stone-200);
  --input-disabled-color: var(--stone-700);
  --checkbox-checked: var(--violet-800);
  --toggle-checked: var(--violet-800);

  /* ==========================================================================
     Borders & Dividers
     ========================================================================== */
  --border-light: var(--stone-200);
  --border-medium: var(--stone-300);
  --border-dark: var(--stone-700);

  /* ==========================================================================
     Selection & Active States
     ========================================================================== */
  --selected-background: var(--violet-100);
  --selected-color: var(--stone-600);
  --selected-border: var(--stone-300);

  /* ==========================================================================
     Status & Feedback
     ========================================================================== */
  --urgent: var(--orange-950);
  --warning: var(--orange-700);
  --success: var(--lime-900);
  --error: var(--orange-900);
  --error-background: var(--orange-200);

  /* ==========================================================================
     Financial
     ========================================================================== */
  --credit: var(--green-700);

  /* ==========================================================================
     Labels & Badges
     ========================================================================== */
  --label-gray: var(--background-control);
  --label-green: var(--lime-200);
  --label-orange: var(--orange-200);
  --label-purple: var(--lime-200);
  --label-red: var(--red-200);
  --label-yellow: var(--yellow-200);

  /* ==========================================================================
     Icons
     ========================================================================== */
  --icon-default: var(--color-primary);
  --icon-muted: var(--color-muted);
  --accent-link: var(--link);
  --icon-violet: var(--violet-700);
  --icon-yellow: var(--yellow-900);
  --add: var(--link);

  /* ==========================================================================
     Row Highlights
     ========================================================================== */
  --hl-gray: var(--background-control);
  --hl-blue: var(--blue-100);
  --hl-green: var(--lime-100);
  --hl-orange: var(--orange-100);
  --hl-violet: var(--violet-100);
  --hl-red: var(--red-100);
  --hl-yellow: var(--yellow-100);

  /* ==========================================================================
     Charts
     ========================================================================== */
  --chart-income: var(--lime-500);
  --chart-expense: var(--red-500);
  --chart-border: var(--stone-500);
  --chart-fill: var(--stone-300);
  --chart-1: var(--lime-500);
  --chart-2: var(--yellow-500);
  --chart-3: var(--blue-500);
  --chart-4: var(--orange-500);
  --chart-5: var(--red-500);
  --chart-6: var(--violet-500);
}

/* ==========================================================================
   Dark Mode Overrides
   Applied when .dark class is on body
   ========================================================================== */

.dark {
  /* Typography & Text */
  --color-primary: var(--stone-950);
  --color-darker: var(--stone-950);
  --color-muted: var(--stone-900);
  --color-lighter: var(--stone-700);

  /* Links */
  --link: var(--lime-900);
  --link-hover: var(--lime-800);

  /* Backgrounds */
  --background-nav: var(--stone-200);
  --background-body: var(--stone-50);
  --background-control: var(--stone-200);
  --background-section: var(--stone-100);
  --background-light: var(--stone-100);

  /* Forms & Inputs */
  --input-border: var(--stone-600);
  --input-border-focus: var(--lime-600);
  --input-background: var(--stone-100);
  --input-placeholder: var(--stone-800);
  --input-disabled-background: var(--stone-200);
  --input-disabled-color: var(--stone-800);
  --checkbox-checked: var(--lime-800);
  --toggle-checked: var(--lime-800);

  /* Borders */
  --border-light: var(--stone-300);
  --border-medium: var(--stone-500);
  --border-dark: var(--stone-700);

  /* Status */
  --error-background: var(--orange-300);

  /* Financial */
  --credit: var(--green-700);

  /* Labels */
  --label-gray: var(--stone-300);
  --label-green: var(--lime-300);
  --label-orange: var(--orange-300);
  --label-purple: var(--lime-300);
  --label-red: var(--red-300);
  --label-yellow: var(--yellow-300);

  /* Row Highlights */
  --hl-gray: var(--stone-300);
  --hl-blue: var(--blue-200);
  --hl-green: var(--lime-200);
  --hl-orange: var(--orange-200);
  --hl-violet: var(--lime-200);
  --hl-red: var(--red-200);
  --hl-yellow: var(--yellow-200);

  /* Charts */
  --chart-income: var(--lime-800);
  --chart-expense: var(--red-800);
  --chart-border: var(--stone-600);
  --chart-fill: var(--stone-400);
}

/* ==========================================================================
   Utility Classes - Highlights
   ========================================================================== */

.hl-blue { background: var(--hl-blue) !important; }
.hl-gray { background: var(--hl-gray) !important; }
.hl-green { background: var(--hl-green) !important; }
.hl-orange { background: var(--hl-orange) !important; }
.hl-violet { background: var(--hl-violet) !important; }
.hl-purple { background: var(--hl-violet) !important; }
.hl-red { background: var(--hl-red) !important; }
.hl-yellow { background: var(--hl-yellow) !important; }

/* ==========================================================================
   Utility Classes - Text
   ========================================================================== */

.text-muted {
  color: var(--color-muted) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-danger {
  color: var(--error) !important;
}

/* ==========================================================================
   Utility Classes - Financial
   ========================================================================== */

.credit {
  color: var(--credit) !important;
}

.text-negative {
  color: var(--error) !important;
}