:root {
  --fs-2xs:  9px;
  --fs-xs:   10px;
  --fs-sm:   11px;
  --fs-base: 12px;
  --fs-md:   13px;
  --fs-lg:   15px;
  --fs-xl:   18px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;

  --clr-primary:      #1a3550;
  --clr-primary-dark: #152d4a;
  --clr-primary-mid:  #2e6da4;
  --clr-accent:       #4d9de0;
  --clr-text:         #2c3e50;
  --clr-text-light:   #3a4a5c;
  --clr-muted:        #7a8694;
  --clr-border:       #e2e6ea;
  --clr-border-light: #f0f3f6;
  --clr-bg:           #f4f6f9;
  --clr-bg-tint:      #f0f4f8;
  --clr-bg-white:     #ffffff;
  --clr-bg-hover:     #f8f9fa;
  --clr-bg-active:    #edf3fa;
  --clr-error:        #c62828;
  --clr-error-bg:     #ffebee;
  --clr-error-border: #ef9a9a;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: var(--fs-base);
  color: var(--clr-text);
  background: #e8ecf0;
  min-height: 100vh;
}