/* 1. Import Roboto with the exact weights used in the Compose app (400 Normal, 600 SemiBold, 700 Bold) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap');

/* 2. Map Compose Typography to MkDocs HTML Elements */

/* bodyLarge -> Standard Paragraphs */
.md-typeset p, .md-typeset li {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  font-weight: 400;
}

/* displayLargeEmphasized -> Main Page Titles (#) */
.md-typeset h1 {
  font-size: 57px;
  line-height: 64px;
  letter-spacing: -0.25px;
  font-weight: 700;
}

/* headlineMediumEmphasized -> Section Headers (##) */
.md-typeset h2 {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 0px;
  font-weight: 600;
}

/* titleLargeEmphasized -> Sub-section Headers (###) */
.md-typeset h3 {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0px;
  font-weight: 600;
}

/* labelLargeEmphasized -> Call to Action Buttons */
.md-typeset .md-button {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-weight: 600;
}

/* LIGHT MODE (Default) */
:root > * {
  /* Base primary colors (Header, active links) */
  --md-primary-fg-color:          #006B5E; /* primaryLight */
  --md-primary-bg-color:          #FFFFFF; /* onPrimaryLight (Text on header) */
  --md-primary-fg-color--light:   #9FF2E1; /* primaryContainerLight */
  --md-primary-fg-color--dark:    #005046; /* onPrimaryContainerLight */

  /* Accent colors (Buttons, links) */
  --md-accent-fg-color:           #446279; /* tertiaryLight */
  --md-accent-bg-color:           #FFFFFF; /* onTertiaryLight */

  /* Main background and text */
  --md-default-bg-color:          #F4FBF8; /* backgroundLight */
  --md-default-fg-color:          #171D1B; /* onBackgroundLight */

  /* Secondary text, borders, and dividers */
  --md-default-fg-color--light:   #3F4946; /* onSurfaceVariantLight */
  --md-default-fg-color--lighter: #6F7976; /* outlineLight */
  --md-default-fg-color--lightest:#BEC9C5; /* outlineVariantLight */

  /* Footer */
  --md-footer-bg-color:           #2B3230; /* inverseSurfaceLight */
  --md-footer-bg-color--dark:     #171D1B; /* onBackgroundLight (Darker contrast) */
  --md-footer-fg-color:           #ECF2EF; /* inverseOnSurfaceLight */
  --md-footer-fg-color--light:    #BEC9C5; /* outlineVariantLight */
}

/* DARK MODE (Slate) */
[data-md-color-scheme="slate"] {
  /* Aligns any auto-calculated MkDocs elements to your Brand Teal hue (~173 degrees) */
  --md-hue: 173;

  /* Base primary colors */
  /* Using Container for the header maintains the dark aesthetic while staying on-brand */
  --md-primary-fg-color:          #005046; /* primaryContainerDark */
  --md-primary-bg-color:          #9FF2E1; /* onPrimaryContainerDark (Text on header) */
  --md-primary-fg-color--light:   #83D5C5; /* primaryDark */
  --md-primary-fg-color--dark:    #003730; /* onPrimaryDark */

  /* Accent colors */
  --md-accent-fg-color:           #ACCAE5; /* tertiaryDark */
  --md-accent-bg-color:           #133348; /* onTertiaryDark */

  /* Main background and text */
  --md-default-bg-color:          #0E1513; /* backgroundDark */
  --md-default-fg-color:          #DEE4E1; /* onBackgroundDark */

  /* Secondary text, borders, and dividers */
  --md-default-fg-color--light:   #BEC9C5; /* onSurfaceVariantDark */
  --md-default-fg-color--lighter: #899390; /* outlineDark */
  --md-default-fg-color--lightest:#3F4946; /* outlineVariantDark */

  /* Footer */
  --md-footer-bg-color:           #1B211F; /* surfaceContainerDark */
  --md-footer-bg-color--dark:     #090F0E; /* surfaceContainerLowestDark */
  --md-footer-fg-color:           #DEE4E1; /* onSurfaceDark */
  --md-footer-fg-color--light:    #899390; /* outlineDark */
}