:root {
   /* =========================================================
     BRAND - aqUAtrack WATER COLORS
  ========================================================= */
   --color-brand-primary: #0476D9;
   /* main aqua blue */
   --color-brand-accent: #00B8D9;
   /* bright water cyan */
   --color-brand-soft: #E6F4FF;
   /* light water background */

   --color-brand-secondary: #0456A3;
   /* deeper hover / active blue */
   --color-brand-support: #023E73;
   /* strong navy water blue */

   /* Optional RGB tokens for overlays / gradients */
   --color-brand-primary-rgb: 4, 118, 217;
   --color-brand-accent-rgb: 0, 184, 217;

   /* =========================================================
     SURFACES
  ========================================================= */
   --color-surface: #FFFFFF;
   --color-surface-soft: #F5FBFF;
   --color-surface-glass: rgba(255, 255, 255, 0.94);

   /* =========================================================
     TEXT
  ========================================================= */
   --color-text-primary: #102A43;
   --color-text-muted: #627D98;
   --color-text-inverse: #FFFFFF;
   --color-text-inverse-soft: rgba(255, 255, 255, 0.88);

   /* =========================================================
     BORDERS
  ========================================================= */
   --color-line: rgba(4, 118, 217, 0.12);
   --color-line-strong: rgba(4, 118, 217, 0.22);

   /* =========================================================
     STATE COLORS
  ========================================================= */
   --color-success: #0FB981;
   --color-warning: #F4B740;
   --color-danger: #E5484D;
   --color-info: #0476D9;

   /* =========================================================
     BREAKPOINT-AWARE LAYOUT
  ========================================================= */
   --layout-sidebar-width: 292px;
   --layout-topbar-height: 82px;
   --layout-auth-max-width: 1100px;
   --layout-container-padding: 24px;
   --layout-section-gap: 24px;

   /* =========================================================
     RESPONSIVE SPACING
  ========================================================= */
   --space-2xs: 4px;
   --space-xs: 8px;
   --space-sm: 12px;
   --space-md: 16px;
   --space-lg: 20px;
   --space-xl: 24px;
   --space-2xl: 32px;
   --space-3xl: 40px;
   --space-4xl: 48px;

   /* Fluid spacing for auth pages */
   --auth-padding-y: clamp(28px, 4vw, 48px);
   --auth-padding-x: clamp(20px, 3.5vw, 40px);
   --auth-page-padding: clamp(14px, 2vw, 24px);

   /* =========================================================
     EFFECTS
  ========================================================= */
   --shadow-soft: 0 18px 45px rgba(4, 86, 163, 0.12);
   --shadow-auth: 0 24px 70px rgba(4, 86, 163, 0.18);
   --shadow-panel: 0 18px 55px rgba(4, 86, 163, 0.12);
   --backdrop-blur: blur(12px);

   /* =========================================================
     RADIUS
  ========================================================= */
   --radius-sm: 10px;
   --radius-md: 14px;
   --radius-lg: 18px;
   --radius-xl: 22px;
   --radius-2xl: 28px;
   --radius-pill: 999px;

   /* =========================================================
     COMPONENT SIZES
  ========================================================= */
   --input-height: 54px;
   --button-height: 56px;
   --icon-size-md: 20px;

   /* =========================================================
     MOTION
  ========================================================= */
   --transition-fast: all 0.22s ease;
   --transition-base: all 0.25s ease;

   /* =========================================================
     FOCUS
  ========================================================= */
   --focus-ring-brand: 0 0 0 0.2rem rgba(4, 118, 217, 0.20);

   /* =========================================================
     TYPOGRAPHY
  ========================================================= */
   --font-family-base: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

   --font-size-xs: 12px;
   --font-size-sm: 14px;
   --font-size-md: 15px;
   --font-size-base: 16px;
   --font-size-lg: 18px;
   --font-size-xl: clamp(1.25rem, 2vw, 1.5rem);
   --font-size-2xl: clamp(1.5rem, 3vw, 2rem);

   --line-height-tight: 1.2;
   --line-height-base: 1.5;
   --line-height-relaxed: 1.7;
}

/* =========================================================
   LARGE TABLET / SMALL DESKTOP
========================================================= */
@media (max-width: 1199.98px) {
   :root {
      --layout-sidebar-width: 236px;
      --layout-topbar-height: 72px;
      --layout-auth-max-width: 960px;
      --layout-container-padding: 20px;
      --layout-section-gap: 20px;

      --space-xl: 20px;
      --space-2xl: 28px;
      --space-3xl: 36px;

      --radius-lg: 16px;
      --radius-xl: 20px;
      --radius-2xl: 22px;
   }
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
   :root {
      --layout-sidebar-width: 250px;
      --layout-topbar-height: 68px;
      --layout-auth-max-width: 100%;
      --layout-container-padding: 18px;
      --layout-section-gap: 18px;

      --input-height: 48px;
      --button-height: 50px;

      --font-size-base: 15px;
      --font-size-lg: 17px;
      --font-size-xl: 1.35rem;
      --font-size-2xl: 1.7rem;
   }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
   :root {
      --layout-sidebar-width: 100%;
      --layout-topbar-height: 64px;
      --layout-container-padding: 16px;
      --layout-section-gap: 16px;

      --auth-padding-y: 28px;
      --auth-padding-x: 20px;
      --auth-page-padding: 14px;

      --space-lg: 18px;
      --space-xl: 20px;
      --space-2xl: 24px;
      --space-3xl: 28px;

      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-xl: 18px;
      --radius-2xl: 20px;

      --input-height: 46px;
      --button-height: 48px;

      --font-size-sm: 13px;
      --font-size-md: 14px;
      --font-size-base: 15px;
      --font-size-lg: 16px;
      --font-size-xl: 1.2rem;
      --font-size-2xl: 1.5rem;
   }
}

/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
   :root {
      --layout-container-padding: 12px;
      --layout-section-gap: 14px;

      --auth-padding-y: 24px;
      --auth-padding-x: 16px;
      --auth-page-padding: 12px;

      --radius-md: 10px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-2xl: 18px;

      --input-height: 44px;
      --button-height: 46px;

      --font-size-xs: 11px;
      --font-size-sm: 12px;
      --font-size-md: 13px;
      --font-size-base: 14px;
      --font-size-lg: 15px;
      --font-size-xl: 1.1rem;
      --font-size-2xl: 1.35rem;
   }
}