/* Design System: globals.css */
/* =============================== */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
:root {
  /* Core Palette */
  /* WHITE LILAC: Light shades */
  --color-white-lilac: #f6f7fc;
  /* MARINER: Light accent */
  --color-mariner:    #2057d6;
  /* GREEN PEA: Main brand color, only use on CTAs and social media icons nothing else */
  --color-green-pea:  #165733;
  /* TOREA BAY: Dark accent */
  --color-torea-bay:  #15388a;
  /* BLACK PEARL: Dark shades */
  --color-black-pearl: #071129;

  /* Semantic Colors */
  --color-bg-light:      var(--color-white-lilac);
  --color-bg-dark:       var(--color-black-pearl);
  --color-fg-base:       var(--color-black-pearl);
  --color-fg-inverse:    var(--color-white-lilac);
  --color-accent-primary:   var(--color-green-pea);
  --color-accent-secondary: var(--color-mariner);
  --color-accent-dark:      var(--color-torea-bay);

  /* Spacing Scale (4px base) */
  --space-1:  0.25rem; /* 4px */
  --space-2:  0.5rem;  /* 8px */
  --space-3:  0.75rem; /* 12px */
  --space-4:  1rem;    /* 16px */
  --space-5:  1.25rem; /* 20px */
  --space-6:  1.5rem;  /* 24px */
  --space-8:  2rem;    /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */

  /* Typography */
  --font-family-base:    'Open Sans', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --font-size-h1:    2.75rem; /* 44px */
  --font-size-h2:    2.25rem; /* 36px */
  --font-size-h3:    1.75rem; /* 28px */
  --font-size-h4:    1.5rem;  /* 24px */
  --font-size-h5:    1.25rem; /* 20px */
  --font-size-body:  1rem;    /* 16px */
  --font-size-small: 0.75rem; /* 12px */

  --line-height-heading: 1.25;
  --line-height-body:    1.5;

  /* Border Radius */
  --radius-1: 0.25rem; /* 4px */
  --radius-2: 0.5rem;  /* 8px */
  --radius-3: 0.75rem; /* 12px */
  --radius-4: 1rem;    /* 16px */

  /* Grid System */
  --grid-columns:       12;
  --grid-gutter-width:  var(--space-4);
  --container-max-width: 75rem; /* 1200px */
}
/* Acceptable color usage – do not use any other combinations: */
/* Background: #2057D6 (MARINER) / Foreground: #F6F7FC (WHITE LILAC) – 6:1 – CAN BE BETTER */
/* Background: #F6F7FC (WHITE LILAC) / Foreground: #2057D6 (MARINER) – 6:1 – CAN BE BETTER */
/* Background: #165733 (GREEN PEA) / Foreground: #F6F7FC (WHITE LILAC) – 8:1 – EXCELLENT! */
/* Background: #F6F7FC (WHITE LILAC) / Foreground: #165733 (GREEN PEA) – 8:1 – EXCELLENT! */
/* Background: #F6F7FC (WHITE LILAC) / Foreground: #15388A (TOREA BAY) – 10:1 – EXCELLENT! */
/* Background: #15388A (TOREA BAY) / Foreground: #F6F7FC (WHITE LILAC) – 10:1 – EXCELLENT! */
/* Background: #F6F7FC (WHITE LILAC) / Foreground: #071129 (BLACK PEARL) – 18:1 – EXCELLENT! */
/* Background: #071129 (BLACK PEARL) / Foreground: #F6F7FC (WHITE LILAC) – 18:1 – EXCELLENT! */

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-fg-base);
  background-color: var(--color-bg-light);
}

/* Typography Styles */
h1, .h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}
h2, .h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-3);
}
h3, .h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
}
h4, .h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
}
h5, .h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
}
p {
  margin-bottom: var(--space-4);
}
small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

/* Container & Grid */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-column-gap: var(--grid-gutter-width);
  grid-row-gap: var(--grid-gutter-width);
}
/* Column Spans */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Text Alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Border Radius Utilities */
.rounded-sm { border-radius: var(--radius-1); }
.rounded    { border-radius: var(--radius-2); }
.rounded-md { border-radius: var(--radius-3); }
.rounded-lg { border-radius: var(--radius-4); }