/* === CSS Custom Properties: Responsive Breakpoint Tokens === */
/* All responsive components reference these tokens via var().
   No !important, no side effects — pure variable declarations.

   Required by css-contract.js for CSS contract enforcement.
   All --rh-* and --z-* properties listed below are consumed by
   the CSS contract verification module. */

:root {
  /* --- Layout Widths --- */
  --responsive-max-width: 1200px;
  --responsive-content-padding: 16px;

  /* --- Breakpoints (px) --- */
  --bp-xs: 0px;
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;

  /* --- Responsive Height Tokens (--rh-*) --- */
  /* Consumed by css-contract.js for contract enforcement */
  --rh-toolbar-height: 48px;
  --rh-hamburger-hit-area: 44px;
  --rh-hamburger-icon-size: 24px;
  --rh-drawer-item-height: 48px;
  --rh-drawer-z-index: 2100;
  --rh-overlay-z-index: 2000;

  /* --- Hamburger Drawer --- */
  --hamburger-drawer-width: 280px;
  --hamburger-transition-duration: 300ms;
  --hamburger-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --hamburger-z-index: 1000;
  --hamburger-overlay-z-index: 999;
  --hamburger-button-z-index: 1001;

  /* --- More Overflow Menu --- */
  --more-overflow-menu-min-width: 180px;
  --more-overflow-transition-duration: 200ms;
  --more-overflow-z-index: 998;

  /* --- Focus Ring --- */
  --focus-ring-color: #4a90d9;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* --- Viewport Utility Classes --- */
  --responsive-utility-gap: 16px;

  /* --- Body Scroll Lock --- */
  --scroll-lock-original-overflow: visible;

  /* === Z-Index Layer System (consumed by css-contract.js) === */
  /* Invariants enforced by css-contract.js:
     I1: --z-dropdown (1000) >= 999
     I2: --z-toolbar (1900) > --z-sticky-header (50)
         Toolbar must be above any sticky page header (board toolbar, etc.)
         so dropdowns inside the toolbar paint above those elements.
         Keep toolbar strictly below --z-drawer-overlay (2000).
     I3: --z-drawer (2100) < --z-dropdown-menu (9999)
     I4: --z-modal (3100) > --z-drawer (2100)
     I5: --z-toast (4000) > --z-modal (3100)
     I6: --z-tooltip (5000) > --z-toast (4000) */
  --z-base: 0;
  --z-content: 1;
  --z-toolbar: 1900;
  --z-sticky-header: 50;
  --z-log-viewer: 55;
  --z-dropdown: 1000;
  --z-dropdown-menu: 9999;
  --z-drawer-overlay: 2000;
  --z-drawer: 2100;
  --z-modal-overlay: 3000;
  --z-modal: 3100;
  --z-toast: 4000;
  --z-tooltip: 5000;

  /* === Dark Mode Overrides (set by separate dark.css) === */
  --responsive-bg-color: #ffffff;
  --responsive-text-color: #1a1a1a;
  --responsive-border-color: #e0e0e0;
  --responsive-hover-bg: #f5f5f5;
  --responsive-overlay-bg: rgba(0, 0, 0, 0.5);
}

/* === High Contrast / Forced Colors Mode === */
@media (forced-colors: active) {
  :root {
    --focus-ring-color: ButtonText;
    --responsive-border-color: ButtonBorder;
    --responsive-overlay-bg: rgba(0, 0, 0, 0.3);
  }
}