/* Global CSS - Typography and Colors */

/* =======================================
   1. Color Variables
   ======================================= */
:root {
  /* Primary Colors */
  --primary-color: #831718;       /* Orange - Brand Primary */
  --primary-dark: #831718;        /* Dark Orange - Hover states */
  --primary-light: #ffffff;       /* Light Orange - Backgrounds */
  
  /* Secondary Colors */
  --secondary-color: #2196F3;     /* Blue - Call to actions */
  --secondary-dark: #1976D2;      /* Dark Blue - Hover states */
  --secondary-light: #BBDEFB;     /* Light Blue - Backgrounds */
  
  /* Neutrals */
  --neutral-900: #212121;         /* Nearly Black - Main text */
  --neutral-800: #424242;         /* Dark Gray - Headings */
  --neutral-700: #616161;         /* Medium Dark Gray - Sub headings */
  --neutral-600: #757575;         /* Medium Gray - Body text */
  --neutral-500: #9E9E9E;         /* Gray - Placeholder text */
  --neutral-400: #BDBDBD;         /* Light Gray - Disabled text */
  --neutral-300: #E0E0E0;         /* Lighter Gray - Borders */
  --neutral-200: #EEEEEE;         /* Very Light Gray - Dividers */
  --neutral-100: #F5F5F5;         /* Almost White - Background */
  --neutral-50: #FAFAFA;          /* White - Card backgrounds */
  
  /* Feedback Colors */
  --success: #4CAF50;             /* Green - Success messages */
  --warning: #FFC107;             /* Amber - Warning messages */
  --error: #F44336;               /* Red - Error messages */
  --info: #2196F3;                /* Blue - Information messages */
  
  /* Additional UI Colors */
  --card-bg: #FFFFFF;             /* White - Card backgrounds */
  --body-bg: #F9F9F9;             /* Light Gray - Page background */
  --overlay-bg: rgba(0,0,0,0.5);  /* Black with opacity - Modal overlays */

  /* Spacing System */
  --space-unit: 0.25rem;          /* Base unit: 4px at 16px font-size */
  --space-xs: calc(1 * var(--space-unit));      /* 4px */
  --space-sm: calc(2 * var(--space-unit));      /* 8px */
  --space-md: calc(4 * var(--space-unit));      /* 16px */
  --space-lg: calc(6 * var(--space-unit));      /* 24px */
  --space-xl: calc(8 * var(--space-unit));      /* 32px */
  --space-2xl: calc(12 * var(--space-unit));    /* 48px */
  --space-3xl: calc(16 * var(--space-unit));    /* 64px */
  --space-4xl: calc(24 * var(--space-unit));    /* 96px */
  --space-5xl: calc(32 * var(--space-unit));    /* 128px */
}

/* =======================================
   2. Typography
   ======================================= */
html {
  font-size: 16px;                /* Base font size */
}

body {
  font-family: 'Averta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: var(--neutral-800);
  background-color: var(--body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Averta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5em;
  color: var(--neutral-800);
}

h1 {
  font-size: 2.5rem;    /* 40px */
  letter-spacing: -0.5px;
}

h2 {
  font-size: 2rem;      /* 32px */
  letter-spacing: -0.25px;
}

h3 {
  font-size: 1.75rem;   /* 28px */
}

h4 {
  font-size: 1.5rem;    /* 24px */
}

h5 {
  font-size: 1.25rem;   /* 20px */
}

h6 {
  font-size: 1rem;      /* 16px */
  font-weight: 700;
}

/* Paragraph and text */
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

small, .text-small {
  font-size: 0.875rem; /* 14px */
}

.text-xs {
  font-size: 0.75rem; /* 12px */
}

.text-large {
  font-size: 1.125rem; /* 18px */
}

.text-xl {
  font-size: 1.25rem; /* 20px */
}

/* Font weights */
.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

/* Links */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: var(--primary-dark);
}

/* Lists */
ul, ol {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}

ul li, ol li {
  margin-bottom: 0.5rem;
}

/* =======================================
   3. Text Utilities
   ======================================= */
.text-primary {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.text-muted {
  color: var(--neutral-500) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-danger {
  color: var(--error) !important;
}

.text-info {
  color: var(--info) !important;
}

/* Text alignment */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

/* Text transforms */
.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

/* =======================================
   4. Background Utilities
   ======================================= */
.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-primary-light {
  background-color: var(--primary-light) !important;
}

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

.bg-secondary-light {
  background-color: var(--secondary-light) !important;
}

.bg-white {
  background-color: #FFFFFF !important;
}

.bg-light {
  background-color: var(--neutral-100) !important;
}

.bg-dark {
  background-color: var(--neutral-800) !important;
}

.bg-success {
  background-color: var(--success) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-danger {
  background-color: var(--error) !important;
}

.bg-info {
  background-color: var(--info) !important;
}

/* =======================================
   5. Border Utilities
   ======================================= */
.border {
  border: 1px solid var(--neutral-300) !important;
}

.border-top {
  border-top: 1px solid var(--neutral-300) !important;
}

.border-right {
  border-right: 1px solid var(--neutral-300) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--neutral-300) !important;
}

.border-left {
  border-left: 1px solid var(--neutral-300) !important;
}

.border-primary {
  border-color: var(--primary-color) !important;
}

.border-secondary {
  border-color: var(--secondary-color) !important;
}

/* =======================================
   6. Responsive Typography
   ======================================= */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
  
  h1 {
    font-size: 2.2rem;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  h4 {
    font-size: 1.3rem;
  }
}

@media (max-width: 576px) {
  html {
    font-size: 14px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.6rem;
  }
  
  h3 {
    font-size: 1.4rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
}

/* =======================================
   7. Spacing Utilities
   ======================================= */

/* Margin utilities */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--space-xs) !important; }
.m-sm { margin: var(--space-sm) !important; }
.m-md { margin: var(--space-md) !important; }
.m-lg { margin: var(--space-lg) !important; }
.m-xl { margin: var(--space-xl) !important; }
.m-2xl { margin: var(--space-2xl) !important; }
.m-3xl { margin: var(--space-3xl) !important; }
.m-auto { margin: auto !important; }

/* Margin-top utilities */
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }
.mt-2xl { margin-top: var(--space-2xl) !important; }
.mt-3xl { margin-top: var(--space-3xl) !important; }
.mt-auto { margin-top: auto !important; }

/* Margin-bottom utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }
.mb-2xl { margin-bottom: var(--space-2xl) !important; }
.mb-3xl { margin-bottom: var(--space-3xl) !important; }
.mb-auto { margin-bottom: auto !important; }

/* Margin-left utilities */
.ml-0 { margin-left: 0 !important; }
.ml-xs { margin-left: var(--space-xs) !important; }
.ml-sm { margin-left: var(--space-sm) !important; }
.ml-md { margin-left: var(--space-md) !important; }
.ml-lg { margin-left: var(--space-lg) !important; }
.ml-xl { margin-left: var(--space-xl) !important; }
.ml-2xl { margin-left: var(--space-2xl) !important; }
.ml-3xl { margin-left: var(--space-3xl) !important; }
.ml-auto { margin-left: auto !important; }

/* Margin-right utilities */
.mr-0 { margin-right: 0 !important; }
.mr-xs { margin-right: var(--space-xs) !important; }
.mr-sm { margin-right: var(--space-sm) !important; }
.mr-md { margin-right: var(--space-md) !important; }
.mr-lg { margin-right: var(--space-lg) !important; }
.mr-xl { margin-right: var(--space-xl) !important; }
.mr-2xl { margin-right: var(--space-2xl) !important; }
.mr-3xl { margin-right: var(--space-3xl) !important; }
.mr-auto { margin-right: auto !important; }

/* Horizontal margin utilities */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xs { margin-left: var(--space-xs) !important; margin-right: var(--space-xs) !important; }
.mx-sm { margin-left: var(--space-sm) !important; margin-right: var(--space-sm) !important; }
.mx-md { margin-left: var(--space-md) !important; margin-right: var(--space-md) !important; }
.mx-lg { margin-left: var(--space-lg) !important; margin-right: var(--space-lg) !important; }
.mx-xl { margin-left: var(--space-xl) !important; margin-right: var(--space-xl) !important; }
.mx-2xl { margin-left: var(--space-2xl) !important; margin-right: var(--space-2xl) !important; }
.mx-3xl { margin-left: var(--space-3xl) !important; margin-right: var(--space-3xl) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Vertical margin utilities */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xs { margin-top: var(--space-xs) !important; margin-bottom: var(--space-xs) !important; }
.my-sm { margin-top: var(--space-sm) !important; margin-bottom: var(--space-sm) !important; }
.my-md { margin-top: var(--space-md) !important; margin-bottom: var(--space-md) !important; }
.my-lg { margin-top: var(--space-lg) !important; margin-bottom: var(--space-lg) !important; }
.my-xl { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; }
.my-2xl { margin-top: var(--space-2xl) !important; margin-bottom: var(--space-2xl) !important; }
.my-3xl { margin-top: var(--space-3xl) !important; margin-bottom: var(--space-3xl) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--space-xs) !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }
.p-2xl { padding: var(--space-2xl) !important; }
.p-3xl { padding: var(--space-3xl) !important; }

/* Padding-top utilities */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--space-xs) !important; }
.pt-sm { padding-top: var(--space-sm) !important; }
.pt-md { padding-top: var(--space-md) !important; }
.pt-lg { padding-top: var(--space-lg) !important; }
.pt-xl { padding-top: var(--space-xl) !important; }
.pt-2xl { padding-top: var(--space-2xl) !important; }
.pt-3xl { padding-top: var(--space-3xl) !important; }

/* Padding-bottom utilities */
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--space-xs) !important; }
.pb-sm { padding-bottom: var(--space-sm) !important; }
.pb-md { padding-bottom: var(--space-md) !important; }
.pb-lg { padding-bottom: var(--space-lg) !important; }
.pb-xl { padding-bottom: var(--space-xl) !important; }
.pb-2xl { padding-bottom: var(--space-2xl) !important; }
.pb-3xl { padding-bottom: var(--space-3xl) !important; }

/* Padding-left utilities */
.pl-0 { padding-left: 0 !important; }
.pl-xs { padding-left: var(--space-xs) !important; }
.pl-sm { padding-left: var(--space-sm) !important; }
.pl-md { padding-left: var(--space-md) !important; }
.pl-lg { padding-left: var(--space-lg) !important; }
.pl-xl { padding-left: var(--space-xl) !important; }
.pl-2xl { padding-left: var(--space-2xl) !important; }
.pl-3xl { padding-left: var(--space-3xl) !important; }

/* Padding-right utilities */
.pr-0 { padding-right: 0 !important; }
.pr-xs { padding-right: var(--space-xs) !important; }
.pr-sm { padding-right: var(--space-sm) !important; }
.pr-md { padding-right: var(--space-md) !important; }
.pr-lg { padding-right: var(--space-lg) !important; }
.pr-xl { padding-right: var(--space-xl) !important; }
.pr-2xl { padding-right: var(--space-2xl) !important; }
.pr-3xl { padding-right: var(--space-3xl) !important; }

/* Horizontal padding utilities */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.px-sm { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; }
.px-md { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
.px-lg { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }
.px-xl { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
.px-2xl { padding-left: var(--space-2xl) !important; padding-right: var(--space-2xl) !important; }
.px-3xl { padding-left: var(--space-3xl) !important; padding-right: var(--space-3xl) !important; }

/* Vertical padding utilities */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
.py-sm { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; }
.py-md { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.py-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
.py-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.py-2xl { padding-top: var(--space-2xl) !important; padding-bottom: var(--space-2xl) !important; }
.py-3xl { padding-top: var(--space-3xl) !important; padding-bottom: var(--space-3xl) !important; }

/* =======================================
   8. Gap and Spacing
   ======================================= */

/* Gap for flexbox and grid containers */
.gap-0 { gap: 0 !important; }
.gap-xs { gap: var(--space-xs) !important; }
.gap-sm { gap: var(--space-sm) !important; }
.gap-md { gap: var(--space-md) !important; }
.gap-lg { gap: var(--space-lg) !important; }
.gap-xl { gap: var(--space-xl) !important; }
.gap-2xl { gap: var(--space-2xl) !important; }
.gap-3xl { gap: var(--space-3xl) !important; }

/* Row gap for grid containers */
.row-gap-0 { row-gap: 0 !important; }
.row-gap-xs { row-gap: var(--space-xs) !important; }
.row-gap-sm { row-gap: var(--space-sm) !important; }
.row-gap-md { row-gap: var(--space-md) !important; }
.row-gap-lg { row-gap: var(--space-lg) !important; }
.row-gap-xl { row-gap: var(--space-xl) !important; }
.row-gap-2xl { row-gap: var(--space-2xl) !important; }
.row-gap-3xl { row-gap: var(--space-3xl) !important; }

/* Column gap for grid containers */
.col-gap-0 { column-gap: 0 !important; }
.col-gap-xs { column-gap: var(--space-xs) !important; }
.col-gap-sm { column-gap: var(--space-sm) !important; }
.col-gap-md { column-gap: var(--space-md) !important; }
.col-gap-lg { column-gap: var(--space-lg) !important; }
.col-gap-xl { column-gap: var(--space-xl) !important; }
.col-gap-2xl { column-gap: var(--space-2xl) !important; }
.col-gap-3xl { column-gap: var(--space-3xl) !important; }

/* Spacing between specific elements */
.stack > * + * {
  margin-top: var(--space-md);
}

.stack-sm > * + * {
  margin-top: var(--space-sm);
}

.stack-lg > * + * {
  margin-top: var(--space-lg);
}

.inline-stack > * + * {
  margin-left: var(--space-md);
}

.inline-stack-sm > * + * {
  margin-left: var(--space-sm);
}

.inline-stack-lg > * + * {
  margin-left: var(--space-lg);
}

/* Container width utilities */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.container-sm {
  max-width: 640px;
}

.container-md {
  max-width: 768px;
}

.container-lg {
  max-width: 1024px;
}

.container-xl {
  max-width: 1280px;
}

.container-fluid {
  max-width: none;
}

/* =======================================
   9. Section Spacing
   ======================================= */
.section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.section-sm {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.section-lg {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

/* Responsive adjustments for sections */
@media (max-width: 768px) {
  .section {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
  
  .section-sm {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
  
  .section-lg {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }
}