/* TT-001-D: single source of brand tokens. Extracted verbatim from
   globals.css's top-level :root block. Imported by globals.css (so every
   existing consumer keeps the tokens with zero behavior change) and linked
   directly by pages that must not inherit globals.css's element rules
   (html font-size, a underline, body font-family) -- homepage, shop. */
: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;
}