:root {
   /* =========================================================
      BRAND - ISLMS BLUE KIOSK/LOGIN/ADMIN ALIGNMENT
   ========================================================= */
   --color-brand-primary: #2563EB;
   --color-brand-accent: #06B6D4;
   --color-brand-soft: #DBEAFE;
   --color-brand-support: #10B981;
   --color-brand-secondary: #0F172A;

   --color-brand-primary-rgb: 37, 99, 235;
   --color-brand-accent-rgb: 6, 182, 212;
   --color-brand-secondary-rgb: 15, 23, 42;

   /* =========================================================
      ADMIN BLUE SURFACES
      - This is why the admin panel will feel blue, not plain white
   ========================================================= */
   --color-page-bg: #EAF2FF;
   --color-page-bg-deep: #DCEBFF;

   --color-surface: #FFFFFF;
   --color-surface-soft: #EFF6FF;
   --color-surface-blue: #DBEAFE;
   --color-surface-blue-strong: #BFDBFE;

   --color-surface-glass: rgba(239, 246, 255, 0.88);
   --color-surface-glass-strong: rgba(255, 255, 255, 0.94);

   --color-panel: rgba(255, 255, 255, 0.88);
   --color-panel-blue: rgba(219, 234, 254, 0.72);

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

   /* =========================================================
      BORDERS
   ========================================================= */
   --color-line: rgba(37, 99, 235, 0.12);
   --color-line-strong: rgba(37, 99, 235, 0.22);
   --color-line-blue: rgba(14, 165, 233, 0.26);

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

   --color-success-soft: rgba(16, 185, 129, 0.12);
   --color-warning-soft: rgba(245, 158, 11, 0.14);
   --color-danger-soft: rgba(239, 68, 68, 0.12);
   --color-info-soft: rgba(6, 182, 212, 0.14);

   /* =========================================================
      GRADIENTS
   ========================================================= */
   --gradient-brand: linear-gradient(135deg, #2563EB, #06B6D4);
   --gradient-brand-deep: linear-gradient(135deg, #0F172A, #1D4ED8, #06B6D4);
   --gradient-admin-bg:
      radial-gradient(circle at top left, rgba(37, 99, 235, 0.20), transparent 32%),
      radial-gradient(circle at bottom right, rgba(6, 182, 212, 0.16), transparent 32%),
      linear-gradient(135deg, #EFF6FF 0%, #E0F2FE 45%, #EEF2FF 100%);

   /* =========================================================
      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;

   --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(37, 99, 235, 0.10);
   --shadow-card: 0 18px 44px rgba(15, 23, 42, 0.08);
   --shadow-panel: 0 24px 70px rgba(37, 99, 235, 0.14);
   --shadow-auth: 0 20px 60px rgba(37, 99, 235, 0.18);
   --shadow-brand: 0 16px 34px rgba(37, 99, 235, 0.24);

   --backdrop-blur: blur(14px);

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

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

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

   /* =========================================================
      FOCUS
   ========================================================= */
   --focus-ring-brand: 0 0 0 0.2rem rgba(37, 99, 235, 0.20);
   --focus-ring-info: 0 0 0 0.2rem rgba(6, 182, 212, 0.22);

   /* =========================================================
      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: 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;
      --radius-3xl: 28px;
   }
}

/* =========================================================
   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;
      --radius-3xl: 24px;

      --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;
      --radius-3xl: 22px;

      --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;
   }
}