/* =====================================================
   MSFG Calculator Suite — Base Styles
   Variables, reset, typography
   ===================================================== */

:root {
  /* Brand */
  --brand-primary:   #2d6a4f;
  --brand-secondary: #1b4332;
  --brand-accent:    #40916c;
  --brand-light:     #d8f3dc;

  /* Neutral */
  --color-dark:       #1a1a2e;
  --color-gray-900:   #2c3e50;
  --color-gray-700:   #495057;
  --color-gray-500:   #6c757d;
  --color-gray-300:   #ced4da;
  --color-gray-200:   #dee2e6;
  --color-gray-100:   #f1f3f5;
  --color-gray-50:    #f8f9fa;
  --color-white:      #ffffff;

  /* Status */
  --color-success:  #28a745;
  --color-warning:  #ffc107;
  --color-danger:   #dc3545;
  --color-info:     #17a2b8;

  /* Typography */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Poppins', 'Inter', sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', 'Courier New', monospace;

  /* Spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  1.5rem;
  --space-2xl: 2rem;

  /* Layout */
  --container-max:  1200px;
  --border-radius:  8px;
  --border-radius-lg: 12px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.12);
  --transition:  0.2s ease;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-gray-900);
  background: var(--color-gray-50);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-xs) 0;
  color: var(--color-dark);
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 var(--space-md) 0; }

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--brand-secondary); }

img { max-width: 100%; height: auto; }

/* Utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-center { text-align: center; }
.text-muted  { color: var(--color-gray-500); }
.text-sm     { font-size: 0.85rem; }