:root {
   /* =========================================================
     BRAND - MODERN PALETTE
  ========================================================= */
   --color-brand-primary: #4F46E5;
   /* modern indigo */
   --color-brand-accent: #06B6D4;
   /* cyan */
   --color-brand-soft: #EEF2FF;
   /* soft indigo tint */
   --color-brand-support: #10B981;
   /* emerald */
   --color-brand-secondary: #0F172A;
   /* deep slate */

   /* Optional RGB tokens for overlays / gradients */
   --color-brand-primary-rgb: 79, 70, 229;
   --color-brand-accent-rgb: 6, 182, 212;

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

   /* =========================================================
     TEXT
  ========================================================= */
   --color-text-primary: #0F172A;
   --color-text-muted: #64748B;
   --color-text-inverse: #FFFFFF;
   --color-text-inverse-soft: rgba(255, 255, 255, 0.88);

   /* =========================================================
     BORDERS
  ========================================================= */
   --color-line: rgba(79, 70, 229, 0.10);
   --color-line-strong: rgba(79, 70, 229, 0.18);

   /* =========================================================
     STATE COLORS
  ========================================================= */
   --color-success: #10B981;
   --color-warning: #F59E0B;
   --color-danger: #EF4444;
   --color-info: #06B6D4;

   /* =========================================================
     BREAKPOINT-AWARE LAYOUT
  ========================================================= */
   --layout-sidebar-width: 270px;
   --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(15, 23, 42, 0.08);
   --shadow-auth: 0 20px 60px rgba(79, 70, 229, 0.16);
   --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(6, 182, 212, 0.22);

   /* =========================================================
     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: 250px;
      --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: 260px;
      --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;
   }
}