/* Design Tokens - Typography */
:root {
  /* Font Family */
  --font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif;

  /* Font Sizes */
  --font-size-h1: 24px;
  --font-size-h2: 18px;
  --font-size-body: 14px;

  /* Line Heights */
  --line-height-tight: 120%;
  --line-height-normal: 150%;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* Colors */
  --color-brand-600: #0082B6;
  --color-brand-700: #009BD9;
  --color-success-600: #268700;
  --color-warning-600: #FFDA6F;
  --color-error-600: #FF4B4B;
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #EEF2F4;
  --color-neutral-100: #D6DDDF;
  --color-neutral-300: #B2BBBE;
  --color-neutral-500: #5A6366;
  --color-neutral-700: #323232;
  --color-text-primary: #5A6366;
  --color-text-secondary: #00AFF2;
  --color-border: #D6DDDF;
}

/* Global Typography Styles */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

h1 {
  font-family: var(--font-family);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

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

h3 {
  font-family: var(--font-family);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

p {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

label {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* Button text inherits body styles */
button {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
}

/* Section header styles */
.section-header-blue {
  background: #66B2FF;
  box-shadow: 0 4px 15px rgba(102, 178, 255, 0.2);
}

/* Input text inherits body styles */
input, textarea, select {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
}