/* ===== MODULE: _variables.css ===== */
    /* ===== CSS VARIABLES ===== */
    :root{
      --sidebar-width: 360px;
      --header-h: 64px;
      --footer-h: 40px;
      --footer-h-mobile: 35px;
      --brand: #025b48; 
      --accent: #04604e; 
      --accent-light: #00e0e5; 
      
      
      /* Breakpoint system 3-viewport architecture */
      /* portrait <=767px | medium 768-1023px | landscape >=1024px */
      --bp-portrait: 767px;    /* max-width: mobile + tablet portrait */
      --bp-medium: 768px;      /* min-width: medium range start */
      --bp-landscape: 1024px;  /* min-width: landscape (desktop, tablet horizontal) */
      --square-ratio-min: 0.9; /* aspect-ratio lower square/fold devices */
      --square-ratio-max: 1.1; /* aspect-ratio upper square/fold devices */
      
      
      --safe-area-top: env(safe-area-inset-top, 0px);
      --safe-area-bottom: env(safe-area-inset-bottom, 0px);
      --safe-area-left: env(safe-area-inset-left, 0px);
      --safe-area-right: env(safe-area-inset-right, 0px);
      
      
      --z-header: 1000;
      --z-sidebar: 900;
      --z-banner: 999;
      --z-toc: 996;
      --z-content: 1;
      --z-content-elevated: 2;
      --z-sticky: 10;
      --z-sticky-under: 9;
      --z-sticky-high: 100;
      --z-mid: 99;
      --z-footer: 950;
      --z-support: 940;
      --z-loading: 10000;
      --z-overlay: 9999;
      --z-dropdown: 11000;
      --z-dropdown-menu: 12000;
      --space-xxs: 4px;
      --space-xs: 8px;
      --space-sm: 12px;
      --space-md: 16px;
      --space-lg: 20px;
      --space-xl: 24px;

      /* Layout anchors to avoid brittle calc chains */
      --mobile-update-top: calc(var(--header-h) + 50px);
      --mobile-viewing-top: calc(var(--header-h) + 100px);
      --mobile-viewing-logged-out-top: calc(var(--header-h) + 50px);
      --toc-mobile-top: calc(var(--header-h) + 7px);
      --toc-mobile-logged-in-top: calc(var(--header-h) + 47px);
      --tablet-mobile-update-top: calc(var(--header-h) + 27px);
      --tablet-search-result-top: calc(var(--header-h) + 165px);
      --tablet-mobile-viewing-top: calc(var(--header-h) + 102px);
      --agent-selection-mobile-top: calc(var(--header-h) + 89px);
      --filter-results-mobile-top: calc(var(--header-h) + 254px);
      --search-results-mobile-top: calc(var(--header-h) + 244px);
      --toc-showing-agent-selection-top: calc(var(--header-h) + 274px);
    }