:root {
  /* ==========================================================================
     Design System - Semantic Colors
     These reference the palette.css color definitions
     ========================================================================== */

  /* 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-500);

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

  /* ==========================================================================
     Backgrounds
     ========================================================================== */
  --background-body: var(--stone-300);
  --background-text: var(--stone-100);
  --background-lighter: var(--stone-50);
  --background-subtle: var(--stone-25);
  --background-panel: var(--stone-100);
  --background-control: var(--stone-150);
  --background-muted: var(--stone-200);

  /* ==========================================================================
     Navigation
     ========================================================================== */
  --background-nav: var(--stone-350);
  --color-nav: var(--stone-600);
  --background-nav-tab-active: var(--background-body);
  --background-subnav: var(--stone-200);
  --background-subnav-tab-active: var(--background-text);

  /* ==========================================================================
     Buttons
     ========================================================================== */
  --button-primary-background: var(--link);
  --button-primary-color: var(--stone-300);
  --button-secondary-background: var(--stone-300);
  --button-secondary-color: var(--stone-600);
  --button-toolbar: var(--stone-600);

  /* ==========================================================================
     Forms & Inputs
     ========================================================================== */
  --input-border: var(--stone-300);
  --input-background: var(--stone-50);
  --input-placeholder: var(--stone-400);

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

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

  /* ==========================================================================
     Status & Feedback
     ========================================================================== */
  --urgent: var(--orange-800);
  --warning: var(--orange-700);
  --success: var(--lime-700);
  --true: var(--lime-700);
  --false: var(--urgent);
  --error: var(--red-700);
  --error-background: var(--red-100);
  --error-border: var(--red-300);

  /* ==========================================================================
     Labels & Badges
     ========================================================================== */
  --label-gray: var(--stone-125);
  --label-green: var(--lime-100);
  --label-orange: var(--orange-100);
  --label-purple: var(--violet-100);
  --label-red: var(--red-100);
  --label-yellow: var(--yellow-100);

  /* ==========================================================================
     Icons
     ========================================================================== */
  --icon-default: var(--stone-500);
  --icon-muted: var(--stone-400);
  --icon-green: var(--lime-800);
  --icon-violet: var(--violet-700);
  --icon-yellow: var(--yellow-700);
  --icon-blue: var(--sky-800);
  --add: var(--icon-green);

  /* ==========================================================================
     Row Highlights
     ========================================================================== */
  --hl-blue: var(--blue-50);
  --hl-slate: var(--slate-100);
  --hl-gray: var(--stone-125);
  --hl-green: var(--lime-50);
  --hl-orange: var(--orange-50);
  --hl-violet: var(--violet-50);
  --hl-red: var(--red-50);
  --hl-yellow: var(--yellow-50);

  /* Custom muted colors */
  --slate-muted: oklch(0.968 0.004 247.9);
  --lime-muted: oklch(0.85 0.015 131);
  --violet-muted: oklch(0.85 0.015 293.5);
}

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

.hl-blue { background: var(--hl-blue) !important; }
.hl-slate { background: var(--slate-muted) !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;
}

/* ==========================================================================
   Utility Classes - Status
   ========================================================================== */

.true-bool {
  color: var(--true);
}

.false-bool {
  color: var(--false);
}

.delete-link {
  color: var(--warning);
}

.delete-link:hover {
  color: var(--warning);
}

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