/* app/static/css/tokens.css */
:root {
  /* Backgrounds */
  --bg-page: #FAF7F2;
  --bg-card: #FFFFFF;
  --bg-sidebar: #2D2A26;
  --bg-sidebar-hover: #3D3A36;
  --bg-sidebar-active: #4D4A46;
  --bg-muted: #F5EDE3;
  --bg-table-header: #F9F5EF;
  --bg-expanded-row: #FDFBF8;

  /* Text */
  --text-primary: #2D2A26;
  --text-secondary: #8B7D6B;
  --text-muted: #9B8E7E;
  --text-sidebar: #C4B8A8;
  --text-sidebar-group: #6B5F50;
  --text-on-accent: #FFFFFF;
  --text-on-sidebar: #FAF7F2;

  /* Accent */
  --accent: #5B7B9A;
  --accent-light: #E4EDF4;
  --accent-hover: #4A6A87;

  /* Status */
  --success: #5B8C5A;
  --success-light: #E8F5E3;
  --danger: #C0392B;
  --danger-light: #FDE8E8;
  --warning: #D9A34A;
  --warning-light: #FEF3E2;

  /* Borders & Shadows */
  --border: #EDE6DB;
  --border-light: #F5EDE3;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.10);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 20px;

  /* Typography (+20%) */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-base: 20px;
  --font-sm: 17px;
  --font-xs: 14px;
  --font-table: 18px;
  --font-label: 14px;
  --font-h1: 34px;
  --font-h2: 26px;
  --font-h3: 20px;
  --font-metric: 34px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 14px;
  --space-lg: 20px;
  --space-xl: 28px;

  /* Layout */
  --sidebar-width: 220px;
}