/* Museo Sans Font Family */
@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/MuseoSans-300.woff2') format('woff2'),
       url('../fonts/MuseoSans-300.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/MuseoSans-500.woff2') format('woff2'),
       url('../fonts/MuseoSans-500.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/MuseoSans-700.woff2') format('woff2'),
       url('../fonts/MuseoSans-700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/MuseoSans-900.woff2') format('woff2'),
       url('../fonts/MuseoSans-900.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Apply Museo Sans globally */
html, body {
  font-family: 'Museo Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Museo Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
}

strong, b {
  font-weight: 500;
}


/* ============================================
   TYPOGRAPHY SYSTEM
   Centralized typography presets for consistency
   ============================================ */

:root {
  --color-teal: #477981;
  --color-teal-dark: #27454e;
  --tpcMain: var(--color-teal);
  --white: #ffffff;
  --black: #000000;

  --color-platinum: #e6e8e6;
  --color-red: #d45c5a;
  --color-bg-hover: #f0f0f0;

  --color-chip-default-text: #2C62EE;
  --color-chip-default-bg:   #F6F8FE;

  --color-chip-error-text: #CD0000;
  --color-chip-error-bg:   #FEEAEA;

  --color-chip-warning-text: #AA6A09;
  --color-chip-warning-bg:   #FFF8EE;

  --color-chip-success-text: #057A2D;
  --color-chip-success-bg:   #EAFEF0;

  --color-alert-success-bg:     #d4edda;
  --color-alert-success-border: #c3e6cb;
  --color-alert-success-text:   #155724;

  --color-alert-danger-bg:     #f8d7da;
  --color-alert-danger-border: #f5c6cb;
  --color-alert-danger-text:   #721c24;

  --color-cintillo-highlight:  #FFE845;

  /* Spacing Scale */
  --spacing-0: 0;           /* 0px  - No spacing */
  --spacing-1: 0.25rem;     /* 4px  - Minimal spacing (tight elements) */
  --spacing-2: 0.5rem;      /* 8px  - Small spacing (compact layouts) */
  --spacing-2-5: 0.625rem;  /* 10px - Between small and medium */
  --spacing-3: 0.75rem;     /* 12px - Medium-small spacing */
  --spacing-4: 1rem;        /* 16px - Medium spacing (default) */
  --spacing-5: 1.25rem;     /* 20px - Medium-large spacing (cards, sections) */
  --spacing-6: 1.5rem;      /* 24px - Large spacing (section padding) */
  --spacing-8: 2rem;        /* 32px - Extra large spacing */
  --spacing-10: 2.5rem;     /* 40px - XXL spacing (major sections) */
  --spacing-12: 3rem;       /* 48px - XXXL spacing */
  --spacing-16: 4rem;       /* 64px - Maximum spacing (page sections) */
  --spacing-20: 5rem;       /* 80px - Exceptional spacing */

  /* Font Family */
  --font-family-base: 'Museo Sans', sans-serif;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Typography Scale - Caption */
  --typography-caption-size: 0.75rem;      /* 12px */
  --typography-caption-line-height: 1.33;  /* 16px */
  --typography-caption-weight: var(--font-weight-regular);

  /* Typography Scale - Small */
  --typography-small-size: 0.875rem;       /* 14px */
  --typography-small-line-height: 1.43;    /* 20px */
  --typography-small-weight: var(--font-weight-regular);

  /* Typography Scale - Body */
  --typography-body-size: 1rem;            /* 16px */
  --typography-body-line-height: 1.5;      /* 24px */
  --typography-body-weight: var(--font-weight-regular);

  /* Typography Scale - Body Large */
  --typography-body-large-size: 1.125rem;  /* 18px */
  --typography-body-large-line-height: 1.56; /* 28px */
  --typography-body-large-weight: var(--font-weight-regular);

  /* Typography Scale - H4 */
  --typography-h4-size: 1.25rem;           /* 20px */
  --typography-h4-line-height: 1.4;        /* 28px */
  --typography-h4-weight: var(--font-weight-semibold);

  /* Typography Scale - H3 */
  --typography-h3-size: 1.5rem;            /* 24px */
  --typography-h3-line-height: 1.33;       /* 32px */
  --typography-h3-weight: var(--font-weight-semibold);

  /* Typography Scale - H2 */
  --typography-h2-size: 2rem;              /* 32px */
  --typography-h2-line-height: 1.25;       /* 40px */
  --typography-h2-weight: var(--font-weight-semibold);

  /* Typography Scale - Display */
  --typography-display-size: 2.5rem;       /* 40px */
  --typography-display-line-height: 1.2;   /* 48px */
  --typography-display-weight: var(--font-weight-bold);
}

.body-container {
  margin-top: 60px;
  padding-bottom: 40px;
}

.welcome-page li {
  list-style: none;
  padding: var(--spacing-1);
}

.logged-out-page iframe {
  display: none;
  width: 0;
  height: 0;
}

.grants-page .card {
  margin-top: 20px;
  border-bottom: 1px solid lightgray;
}

.grants-page .card .card-title {
  font-size: 120%;
  font-weight: bold;
}

.grants-page .card .card-title img {
  width: 100px;
  height: 100px;
}

.grants-page .card label {
  font-weight: bold;
}

/* Utility Classes */
.text-caption {
  font-family: var(--font-family-base);
  font-size: var(--typography-caption-size);
  line-height: var(--typography-caption-line-height);
  font-weight: var(--typography-caption-weight);
}

.text-small {
  font-family: var(--font-family-base);
  font-size: var(--typography-small-size);
  line-height: var(--typography-small-line-height);
  font-weight: var(--typography-small-weight);
}

.text-body {
  font-family: var(--font-family-base);
  font-size: var(--typography-body-size);
  line-height: var(--typography-body-line-height);
  font-weight: var(--typography-body-weight);
}

.text-body-large {
  font-family: var(--font-family-base);
  font-size: var(--typography-body-large-size);
  line-height: var(--typography-body-large-line-height);
  font-weight: var(--typography-body-large-weight);
}

.text-h4 {
  font-family: var(--font-family-base);
  font-size: var(--typography-h4-size);
  line-height: var(--typography-h4-line-height);
  font-weight: var(--typography-h4-weight);
}

.text-h3 {
  font-family: var(--font-family-base);
  font-size: var(--typography-h3-size);
  line-height: var(--typography-h3-line-height);
  font-weight: var(--typography-h3-weight);
}

.text-h2 {
  font-family: var(--font-family-base);
  font-size: var(--typography-h2-size);
  line-height: var(--typography-h2-line-height);
  font-weight: var(--typography-h2-weight);
}

.text-display {
  font-family: var(--font-family-base);
  font-size: var(--typography-display-size);
  line-height: var(--typography-display-line-height);
  font-weight: var(--typography-display-weight);
}

/* Weight utility classes */
.font-regular {
  font-weight: var(--font-weight-regular);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

body {
  font-family: var(--font-family-base);
  color: var(--black);
  font-weight: var(--font-weight-regular);
}

.navbar img.icon-banner {
  max-width: 335px;
}

.card {
  border: 1px solid var(--color-platinum);
  border-radius: var(--spacing-2-5);
}

input {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  border: 1px solid var(--color-platinum);
  border-radius: var(--spacing-2-5);
  padding: var(--spacing-2) var(--spacing-2-5);
}

a {
  color: var(--tpcMain);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
}

a:hover {
  color: var(--tpcMain);
}

.button-row {
  display: flex;
  gap: var(--spacing-2);
}

.btn {
  font-weight: var(--font-weight-bold);
  border-radius: var(--spacing-2-5);
  padding: var(--spacing-2) var(--spacing-2-5);
}

.btn-primary {
  border: none;
  color: var(--white);
  background-color: var(--tpcMain);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
}

.btn-secondary {
  border: 1px solid var(--black);
  color: var(--black);
  background-color: var(--white);
  
  border: 1px solid var(--black);
}

.btn-secondary:hover, .btn-secondary:focus {
  color: var(--black);
  background-color: var(--color-bg-hover);
}

.alert-danger {
  color: var(--color-alert-danger-text);
  background-color: var(--color-alert-danger-bg);
  border-color: var(--color-alert-danger-border);
}