/* ============================================================================
   AMRC BRAND KIT - Design System & Brand Guidelines
   ============================================================================

   Yellow Key Real Estate Management Platform
   Version: 1.0
   Last Updated: 2025-11-15

   This file contains all brand colors, typography, spacing, and design tokens
   for consistent styling across the entire AMRC platform.

   Load Order: This file should be loaded FIRST before any other CSS
   ============================================================================ */

/* ============================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================ */
:root {
  /* === PRIMARY BRAND COLORS - VIBRANT YELLOW PALETTE === */
  --brand-yellow: #F3C130;            /* Brand Yellow - Primary */
  --brand-yellow-dark: #D8A500;       /* Brand Yellow Dark - Hover */
  --brand-primary: #F3C130;           /* Yellow - Primary Brand */
  --brand-primary-50: #FFFEF5;        /* Ultra light yellow */
  --brand-primary-100: #FFFAE0;       /* Very light yellow */
  --brand-primary-200: #FFF4B8;       /* Light yellow - Soft backgrounds */
  --brand-primary-300: #FFED8F;       /* Soft yellow - Borders */
  --brand-primary-400: #FBD958;       /* Medium yellow - Icons */
  --brand-primary-500: #F3C130;       /* Brand Yellow - Primary */
  --brand-primary-600: #D8A500;       /* Yellow Dark - Hover states */
  --brand-primary-700: #B88C00;       /* Deep yellow - Active states */
  --brand-primary-800: #987300;       /* Dark yellow - Text */
  --brand-primary-900: #785A00;       /* Darkest yellow - Emphasis */

  /* === SECONDARY COLORS - VIBRANT RED PALETTE === */
  --brand-red: #FF5851;               /* Brand Red - Secondary */
  --brand-secondary: #FF5851;         /* Red - Secondary */
  --brand-secondary-50: #FFF5F5;      /* Ultra light red */
  --brand-secondary-100: #FFE5E4;     /* Very light red */
  --brand-secondary-200: #FFBCB8;     /* Light red - Backgrounds */
  --brand-secondary-300: #FF938D;     /* Soft red - Borders */
  --brand-secondary-400: #FF7771;     /* Medium red - Icons */
  --brand-secondary-500: #FF5851;     /* Brand Red - Primary */
  --brand-secondary-600: #E63F38;     /* Deep red - Hover */
  --brand-secondary-700: #CC2620;     /* Dark red - Active states */
  --brand-secondary-800: #991C17;     /* Darker red - Text */
  --brand-secondary-900: #66130F;     /* Darkest red - Emphasis */

  /* === TERTIARY COLORS - BLUE & NEUTRALS === */
  --brand-blue: #414A6B;              /* Brand Blue - Tertiary */
  --brand-black: #1C1B20;             /* Brand Black - Text */
  --brand-white: #FFFFFF;             /* Brand White - Backgrounds */
  --brand-grey-100: #F4F4F4;          /* Light Grey */
  --brand-grey-200: #E4E4E4;          /* Medium Grey */
  --brand-grey-300: #C2C2C2;          /* Dark Grey */

  --brand-tertiary: #414A6B;          /* Blue - Primary */
  --brand-tertiary-50: #F4F4F4;       /* Light Grey - Page background */
  --brand-tertiary-100: #E4E4E4;      /* Medium Grey - Sections */
  --brand-tertiary-200: #C2C2C2;      /* Dark Grey - Dividers */
  --brand-tertiary-300: #9E9E9E;      /* Medium Gray - Borders */
  --brand-tertiary-400: #757575;      /* Cool Gray - Disabled */
  --brand-tertiary-500: #5A5F7D;      /* Light Blue - Secondary text */
  --brand-tertiary-600: #4D5368;      /* Medium Blue - Body text */
  --brand-tertiary-700: #414A6B;      /* Brand Blue - Headings */
  --brand-tertiary-800: #1C1B20;      /* Brand Black - Primary text */
  --brand-tertiary-900: #0A0A0C;      /* Jet Black - Maximum contrast */

  /* === ACCENT COLORS - LUXURY PALETTE === */
  --brand-accent-success-light: #E8F5E9;  /* Mint - Success background */
  --brand-accent-success: #2E7D32;        /* Forest Green - Success */
  --brand-accent-success-dark: #1B5E20;   /* Deep Green - Hover */

  --brand-accent-error-light: #FFEBEE;    /* Blush - Error background */
  --brand-accent-error: #C62828;          /* Ruby Red - Error */
  --brand-accent-error-dark: #B71C1C;     /* Deep Ruby - Hover */

  --brand-accent-warning-light: #FFF3E0;  /* Peach - Warning background */
  --brand-accent-warning: #EF6C00;        /* Amber - Warning */
  --brand-accent-warning-dark: #E65100;   /* Deep Amber - Hover */

  --brand-accent-info-light: #E3F2FD;     /* Sky - Info background */
  --brand-accent-info: #1976D2;           /* Royal Blue - Info */
  --brand-accent-info-dark: #1565C0;      /* Deep Blue - Hover */

  /* === SEMANTIC COLORS === */
  --color-success: var(--brand-accent-success);
  --color-success-light: var(--brand-accent-success-light);
  --color-error: var(--brand-accent-error);
  --color-error-light: var(--brand-accent-error-light);
  --color-warning: var(--brand-accent-warning);
  --color-warning-light: var(--brand-accent-warning-light);
  --color-info: var(--brand-accent-info);
  --color-info-light: var(--brand-accent-info-light);

  /* === TEXT COLORS === */
  --text-primary: var(--brand-black);             /* Black - Main text */
  --text-secondary: var(--brand-tertiary-700);    /* Blue - Secondary */
  --text-muted: var(--brand-tertiary-500);        /* Light blue - Muted */
  --text-disabled: var(--brand-grey-300);         /* Grey - Disabled */
  --text-inverse: var(--brand-white);             /* White - On dark bg */
  --text-on-primary: var(--brand-white);          /* White text on yellow */
  --text-on-secondary: var(--brand-white);        /* White text on red */
  --text-red: var(--brand-red);                   /* Red - Accents */
  --text-yellow: var(--brand-yellow-dark);        /* Yellow Dark - Highlights */

  /* === BACKGROUND COLORS === */
  --bg-page: var(--brand-grey-100);               /* Light grey - Page */
  --bg-white: var(--brand-white);                 /* Pure white - Cards */
  --bg-light: var(--brand-grey-100);              /* Light Grey - Sections */
  --bg-gray: var(--brand-grey-200);               /* Medium Grey - Hover */
  --bg-dark: var(--brand-blue);                   /* Blue - Dark sections */
  --bg-overlay: rgba(28, 27, 32, 0.5);           /* Black overlay */
  --bg-primary-light: var(--brand-primary-100);   /* Light yellow highlights */
  --bg-secondary-light: var(--brand-secondary-50); /* Light red highlights */
  --bg-gradient-yellow: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-yellow-dark) 100%);
  --bg-gradient-red: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-secondary-600) 100%);
  --bg-gradient-primary: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-red) 100%);

  /* === BORDER COLORS === */
  --border-light: var(--brand-grey-200);          /* Medium Grey - Default */
  --border-medium: var(--brand-grey-300);         /* Dark Grey - Emphasis */
  --border-dark: var(--brand-tertiary-400);       /* Cool Gray - Strong */
  --border-primary: var(--brand-yellow);          /* Yellow - Primary */
  --border-secondary: var(--brand-red);           /* Red - Secondary */

  /* === BORDER RADIUS === */
  --brand-radius-md: 10px;        /* Brand standard radius */
  --border-radius-sm: 0.375rem;   /* 6px - Small elements */
  --border-radius-md: 10px;       /* 10px - Default */
  --border-radius-lg: 0.75rem;    /* 12px - Cards */
  --border-radius-xl: 1rem;       /* 16px - Modals */
  --border-radius-2xl: 1.5rem;    /* 24px - Hero sections */
  --border-radius-full: 9999px;   /* Full round - Pills/avatars */

  /* === TYPOGRAPHY === */
  /* Font Families - Professional Real Estate Pairing */
  /* Inter: Modern, clean, excellent Arabic support - Perfect for headings */
  /* Manrope: Friendly geometric sans - Perfect for body text */
  --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --font-headings: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-monospace: 'SF Mono', 'Monaco', 'Inconsolata', 'Courier New', Courier, monospace;

  /* Font Sizes */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* === SPACING SYSTEM === */
  /* Based on 8px grid system */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* === SHADOWS === */
  --brand-shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --brand-shadow-md: 0 4px 12px rgba(0,0,0,0.08);

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 32px 0 rgba(0, 0, 0, 0.15), 0 8px 16px 0 rgba(0, 0, 0, 0.10);
  --shadow-2xl: 0 24px 48px 0 rgba(0, 0, 0, 0.18), 0 12px 24px 0 rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* Card shadows */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.10);

  /* Accent shadows */
  --shadow-yellow: 0 4px 12px rgba(243, 193, 48, 0.25), 0 2px 6px rgba(243, 193, 48, 0.15);
  --shadow-red: 0 4px 12px rgba(255, 88, 81, 0.25), 0 2px 6px rgba(255, 88, 81, 0.15);

  /* === TRANSITIONS - SMOOTH === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === Z-INDEX SCALE === */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* === GRADIENTS === */
  --gradient-primary: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-yellow-dark) 100%);
  --gradient-primary-light: linear-gradient(135deg, var(--brand-primary-100) 0%, var(--brand-primary-200) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-secondary-600) 100%);
  --gradient-accent: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-red) 100%);
  --gradient-yellow-shimmer: linear-gradient(90deg, var(--brand-primary-400) 0%, var(--brand-yellow) 50%, var(--brand-primary-400) 100%);
  --gradient-red-fade: linear-gradient(180deg, transparent 0%, var(--brand-red) 100%);
  --gradient-page: linear-gradient(180deg, var(--brand-grey-100) 0%, var(--brand-white) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(28, 27, 32, 0) 0%, rgba(28, 27, 32, 0.6) 100%);

  /* === BREAKPOINTS (for reference in JS) === */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* === CONTAINER WIDTHS === */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;
}

/* ============================================================================
   BASE TYPOGRAPHY STYLES
   ============================================================================ */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings - Enhanced with Brand Colors */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-headings);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* H1 - Premium Navy to Grey Gradient */
h1, .h1 {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand-tertiary-700) 0%, var(--brand-tertiary-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  letter-spacing: -0.02em;
  text-shadow: none;
}

/* H2 - Bold Red Accent */
h2, .h2 {
  font-size: var(--font-size-3xl);
  color: var(--brand-secondary-500);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* H3 - Yellow Accent */
h3, .h3 {
  font-size: var(--font-size-2xl);
  color: var(--brand-primary-700);
  font-weight: var(--font-weight-semibold);
}

/* H4 - Deep Red */
h4, .h4 {
  font-size: var(--font-size-xl);
  color: var(--brand-secondary-600);
  font-weight: 600;
}

/* H5 - Deep Yellow */
h5, .h5 {
  font-size: var(--font-size-lg);
  color: var(--brand-primary-800);
  font-weight: 600;
}

/* H6 - Navy with uppercase */
h6, .h6 {
  font-size: var(--font-size-base);
  color: var(--brand-tertiary-700);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Heading Variants - Special Styles with Red/Yellow */

/* Navy to Grey Gradient (same as default H1) */
.heading-navy-gradient {
  background: linear-gradient(135deg, var(--brand-tertiary-700) 0%, var(--brand-tertiary-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
}

/* Red Accent */
.heading-accent-red {
  color: var(--brand-secondary-500) !important;
  text-shadow: 0 2px 8px rgba(255, 88, 81, 0.3);
  font-weight: var(--font-weight-bold) !important;
}

/* Yellow Accent */
.heading-accent-yellow {
  color: var(--brand-primary-600) !important;
  text-shadow: 0 2px 8px rgba(243, 193, 48, 0.3);
  font-weight: var(--font-weight-bold) !important;
}

/* Yellow Gradient */
.heading-gradient-yellow {
  background: linear-gradient(135deg, var(--brand-primary-500) 0%, var(--brand-primary-800) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold) !important;
}

/* Red Gradient */
.heading-gradient-red {
  background: linear-gradient(135deg, var(--brand-secondary-400) 0%, var(--brand-secondary-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold) !important;
}

/* Red to Yellow Gradient */
.heading-gradient-red-yellow {
  background: linear-gradient(135deg, var(--brand-secondary-500) 0%, var(--brand-primary-600) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold) !important;
}

/* Navy to Red Gradient */
.heading-gradient-navy-red {
  background: linear-gradient(135deg, var(--brand-tertiary-700) 0%, var(--brand-secondary-500) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold) !important;
}

/* Navy to Yellow Gradient */
.heading-gradient-navy-yellow {
  background: linear-gradient(135deg, var(--brand-tertiary-700) 0%, var(--brand-primary-600) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold) !important;
}

/* Solid Colors */
.heading-solid-red {
  color: var(--brand-secondary-600) !important;
  font-weight: var(--font-weight-bold) !important;
}

.heading-solid-yellow {
  color: var(--brand-primary-700) !important;
  font-weight: var(--font-weight-bold) !important;
}

.heading-solid-navy {
  color: var(--brand-tertiary-700) !important;
  font-weight: 800 !important;
}

/* Decorative Underlines */
.heading-underline {
  position: relative;
  padding-bottom: 0.5em;
}

.heading-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-secondary-500) 0%, var(--brand-primary-600) 100%);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(255, 88, 81, 0.3);
}

.heading-underline-center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Paragraphs */
p {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* Links */
a {
  color: var(--brand-primary-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* === TEXT COLORS === */
.text-primary { color: var(--brand-primary) !important; }
.text-primary-dark { color: var(--brand-primary-dark) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-dark { color: var(--text-primary) !important; }
.text-white { color: var(--text-inverse) !important; }
.text-success { color: var(--color-success) !important; }
.text-error { color: var(--color-error) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }

/* === BACKGROUND COLORS === */
.bg-primary { background-color: var(--brand-primary) !important; }
.bg-primary-dark { background-color: var(--brand-primary-dark) !important; }
.bg-primary-light { background-color: var(--brand-primary-light) !important; }
.bg-primary-pale { background-color: var(--brand-primary-pale) !important; }
.bg-secondary { background-color: var(--brand-secondary) !important; }
.bg-light { background-color: var(--bg-light) !important; }
.bg-white { background-color: var(--bg-white) !important; }
.bg-dark { background-color: var(--bg-dark) !important; }

/* === GRADIENT BACKGROUNDS === */
.bg-gradient-primary {
  background: var(--gradient-primary) !important;
  color: var(--text-inverse);
}

.bg-gradient-secondary {
  background: var(--gradient-secondary) !important;
  color: var(--text-inverse);
}

/* === BORDERS === */
.border { border: 1px solid var(--border-color) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.border-dark { border-color: var(--border-color-dark) !important; }

/* Border Radius */
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
.rounded-circle { border-radius: 50% !important; }

/* === SHADOWS === */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }
.shadow-none { box-shadow: none !important; }

/* === SPACING UTILITIES === */
/* Margin utilities */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-8 { margin: var(--space-8) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-8 { padding: var(--space-8) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-8 { padding-top: var(--space-8) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }

/* === DISPLAY UTILITIES === */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* === FLEX UTILITIES === */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }

/* === TEXT UTILITIES === */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.font-weight-light { font-weight: var(--font-weight-light) !important; }
.font-weight-normal { font-weight: var(--font-weight-normal) !important; }
.font-weight-medium { font-weight: var(--font-weight-medium) !important; }
.font-weight-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-weight-bold { font-weight: var(--font-weight-bold) !important; }

/* === BUTTON STYLES === */
.btn-brand-primary {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
}

.btn-brand-primary:hover {
  background: var(--brand-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--text-inverse);
  text-decoration: none;
}

.btn-brand-secondary {
  background: var(--gradient-secondary);
  color: var(--text-inverse);
  border: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
}

.btn-brand-secondary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--text-inverse);
  text-decoration: none;
}

.btn-brand-outline {
  background: transparent;
  color: var(--brand-primary-dark);
  border: 2px solid var(--brand-primary);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
}

.btn-brand-outline:hover {
  background: var(--brand-primary);
  color: var(--text-inverse);
  text-decoration: none;
}

/* ============================================================================
   COMPONENT STYLES
   ============================================================================ */

/* === CARDS === */
.card-brand {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

.card-brand:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* === ALERTS === */
.alert-brand {
  padding: var(--space-4);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--space-4);
  border-left: 4px solid;
}

.alert-brand.alert-success {
  background-color: #d4edda;
  border-color: var(--color-success);
  color: #155724;
}

.alert-brand.alert-error {
  background-color: #f8d7da;
  border-color: var(--color-error);
  color: #721c24;
}

.alert-brand.alert-warning {
  background-color: #fff3cd;
  border-color: var(--color-warning);
  color: #856404;
}

.alert-brand.alert-info {
  background-color: #d1ecf1;
  border-color: var(--color-info);
  color: #0c5460;
}

/* === BADGES === */
.badge-brand {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-lg);
  background: var(--gradient-primary);
  color: var(--text-inverse);
}

/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {
  :root {
    --font-size-4xl: 1.75rem;
    --font-size-3xl: 1.5rem;
    --font-size-2xl: 1.25rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a, a:visited {
    text-decoration: underline;
  }

  .no-print {
    display: none !important;
  }
}

/* ============================================================================
   END OF BRANDKIT.CSS
   ============================================================================ */