:root {
  /* Modern Neutral Palette */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F5F9;
  --color-border: #E2E8F0;
  
  /* Text */
  --color-text-primary: #0F172A;
  --color-text-secondary: #64748B;
  
  /* Brand Colors - Sleek SaaS Blue */
  --color-navy: #0F62FE;       /* Strong Blue */
  --color-navy-soft: #0043CE;  /* Darker Blue for hover */
  --color-brand-tint: #EDF5FF; /* Very light blue */
  --color-focus-ring: rgba(79, 70, 229, 0.25);

  /* Status Colors (Rich & Vibrant) */
  --color-status-approved: #10B981; /* Emerald */
  --color-status-submitted: #3B82F6; /* Blue */
  --color-status-pending: #94A3B8;   /* Slate */
  --color-status-changes: #F59E0B;   /* Amber */

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Sizing */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
}

h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.badge-outline,
time {
  font-family: var(--font-mono);
}