/* Desktop Styles */
:root {
  --accent-color: #e51953; /* Pink for CTAs and links */
  --light-blue: #f4f9fd; /* Polar blue for backgrounds */
  --light-green-blue: #e6f3f0; /* Light green-blue for cards */
  --hover-color: #0a2e1f; /* Darker green for hover states */
  
  /* Font settings */
  --font-geist-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heebo: 'Heebo', sans-serif;
  --font-ibm: 'IBM Plex Sans', sans-serif;
  --topNav-font-size: 16px;

  /* Layout dimensions */
  --header-logo-width: auto;
  --header-height: 80px;
  --footer-padding: 48px;
  --toc-width-mobile: 40px;

  /* Content area margins */
  --right-margin-content-area: 150px;
  --left-margin-content-area: 0px;
  --top-margin-content-area: 10px;
  --bottom-margin-content-area: 10px;

  /* Typography */
  --content-paragraph-size: 18px;

  /* Global CSS Variables */
  --topNav-height: 3rem;
  --header-logo-height: 3rem;
  --toc-width: 50px;
  --toc-font-size: 1rem;
  --toc-max-title-num-characters: 13;
  
  /* Brand Color Scheme */
  /* Primary Colors */
  --primary-color: #0c3a28; /* Dark green for titles */
  --primary-dark: #0a2e1f; /* Darker green for hover states */
  --primary-light: #e6f3f0; /* Light green-blue for cards */
  
  /* Accent Colors */
  --accent-primary: #e51953; /* Pink for CTAs and links */
  --accent-orange: #fe7e1f; /* Warm orange */
  --accent-orange-light: #ffbc48; /* Light orange */
  
  /* Blue Palette */
  --blue-primary: #535fd7; /* Main blue */
  --blue-dark: #212880; /* Dark blue */
  --blue-medium: #bde3fd;
  --blue-light: #5eccf4; /* Light blue */
  --blue-lighter: #93f4fe; /* Very light blue */
  --blue-accent: #2feafc; /* Bright blue accent */
  
  /* Teal Palette */
  --teal-primary: #5dbaee;
  --teal-light: #60def8;
  --teal-accent: #5ceffc;
  
  /* Background Colors */
  --bg-white: #ffffff;
  --bg-light: #f9f9f9;
  --bg-polar: #f4f9fd; /* Polar blue for backgrounds */
  --bg-dark: #182537;
  
  /* Border Colors */
  --border-color: #d1e7f5; /* Light blue for borders */
  
  /* Text Colors */
  --text-color: #39332f; /* Dark gray for text */
  
  /* Special Purpose Colors */
  --caveats-border-color: #0a2e1f;
  --caveats-background-color: #e8f3ca;

  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* ===================================================================
 * # Base Font Size Setup
 * Establishes the foundation for rem calculations site-wide
 * ------------------------------------------------------------------- */
html {
 font-size: 20px; /* Explicit base: 1rem = 20px */
}

/* Base styles */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-geist-sans);
}

/* Top Navigation */
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 50;
}

/* TOC Layout */
.flex.items-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.flex-grow {
  flex-grow: 1;
  margin-right: 1rem;
}

/* Link Styles */
a {
  color: inherit;
  text-decoration: underline;
  display: inline;
  width: auto;
}

/* Mobile Styles */
@media (max-width: var(--breakpoint-md)) {
  :root {
    /* Font sizes */
    --toc-font-size: 18px;
    --topNav-font-size: 14px;

    /* Layout dimensions */
    --header-logo-dim-multiplier: 0.7;
    --topNav-height: calc(var(--header-logo-height) * 0.3);

    /* Content area margins */
    --right-margin-content-area: 1rem;
    --left-margin-content-area: 1rem;
    --top-margin-content-area: 0.5rem;
    --bottom-margin-content-area: 0.5rem;

    /* Typography */
    --content-paragraph-size: 14px;
  }

  /* Mobile counterparts for desktop styles */
  body {
    /* Add mobile-specific body styles here if needed */
  }

  .fixed {
    /* Add mobile-specific .fixed styles here if needed */
  }

  .flex.items-center {
    /* Add mobile-specific .flex.items-center styles here if needed */
  }

  .flex-grow {
    /* Add mobile-specific .flex-grow styles here if needed */
  }

  a {
    /* Add mobile-specific a styles here if needed */
  }
}