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

  /* Tab corner masks */
  --mask-tab-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M8,0 L8,8 L0,8 A8,8 0 0,0 8,0 Z' fill='white'/%3E%3C/svg%3E");
  --mask-tab-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0,0 L0,8 L8,8 A8,8 0 0,1 0,0 Z' fill='white'/%3E%3C/svg%3E");

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

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

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

  /* ==========================================================================
     Backgrounds
     ========================================================================== */
  --background-nav: var(--stone-350);
  --background-body: var(--stone-125);
  --background-subnav: var(--stone-200);
  --background-subnav-contrast: var(--stone-225);
  --background-control: var(--stone-200);
  --background-section: var(--stone-150);
  --background-td: var(--stone-125);
  --background-medium-light: var(--stone-75);
  --background-light: var(--stone-50);

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

  /* ==========================================================================
     Sidebar
     ========================================================================== */
  --sidebar-width: 13rem;
  --sidebar-width-collapsed: 4.5rem;
  --background-sidebar: var(--stone-200);
  --background-sidebar-hover: var(--stone-225);
  --background-sidebar-active: var(--stone-250);

  /* ==========================================================================
     Buttons
     ========================================================================== */
  --button-primary-background: var(--link);
  --button-primary-color: var(--color-lighter);
  --button-secondary-background: var(--background-section);
  --button-secondary-color: var(--color-primary);
  --button-toolbar: var(--color-primary);

  /* ==========================================================================
     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-medium-dark: var(--stone-350);
  --border-dark: var(--stone-400);

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

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

  /* ==========================================================================
     Labels & Badges
     ========================================================================== */
  --label-gray: var(--background-control);
  --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(--color-primary);
  --icon-muted: var(--color-muted);
  --accent-link: var(--link);
  --icon-violet: var(--violet-700);
  --icon-violet-muted: var(--violet-600);
  --icon-yellow: var(--yellow-700);
  --add: var(--link);

  /* ==========================================================================
     Row Highlights
     ========================================================================== */
  --hl-gray: var(--background-control);
  --hl-blue: var(--blue-100);
  --hl-slate: var(--slate-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);

}

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

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

.past-due td { background: var(--yellow-50); }

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

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

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

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

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

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