body {background: var(--color-bg);}





:root {
  --color-primary: #0072FF;
  --color-primary-light: #EDF2FA;
  --color-primary-dark: #0045A3;
  --color-accent: #FF8A00;
  --color-accent-dark: #CC6D00;
  --color-bg: #F4F7FB;         
  --color-bg-tile: #FFFFFF;
  --color-bg-tile-muted: #EDF2FA;
  --color-text-main: #0F172A;  
  --color-text-secondary: #6B7280; 
  --color-text-muted: #9CA3AF;
  --color-link: #0060D0;
  --color-link-hover: #00439A;
  --color-border: #E5E7EB;
  --color-border-strong: #CBD5E1;
  --color-success: #10B981;
  --color-error: #EF4444;
  --color-warning: #F59E0B;
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-strong: 0 20px 45px rgba(15, 23, 42, 0.12);
  --radius-base: 10px;
  --radius-pill: 999px;
  --transition-fast: 0.2s ease-out;
}