/* ==========================================================================
   DESIGN TOKENS & CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Color System */
  --primary: #193153;
  --primary-hover: #0f1f38;
  --primary-light: #e8edf4;
  --accent: #10b981;
  --accent-hover: #059669;
  --accent-light: #ecfdf5;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  
  /* Neutral Palette */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Semantic Colors */
  --bg: var(--gray-50);
  --surface: #fff;
  --border: var(--gray-200);
  --text: var(--gray-800);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  
  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  
  /* Design Properties */
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-lg: 0.75rem;
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --transition: 200ms ease;
  
  /* Layout Constants */
  --sidebar-width: 250px;
  --header-height: 60px;
  --topbar-height: 80px;
  --container-max-width: 1280px;

  /* Semantic Padding Tokens — capture intent, not raw values.
     Two grids coexist by design:
       - Self-contained chrome (sidebar) lives in its own column and uses
         tight padding for visual density.
       - Content-aligned chrome (topbar) shares horizontal padding with
         the main content frame so the title and table headers sit on the
         same vertical grid.
     Vertical rhythm is shared across all chrome surfaces. */
  --chrome-pad-y:      var(--space-4);   /* 16px — vertical breathing for any chrome strip */
  --chrome-pad-x-self: var(--space-3);   /* 12px — horizontal for self-contained chrome (sidebar) */
  --content-pad:       var(--space-8);   /* 32px — content frame and content-aligned chrome (topbar, main-content) */
}