/* ================================
   CSS VARIABLES (CUSTOM PROPERTIES)
   ================================ */
:root {
  /* Font Family */
  --font-primary: "Poppins", sans-serif;
  
  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  
  /* Font Sizes */
  --text-xxs: 0.625rem;   /* 10px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-normal: 1rem;    /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.75rem;    /* 28px */
  --text-4xl: 2rem;       /* 32px */
  --text-5xl: 2.5rem;     /* 40px */
  
  /* Line Heights */
  --lh-tight: 1rem;
  --lh-snug: 1.25rem;
  --lh-normal: 1.5rem;
  --lh-relaxed: 1.75rem;
  --lh-loose: 2rem;
  --lh-extra: 2.25rem;
  --lh-5xl: 2.5rem;
  
  /* Spacing Scale */
  --space-1: 0.125rem;    /* 2px */
  --space-2: 0.25rem;     /* 4px */
  --space-4: 0.375rem;    /* 6px */
  --space-8: 0.5rem;      /* 8px */
  --space-10: 0.625rem;   /* 10px */
  --space-12: 0.75rem;    /* 12px */
  --space-14: 0.875rem;   /* 14px */
  --space-15: 0.938rem;   /* 15px */
  --space-16: 1rem;       /* 16px */
  --space-20: 1.25rem;    /* 20px */
  --space-24: 1.5rem;     /* 24px */
  --space-25: 1.563rem;   /* 25px */
  --space-30: 1.875rem;   /* 30px */
  --space-32: 2rem;       /* 32px */
  --space-40: 2.5rem;     /* 40px */
  --space-47: 2.938rem;   /* 47px */
  --space-48: 3rem;       /* 48px */
  --space-50: 3.125rem;   /* 50px */
  --space-52: 3.25rem;    /* 52px */
  --space-56: 3.5rem;     /* 56px */
  --space-60: 3.75rem;    /* 60px */
  --space-70: 4.375rem;   /* 70px */
  --space-73: 4.563rem;   /* 73px */
  --space-80: 5rem;       /* 80px */
  --space-100: 6.25rem;   /* 100px */
  --space-130: 8.125rem;  /* 130px */
  --space-145: 9.063rem;  /* 145px */
  --space-150: 9.375rem;  /* 150px */
  --space-179: 11.188rem; /* 179px */
  --space-212: 13.25rem;  /* 212px */
  --space-227: 14.188rem; /* 227px */
  
  /* Container Padding */
  --container-padding-xs: 16px;
  --container-padding-sm: 40px;
  --container-padding-lg: 70px;
  --container-padding-xl: 100px;
  --container-max-width: 1420px;
  
  /* Color Palette - Zinc Scale */
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-500: #71717a;
  --zinc-900: #18181b;
  
  /* Background Colors */
  --bg-primary: #09090b;
  --bg-secondary: #18181b;
  --bg-muted: #71717a;
  
  /* Accent Colors */
  --teal-400: #2dd4bf;
  --amber-500: #f59e0b;
}

/* ================================
   GLOBAL RESET & BASE STYLES
   ================================ */

/* Reset margin, set box-sizing, and apply primary font */
* {
  margin: 0;
  box-sizing: border-box;
  font-family: var(--font-primary);
}

/* ================================
   CONTAINER SYSTEM
   ================================ */

/* Fluid container with responsive padding */
.container-fluid {
  padding-right: var(--container-padding-xs);
  padding-left: var(--container-padding-xs);
}

/* Container padding for small devices (576px+) */
@media (min-width: 576px) {
  .container-fluid {
    padding-right: var(--container-padding-sm);
    padding-left: var(--container-padding-sm);
  }
}

/* Container padding for large devices (992px+) */
@media (min-width: 992px) {
  .container-fluid {
    padding-right: var(--container-padding-lg);
    padding-left: var(--container-padding-lg);
  }
}

/* Container padding for extra large devices (1200px+) */
@media (min-width: 1200px) {
  .container-fluid {
    padding-right: var(--container-padding-xl);
    padding-left: var(--container-padding-xl);
  }
}

/* Container with maximum width constraint */
@media (min-width: 1400px) {
  .container-xxl {
    max-width: var(--container-max-width);
  }
}

/* ================================
   PADDING UTILITIES
   ================================ */

/* Vertical Padding - Top */
.pt-0 { padding-top: 0; }
.pt-8 { padding-top: var(--space-8); }
.pt-10 { padding-top: var(--space-10); }
.pt-15 { padding-top: var(--space-15); }
.pt-20 { padding-top: var(--space-20); }
.pt-30 { padding-top: var(--space-30); }
.pt-40 { padding-top: var(--space-40); }
.pt-48 { padding-top: var(--space-48); }
.pt-50 { padding-top: var(--space-50); }
.pt-60 { padding-top: var(--space-60); }
.pt-70 { padding-top: var(--space-70); }
.pt-73 { padding-top: var(--space-73); }
.pt-100 { padding-top: var(--space-100); }
.pt-130 { padding-top: var(--space-130); }
.pt-145 { padding-top: var(--space-145); }
.pt-150 { padding-top: var(--space-150); }

/* Vertical Padding - Bottom */
.pb-8 { padding-bottom: var(--space-8); }
.pb-10 { padding-bottom: var(--space-10); }
.pb-15 { padding-bottom: var(--space-15); }
.pb-20 { padding-bottom: var(--space-20); }
.pb-30 { padding-bottom: var(--space-30); }
.pb-40 { padding-bottom: var(--space-40); }
.pb-47 { padding-bottom: var(--space-47); }
.pb-50 { padding-bottom: var(--space-50); }
.pb-52 { padding-bottom: var(--space-52); }
.pb-80 { padding-bottom: var(--space-80); }
.pb-100 { padding-bottom: var(--space-100); }
.pb-150 { padding-bottom: var(--space-150); }

/* Horizontal Padding - Left */
.ps-8 { padding-left: var(--space-8); }
.ps-15 { padding-left: var(--space-15); }
.ps-30 { padding-left: var(--space-30); }

/* Horizontal Padding - Right */
.pe-8 { padding-right: var(--space-8); }
.pe-15 { padding-right: var(--space-15); }
.pe-30 { padding-right: var(--space-30); }

/* Symmetric Padding */
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.py-12 {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.py-16 {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.px-12 {
  padding-left: var(--space-12);
  padding-right: var(--space-12);
}

.px-16 {
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}

/* All-direction Padding */
.p-24 {
  padding: var(--space-24);
}

.p-32 {
  padding: var(--space-32);
}

/* ================================
   MARGIN UTILITIES
   ================================ */

/* All-direction Margin */
.m-32 { margin: var(--space-32); }

/* Vertical Margin - Top */
.mt-4 { margin-top: var(--space-2); }
.mt-6 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-20 { margin-top: var(--space-20); }
.mt-24 { margin-top: var(--space-24); }
.mt-25 { margin-top: var(--space-25); }
.mt-30 { margin-top: var(--space-30); }
.mt-32 { margin-top: var(--space-32); }
.mt-40 { margin-top: var(--space-40); }

/* Vertical Margin - Bottom */
.mb-6 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-14 { margin-bottom: var(--space-14); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-25 { margin-bottom: var(--space-25); }
.mb-30 { margin-bottom: var(--space-30); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-40 { margin-bottom: var(--space-40); }
.mb-64 { margin-bottom: var(--space-80); }

/* Horizontal Margin - Left */
.ms-2 { margin-left: var(--space-1); }
.ms-4 { margin-left: var(--space-2); }
.ms-8 { margin-left: var(--space-8); }
.ms-12 { margin-left: var(--space-12); }
.ms-16 { margin-left: var(--space-16); }
.ms-24 { margin-left: var(--space-24); }
.ms-48 { margin-left: var(--space-48); }
.ms-56 { margin-left: var(--space-56); }

/* Horizontal Margin - Right */
.me-2 { margin-right: var(--space-1); }
.me-20 { margin-right: var(--space-20); }

/* ================================
   COLOR UTILITIES
   ================================ */

/* Text Colors */
.zinc-50 { color: var(--zinc-50); }
.zinc-100 { color: var(--zinc-100); }
.zinc-200 { color: var(--zinc-200); }
.zinc-300 { color: var(--zinc-300); }
.zinc-500 { color: var(--zinc-500); }
.zinc-900 { color: var(--zinc-900); }
.teal-400 { color: var(--teal-400); }
.star { color: var(--amber-500); }

/* Background Colors */
.background { background-color: var(--bg-primary); }
.background-900 { background-color: var(--bg-secondary); }
.background-500 { background-color: var(--bg-muted); }
.bg-teal-400 { background-color: var(--teal-400); }

/* ================================
   TYPOGRAPHY UTILITIES
   ================================ */

/* Font Weights */
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }

/* Font Sizes with Line Heights */
.text-xxs {
  font-size: var(--text-xxs);
  line-height: var(--lh-tight);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--lh-tight);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
}

.text-normal {
  font-size: var(--text-normal);
  line-height: var(--lh-normal);
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
}

.text-xl {
  font-size: var(--text-xl);
  line-height: var(--lh-loose);
}

.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--lh-loose);
}

.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--lh-extra);
}

.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--lh-5xl);
}

.text-5xl {
  font-size: var(--text-5xl);
  line-height: var(--lh-5xl);
}

/* ================================
   RESPONSIVE UTILITIES - MEDIUM DEVICES (768px+)
   ================================ */
@media (min-width: 768px) {
  /* Responsive Padding */
  .pe-md-15 { padding-right: var(--space-15); }
  .ps-md-15 { padding-left: var(--space-15); }
  .pe-md-25 { padding-right: var(--space-25); }
  .ps-md-25 { padding-left: var(--space-25); }
  .pt-md-15 { padding-top: var(--space-15); }
  .pb-md-15 { padding-bottom: var(--space-15); }
  .pt-md-50 { padding-top: var(--space-50) !important; }
  .pb-md-50 { padding-bottom: var(--space-50); }
  .pt-md-100 { padding-top: var(--space-100); }
  .pt-md-145 { padding-top: var(--space-145); }
  .pb-md-145 { padding-bottom: var(--space-145); }
  .pt-md-179 { padding-top: var(--space-179); }
  .pb-md-179 { padding-bottom: var(--space-179); }
  .pb-md-212 { padding-bottom: var(--space-212); }

  /* Responsive Margin */
  .mb-md-10 { margin-bottom: var(--space-10) !important; }
}

/* ================================
   RESPONSIVE UTILITIES - LARGE DEVICES (992px+)
   ================================ */
@media (min-width: 992px) {
  /* Responsive Padding */
  .pt-lg-40 { padding-top: var(--space-40); }
  .pb-lg-40 { padding-bottom: var(--space-40); }
  .pt-lg-50 { padding-top: var(--space-50); }
  .pb-lg-50 { padding-bottom: var(--space-50); }
  .pt-lg-60 { padding-top: var(--space-60); }
  .pe-lg-60 { padding-right: var(--space-60); }
  .ps-lg-60 { padding-left: var(--space-60); }
  .pt-lg-100 { padding-top: var(--space-100); }
  .pb-lg-100 { padding-bottom: var(--space-100); }
  .pt-lg-145 { padding-top: var(--space-145); }
  .pb-lg-145 { padding-bottom: var(--space-145); }
  .pt-lg-227 { padding-top: var(--space-227); }
  .pb-lg-227 { padding-bottom: var(--space-227); }

  /* Responsive Margin */
  .me-lg-20 { margin-right: var(--space-20); }
  .me-lg-35 { margin-right: 2.2rem; }
  .ms-lg-35 { margin-left: 2.2rem; }
  .ms-lg-40 { margin-left: var(--space-40); }
}