@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* Colors - Core Primary */
  --color-primary: #032217;
  --color-on-primary: #ffffff;
  --color-primary-container: #1a382b;
  --color-on-primary-container: #81a291;
  --color-primary-fixed: #c8ead7;
  --color-primary-fixed-dim: #adcebc;
  --color-on-primary-fixed: #022115;
  --color-on-primary-fixed-variant: #2f4d3f;
  
  /* Colors - Secondary */
  --color-secondary: #994703;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fc934f;
  --color-on-secondary-container: #6d3000;
  --color-secondary-fixed: #ffdbc9;
  --color-secondary-fixed-dim: #ffb68c;
  --color-on-secondary-fixed: #321200;
  --color-on-secondary-fixed-variant: #753400;

  /* Colors - Tertiary */
  --color-tertiary: #00212c;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #113744;
  --color-on-tertiary-container: #7da0b0;
  --color-tertiary-fixed: #c4e8f9;
  --color-tertiary-fixed-dim: #a8ccdc;
  --color-on-tertiary-fixed: #001f29;
  --color-on-tertiary-fixed-variant: #284b59;
  
  /* Colors - Surface & Neutral */
  --color-surface: #f5fbf6;
  --color-on-surface: #171d1a;
  --color-surface-dim: #d5dbd6;
  --color-surface-bright: #f5fbf6;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #eff5f0;
  --color-surface-container: #e9efea;
  --color-surface-container-high: #e4eae5;
  --color-surface-container-highest: #dee4df;
  --color-surface-variant: #dee4df;
  --color-on-surface-variant: #424844;
  --color-surface-tint: #466556;

  /* Colors - Inverses & Outlines */
  --color-inverse-surface: #2c322f;
  --color-inverse-on-surface: #ecf2ed;
  --color-inverse-primary: #adcebc;
  --color-outline: #727974;
  --color-outline-variant: #c1c8c2;

  /* Typography Tokens */
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Newsreader', Georgia, serif;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Layout Utilities */
:root {
  --container-max: 1280px;
  --page-gutter: 1.5rem;
}
@media (min-width: 1024px) {
  :root {
    --page-gutter: 3rem;
  }
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Material Symbols Rendering Definition */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}