@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Source+Sans+Pro:wght@400;600;700&display=swap');

/* ----------  GLOBAL DESIGN TOKENS ---------- */
:root {
  /* Fonts */
  --font-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-weight-regular: 500;
  --font-weight-bold: 700;

  /* Font Sizes */
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  /* Colors */
  --color-text: #111827;
  --color-heading: #0f172a;
  --color-muted: #6b7280;
  --color-bg: #ffffff;
  --color-bg-alt: #f9fafb;
}

/* ----------  BASE TYPOGRAPHY ---------- */
html, body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--font-weight-bold); color: var(--color-heading); }
h2 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--color-heading); }
h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--color-heading); }
p, label, input, textarea, button, a, span { 
  font-size: var(--text-base); 
  color: var(--color-text);
}
small { font-size: var(--text-sm); color: var(--color-muted); }