:root {
   /* =========================================================
     BRAND - SCHOOL COLORS
  ========================================================= */
   --color-brand-primary: #4C60DA;
   /* main brand blue */
   --color-brand-accent: #AEB8F5;
   /* soft accent blue */
   --color-brand-soft: #EEF1FF;
   /* light blue background */

   --color-brand-secondary: #394CB8;
   /* deeper hover / active blue */
   --color-brand-support: #2C3A8C;
   /* strong support blue */

   /* Optional RGB tokens for overlays / gradients */
   --color-brand-primary-rgb: 76, 96, 218;
   --color-brand-accent-rgb: 174, 184, 245;

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

   /* =========================================================
     TEXT
  ========================================================= */
   --color-text-primary: #1F2758;
   --color-text-muted: #6B7398;
   --color-text-inverse: #FFFFFF;
   --color-text-inverse-soft: rgba(255, 255, 255, 0.88);

   /* =========================================================
     BORDERS
  ========================================================= */
   --color-line: rgba(76, 96, 218, 0.12);
   --color-line-strong: rgba(76, 96, 218, 0.22);

   /* =========================================================
     STATE COLORS
  ========================================================= */
   --color-success: #22A06B;
   --color-warning: #F4B740;
   --color-danger: #D64545;
   --color-info: #4C60DA;

   /* =========================================================
     BREAKPOINT-AWARE LAYOUT
  ========================================================= */
   --layout-sidebar-width: 236px;
   --layout-topbar-height: 76px;
   --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(34, 48, 130, 0.10);
   --shadow-auth: 0 20px 60px rgba(44, 58, 140, 0.18);
   --backdrop-blur: blur(8px);

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

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

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

   /* =========================================================
     FOCUS
  ========================================================= */
   --focus-ring-brand: 0 0 0 0.2rem rgba(76, 96, 218, 0.28);

   /* =========================================================
     TYPOGRAPHY
  ========================================================= */
   --font-family-base: "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;
   }
}