:root {
   /* =========================================================
      BRAND - RICH VINTAGE / NON-MINIMALIST PALETTE
      Direction: warm, decorative, bold, client-facing
   ========================================================= */
   --color-brand-primary: #B8001F;
   /* bold heritage red */
   --color-brand-accent: #F2A03D;
   /* warm gold-orange */
   --color-brand-soft: #F0F1F3;
   /* parchment cream */
   --color-brand-support: #159A8A;
   /* rich teal */
   --color-brand-secondary: #0B2F5B;
   /* deep royal navy */

   --color-brand-deep: #6F0017;
   --color-brand-gold: #D49A2A;
   --color-brand-brown: #7B4A2A;
   --color-brand-cream: #FFF2DB;

   /* Optional RGB tokens for overlays / gradients */
   --color-brand-primary-rgb: 184, 0, 31;
   --color-brand-accent-rgb: 242, 160, 61;
   --color-brand-secondary-rgb: 11, 47, 91;
   --color-brand-support-rgb: 21, 154, 138;

   /* =========================================================
      DECORATIVE GRADIENTS
   ========================================================= */
   --gradient-page:
      radial-gradient(circle at top left, rgba(var(--color-brand-accent-rgb), 0.28), transparent 28%),
      radial-gradient(circle at top right, rgba(var(--color-brand-primary-rgb), 0.18), transparent 30%),
      linear-gradient(135deg, #FFF7EA 0%, #FFE4BD 45%, #FFF2DB 100%);

   --gradient-brand:
      linear-gradient(135deg, #B8001F 0%, #D83A2E 45%, #F2A03D 100%);

   --gradient-secondary:
      linear-gradient(135deg, #0B2F5B 0%, #113868 55%, #159A8A 100%);

   --gradient-panel:
      linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 236, 203, 0.95));

   --gradient-sidebar:
      linear-gradient(180deg, #0B2F5B 0%, #113868 45%, #6F0017 100%);

   --gradient-topbar:
      linear-gradient(90deg, #FFFFFF 0%, #FFF2DB 55%, #FFE4BD 100%);

   /* =========================================================
   SURFACES
========================================================= */
   --color-surface: #FFFFFF;
   --color-surface-soft: #F0F1F3;
   --color-surface-warm: #E7E9ED;
   --color-surface-muted: #DDE1E6;
   --color-surface-glass: rgba(255, 255, 255, 0.92);
   --color-surface-elevated: #FFFFFF;

   /* =========================================================
      TEXT
   ========================================================= */
   --color-text-primary: #0B2F5B;
   --color-text-secondary: #6F0017;
   --color-text-muted: #76533A;
   --color-text-soft: #9A7250;
   --color-text-inverse: #FFFFFF;
   --color-text-inverse-soft: rgba(255, 255, 255, 0.88);

   /* =========================================================
      BORDERS
   ========================================================= */
   --color-line: rgba(184, 0, 31, 0.18);
   --color-line-strong: rgba(184, 0, 31, 0.36);
   --color-line-gold: rgba(212, 154, 42, 0.45);
   --color-line-blue: rgba(11, 47, 91, 0.18);

   /* =========================================================
      STATE COLORS
   ========================================================= */
   --color-success: #159A8A;
   --color-warning: #F2A03D;
   --color-danger: #B8001F;
   --color-info: #0B2F5B;

   --color-success-soft: rgba(21, 154, 138, 0.14);
   --color-warning-soft: rgba(242, 160, 61, 0.18);
   --color-danger-soft: rgba(184, 0, 31, 0.12);
   --color-info-soft: rgba(11, 47, 91, 0.12);

   /* =========================================================
      DECORATIVE PATTERN TOKENS
   ========================================================= */
   --pattern-dots:
      radial-gradient(rgba(184, 0, 31, 0.13) 1px, transparent 1px);

   --pattern-dots-size: 18px 18px;

   --pattern-vintage-lines:
      repeating-linear-gradient(45deg,
         rgba(242, 160, 61, 0.10) 0,
         rgba(242, 160, 61, 0.10) 1px,
         transparent 1px,
         transparent 12px);

   /* =========================================================
      BREAKPOINT-AWARE LAYOUT
   ========================================================= */
   --layout-sidebar-width: 285px;
   --layout-topbar-height: 82px;
   --layout-auth-max-width: 1160px;
   --layout-container-padding: 28px;
   --layout-section-gap: 28px;

   /* =========================================================
      RESPONSIVE SPACING
   ========================================================= */
   --space-2xs: 4px;
   --space-xs: 8px;
   --space-sm: 12px;
   --space-md: 16px;
   --space-lg: 22px;
   --space-xl: 28px;
   --space-2xl: 36px;
   --space-3xl: 46px;
   --space-4xl: 56px;

   /* Fluid spacing for auth pages */
   --auth-padding-y: clamp(34px, 5vw, 60px);
   --auth-padding-x: clamp(24px, 4vw, 48px);
   --auth-page-padding: clamp(18px, 2.5vw, 32px);

   /* =========================================================
      EFFECTS
   ========================================================= */
   --shadow-soft: 0 18px 42px rgba(11, 47, 91, 0.16);
   --shadow-medium: 0 22px 55px rgba(111, 0, 23, 0.18);
   --shadow-strong: 0 28px 75px rgba(11, 47, 91, 0.24);
   --shadow-auth: 0 26px 70px rgba(184, 0, 31, 0.22);
   --shadow-gold: 0 14px 34px rgba(212, 154, 42, 0.24);
   --backdrop-blur: blur(10px);

   /* =========================================================
      RADIUS
   ========================================================= */
   --radius-sm: 12px;
   --radius-md: 16px;
   --radius-lg: 22px;
   --radius-xl: 28px;
   --radius-2xl: 34px;
   --radius-pill: 999px;

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

   /* =========================================================
      MOTION
   ========================================================= */
   --transition-fast: all 0.22s ease;
   --transition-base: all 0.32s ease;
   --transition-slow: all 0.45s ease;

   /* =========================================================
      FOCUS
   ========================================================= */
   --focus-ring-brand: 0 0 0 0.24rem rgba(242, 160, 61, 0.36);
   --focus-ring-danger: 0 0 0 0.24rem rgba(184, 0, 31, 0.22);
   --focus-ring-info: 0 0 0 0.24rem rgba(11, 47, 91, 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.35rem, 2.2vw, 1.65rem);
   --font-size-2xl: clamp(1.75rem, 3.3vw, 2.35rem);

   --line-height-tight: 1.2;
   --line-height-base: 1.55;
   --line-height-relaxed: 1.75;

   /* =========================================================
      OPTIONAL COMPONENT ACCENTS
      Use these in buttons, cards, badges, headers, and modals
   ========================================================= */
   --component-header-bg: var(--gradient-secondary);
   --component-header-color: #FFFFFF;

   --component-card-bg: var(--gradient-panel);
   --component-card-border: 1px solid var(--color-line-gold);
   --component-card-shadow: var(--shadow-soft);

   --component-button-bg: var(--gradient-brand);
   --component-button-color: #FFFFFF;
   --component-button-shadow: var(--shadow-gold);

   --component-badge-bg: rgba(242, 160, 61, 0.18);
   --component-badge-color: #6F0017;
}

/* =========================================================
   LARGE TABLET / SMALL DESKTOP
========================================================= */
@media (max-width: 1199.98px) {
   :root {
      --layout-sidebar-width: 265px;
      --layout-topbar-height: 78px;
      --layout-auth-max-width: 1000px;
      --layout-container-padding: 24px;
      --layout-section-gap: 24px;

      --space-xl: 24px;
      --space-2xl: 32px;
      --space-3xl: 40px;

      --radius-lg: 20px;
      --radius-xl: 24px;
      --radius-2xl: 30px;
   }
}

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

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

      --font-size-base: 15px;
      --font-size-lg: 17px;
      --font-size-xl: 1.4rem;
      --font-size-2xl: 1.85rem;

      --shadow-soft: 0 14px 34px rgba(11, 47, 91, 0.14);
      --shadow-auth: 0 20px 52px rgba(184, 0, 31, 0.18);
   }
}

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

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

      --space-lg: 18px;
      --space-xl: 22px;
      --space-2xl: 26px;
      --space-3xl: 32px;

      --radius-md: 14px;
      --radius-lg: 18px;
      --radius-xl: 22px;
      --radius-2xl: 26px;

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

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

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

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

      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --radius-2xl: 22px;

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

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