/* ==========================================================================
   Sử dựng @layer của css để định nghĩa thứ tự ưu tiên của các styles đồng thời phân nhóm các styles
   ========================================================================== */
@layer reset, system, base, layout, components, utilities;

/* ==========================================================================
   DESIGN SYSTEM
   ========================================================================== */
@layer system {
  :root {
    /* Typography Scale */
    --text-base: 16px;
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2rem;
    /* 32px */
    --text-5xl: 2.25rem;
    /* 36px */
    --text-6xl: 3rem;
    /* 48px */
    --text-7xl: 3.75rem;
    /* 60px */

    /* Line Heights */
    --text-xs-line-height: calc(1 / 0.75);
    /* ~1.333333 */
    --text-sm-line-height: calc(1.25 / 0.875);
    /* ~1.428571 */
    --text-base-line-height: calc(1.5 / 1);
    /* 1.5 */
    --text-lg-line-height: calc(1.75 / 1.125);
    /* ~1.555556 */
    --text-xl-line-height: calc(1.75 / 1.25);
    /* 1.4 */
    --text-2xl-line-height: calc(2 / 1.5);
    /* ~1.333333 */
    --text-3xl-line-height: calc(2.25 / 1.875);
    /* 1.2 */
    --text-4xl-line-height: calc(2.5 / 2.25);
    /* ~1.111111 */
    --text-5xl-line-height: 1;
    --text-6xl-line-height: 1;
    --text-7xl-line-height: 1;

    /* Letter Spacing */
    /* 5% của font size (chiều thu hẹp) */
    --tracking-tighter: -0.05em;
    /* 2.5% của font size (chiều thu hẹp) */
    --tracking-tight: -0.025em;
    /* 2.5% của font size  */
    --tracking-wide: 0.025em;
    /* 10% của font size  */
    --tracking-widest: 0.1em;

    /* Container Sizes */
    /* 320px */
    --container-xs: 20rem;
    /* 384px */
    --container-sm: 24rem;
    /* 448px */
    --container-md: 28rem;
    /* 512px */
    --container-lg: 32rem;
    /* 576px */
    --container-xl: 36rem;
    /* 672px */
    --container-2xl: 42rem;
    /* 768px */
    --container-3xl: 48rem;
    /* 896px */
    --container-4xl: 56rem;
    /* 1024px */
    --container-5xl: 64rem;
    /* 1280px */
    --container-6xl: 72rem;

    /* Border Radius */
    --radius-xs: 0.125rem;
    /* 2px */
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.375rem;
    /* 8px */
    --radius-lg: 0.5rem;
    /* 8px */
    --radius-xl: 0.75rem;
    /* 12px */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-3xl: 1.5rem;
    /* 24px */

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

    /* Shadow */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md:
      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:
      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:
      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --shadow-none: 0 0 rgb(0 0 0 / 0);

    /* Color Palette */
    /* Neutrals & Backgrounds */
    --background: oklch(1 0 0);
    /* #ffffff */
    --foreground: oklch(0.18 0 0);
    /* #0a0a0a */
    --card: oklch(1 0 0);
    /* #ffffff */
    --card-foreground: oklch(0.18 0 0);
    /* #0a0a0a */
    --popover: oklch(1 0 0);
    /* #ffffff */
    --popover-foreground: oklch(0.18 0 0);
    /* #0a0a0a */

    /* Brand & Layout */
    --banner-background: oklch(0.28 0.13 255.45);
    /* #003280 */
    --footer-background: oklch(0.17 0.03 252.62);
    /* #101828 */
    --footer-foreground: oklch(0.68 0.02 249.26);
    /* #99a1af */

    /* Primary Colors */
    --primary: oklch(0.51 0.22 260.67);
    /* #155dfc */
    --primary-alt: oklch(0.72 0.14 250.75);
    /* #51a2ff */
    --primary-foreground: oklch(1 0 0);
    /* #ffffff */
    --ring: oklch(0.51 0.22 260.67);
    /* #155dfc */

    /* Secondary & Muted */
    --secondary: oklch(0.96 0.004 256.32);
    /* #f4f4f5 */
    --secondary-foreground: oklch(0.51 0.22 260.67);
    /* #155dfc */
    --secondary-foreground-alt: oklch(0.28 0.13 255.45);
    /* #003280 */

    --muted: oklch(0.96 0.004 256.32);
    /* #f4f4f5 */
    --muted-foreground: oklch(0.53 0.01 254.12);
    /* #71717b */

    /* Accents & States */
    --accent: oklch(0.967 0.001 286.375);
    --accent-foreground: oklch(0.21 0.006 285.885);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);

    /* UI Elements */
    --border: oklch(0.92 0.005 255.31);
    /* #e4e4e7 */
    --input: oklch(0.92 0.005 255.31);
    /* #e4e4e7 */

    /* Charts */
    --chart-1: oklch(0.59 0.26 27.27);
    /* #fc1515 */
    --chart-2: oklch(0.44 0.3 301.12);
    /* #9810fa */
    --chart-3: oklch(0.6 0.2 154.51);
    /* #00a63e */
    --chart-4: oklch(0.81 0.18 80.76);
    /* #ffb900 */
    --chart-5: oklch(0.74 0.19 66.8);
    /* #fe9a00 */
    --chart-6: oklch(0.646 0.222 41.116);

    /* Toast (Notifications) */
    /* Use for toast, flash alert */
    --toast-bg: var(--background);
    --toast-border-color: var(--border);
    --toast-color: var(--foreground);
    --toast-icon-color: var(--muted);

    /* Toast Variants */
    /* #f0fdf4 */
    --toast-success-bg: oklch(0.9819 0.0181 155.83);
    /* #86efac */
    --toast-success-border: oklch(0.8712 0.1363 154.45);
    /* #14532d */
    --toast-success-color: oklch(0.3925 0.0896 152.54);
    /* #16a34a */
    --toast-success-icon: oklch(0.6271 0.1699 149.21);

    /* #fef2f2 */
    --toast-error-bg: oklch(0.9705 0.0129 17.38);
    /* #fca5a5 */
    --toast-error-border: oklch(0.8077 0.1035 19.57);
    /* #7f1d1d */
    --toast-error-color: oklch(0.3958 0.1331 25.72);
    /* #dc2626 */
    --toast-error-icon: oklch(0.5771 0.2152 27.33);

    /* #fffbeb */
    --toast-warning-bg: oklch(0.9869 0.0214 95.28);
    /* #fcd34d */
    --toast-warning-border: oklch(0.879 0.1534 91.61);
    /* #78350f */
    --toast-warning-color: oklch(0.4137 0.1054 45.9);
    /* #d97706 */
    --toast-warning-icon: oklch(0.6658 0.1574 58.32);

    /* #eff6ff */
    --toast-info-bg: oklch(0.9705 0.0142 254.6);
    /* #93c5fd */
    --toast-info-border: oklch(0.8091 0.0956 251.81);
    /* #1e3a8a */
    --toast-info-color: oklch(0.3791 0.1378 265.52);
    /* #2563eb */
    --toast-info-icon: oklch(0.5461 0.2152 262.88);

    /* Gradients */
    --blue-gradient: linear-gradient(
      0deg,
      rgba(28, 57, 142, 0.95) 0%,
      rgba(28, 57, 142, 0.5) 50%,
      rgba(0, 0, 0, 0) 100%
    );
    --green-gradient: linear-gradient(
      0deg,
      rgba(13, 84, 43, 0.95) 0%,
      rgba(13, 84, 43, 0.5) 50%,
      rgba(0, 0, 0, 0) 100%
    );
    --pink-gradient: linear-gradient(
      135deg,
      rgba(152, 16, 250, 1) 0%,
      rgba(230, 0, 118, 1) 100%
    );
    --purple-gradient: linear-gradient(
      0deg,
      rgba(89, 22, 139, 0.95) 0%,
      rgba(89, 22, 139, 0.5) 50%,
      rgba(0, 0, 0, 0) 100%
    );
    --black-gradient: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0) 100%
    );
    --blue-from-left-gradient: linear-gradient(
      90deg,
      rgba(28, 57, 142, 1) 0%,
      rgba(25, 60, 184, 0.7) 50%,
      rgba(0, 0, 0, 0.2) 100%
    );
  }
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
  :root {
    --toast-bg: oklch(0.2273 0.0038 286.09);
    --toast-border-color: color-mix(
      in oklab,
      oklch(0.2273 0.0038 286.09) 10%,
      white 30%
    );
    --toast-color: var(--background);
    --toast-icon-color: var(--background);

    /* Variants */
    /* #052e16 */
    --toast-success-bg: oklch(0.2664 0.0628 152.93);
    /* #166534 */
    --toast-success-border: oklch(0.4479 0.1083 151.33);
    /* #bbf7d0 */
    --toast-success-color: oklch(0.925 0.0806 155.99);
    /* #4ade80 */
    --toast-success-icon: oklch(0.925 0.0806 155.99);

    /* #450a0a */
    --toast-error-bg: oklch(0.2575 0.0886 26.04);
    /* #991b1b */
    --toast-error-border: oklch(0.4437 0.1613 26.9);
    /* #fecaca */
    --toast-error-color: oklch(0.8845 0.0593 18.33);
    /* #f87171 */
    --toast-error-icon: oklch(0.8845 0.0593 18.33);

    /* #422006 */
    --toast-warning-bg: oklch(0.2857 0.0639 53.81);
    /* #92400e */
    --toast-warning-border: oklch(0.4732 0.1247 46.2);
    /* #fde68a */
    --toast-warning-color: oklch(0.9243 0.1151 95.75);
    /* #fbbf24 */
    --toast-warning-icon: oklch(0.9243 0.1151 95.75);

    /* #172554 */
    --toast-info-bg: oklch(0.2823 0.0874 267.94);
    /* #1e40af */
    --toast-info-border: oklch(0.4244 0.1809 265.64);
    /* #bfdbfe */
    --toast-info-color: oklch(0.8823 0.0571 254.13);
    /* #60a5fa */
    --toast-info-icon: oklch(0.8823 0.0571 254.13);
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0 solid;
    font-size: var(--text-base);
    font-weight: var(--fw-normal);
    line-height: var(--text-base-line-height);
    font-family:
      "Be Vietnam Pro",
      "Inter",
      "Roboto",
      system-ui,
      -apple-system,
      sans-serif;
  }

  body {
    position: relative;
  }

  img,
  video {
    color: inherit;
    max-width: 100%;
    height: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  ul,
  ol {
    list-style-type: none;
  }

  a {
    position: relative;
    text-decoration: none;
    color: inherit;
    font-size: inherit;
    transition: all 0.25s ease;
    padding-bottom: 1px;
  }

  button {
    cursor: pointer;
    border: none;
    background: transparent;
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  .container {
    width: 1440px;
    max-width: 1440px;
    margin: 0 auto;
  }

  @media screen and (min-width: 1280px) {
    .container {
      width: 1280px;
      max-width: 1280px;
    }
  }

  .container-wrapper {
    width: 1136px;
    max-width: 1136px;
    margin: 0 auto;
  }

  .container-fluid {
    width: 100%;
    height: fit-content;
    padding: 0 1rem;
    margin: 0 auto;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
}

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */
@layer layout {
  /* Display */
  .hidden {
    display: none !important;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .inline-block {
    display: inline-block;
  }

  /* Position */
  .fixed {
    position: fixed;
  }

  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  /* Overflow */
  .overflow-hidden {
    overflow: hidden;
  }

  /* Object Fit */
  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  /* Z-Index */
  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  /* Sizing */
  .w-full {
    width: 100%;
  }

  .h-full {
    height: 100%;
  }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
@layer utilities {
  /* Flexbox Direction */
  .flex-row {
    flex-direction: row;
  }

  .flex-row-reverse {
    flex-direction: row-reverse;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  /* Justify Content */
  .justify-center {
    justify-content: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-end {
    justify-content: flex-end;
  }

  /* Align Items */
  .items-start {
    align-items: flex-start;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-center {
    align-items: center;
  }

  .items-stretch {
    align-items: stretch;
  }

  /* Align Self */
  .self-stretch {
    align-self: stretch;
  }

  /* Flex Properties */
  .flex-1 {
    flex: 1 1 0%;
  }

  .flex-initial {
    flex: 0 1 auto;
  }

  .flex-auto {
    flex: 1 1 auto;
  }

  .flex-none {
    flex: none;
  }

  .flex-grow {
    flex-grow: 1;
  }

  .flex-grow-0 {
    flex-grow: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  /* Flex Wrap */
  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  /* Align Items - Additional */
  .items-baseline {
    align-items: baseline;
  }

  /* Justify Content - Additional */
  .justify-start {
    justify-content: flex-start;
  }

  /* Align Content (for multi-line flex containers) */
  .content-center {
    align-content: center;
  }

  .content-start {
    align-content: flex-start;
  }

  .content-end {
    align-content: flex-end;
  }

  .content-between {
    align-content: space-between;
  }

  .content-around {
    align-content: space-around;
  }

  .content-evenly {
    align-content: space-evenly;
  }

  .content-stretch {
    align-content: stretch;
  }

  /* Gap */
  .gap-0 {
    gap: 0;
  }

  .gap-1 {
    gap: 0.25rem;
  }

  .gap-2 {
    gap: 0.5rem;
  }

  .gap-3 {
    gap: 0.75rem;
  }

  .gap-4 {
    gap: 1rem;
  }

  .gap-5 {
    gap: 1.25rem;
  }

  .gap-6 {
    gap: 1.5rem;
  }

  .gap-8 {
    gap: 2rem;
  }

  .gap-10 {
    gap: 2.5rem;
  }

  .gap-12 {
    gap: 3rem;
  }

  .gap-14 {
    gap: 3.5rem;
  }

  .gap-16 {
    gap: 4rem;
  }

  /* Gap X/Y */
  .gap-x-0,
  .gap-y-0 {
    column-gap: 0;
    row-gap: 0;
  }

  .gap-x-1,
  .gap-y-1 {
    column-gap: 0.25rem;
    row-gap: 0.25rem;
  }

  .gap-x-2,
  .gap-y-2 {
    column-gap: 0.5rem;
    row-gap: 0.5rem;
  }

  .gap-x-3,
  .gap-y-3 {
    column-gap: 0.75rem;
    row-gap: 0.75rem;
  }

  .gap-x-4,
  .gap-y-4 {
    column-gap: 1rem;
    row-gap: 1rem;
  }

  .gap-x-5,
  .gap-y-5 {
    column-gap: 1.25rem;
    row-gap: 1.25rem;
  }

  .gap-x-6,
  .gap-y-6 {
    column-gap: 1.5rem;
    row-gap: 1.5rem;
  }

  .gap-x-8,
  .gap-y-8 {
    column-gap: 2rem;
    row-gap: 2rem;
  }

  .gap-x-10,
  .gap-y-10 {
    column-gap: 2.5rem;
    row-gap: 2.5rem;
  }

  .gap-x-12,
  .gap-y-12 {
    column-gap: 3rem;
    row-gap: 3rem;
  }

  /* Grid Template */
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  /* Grid Placement */
  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .row-span-2 {
    grid-row: span 2 / span 2;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .row-start-2 {
    grid-row-start: 2;
  }

  .col-start-3 {
    grid-column-start: 3;
  }

  /* Typography - Font Size */
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--text-xs-line-height);
  }

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

  .text-md {
    font-size: var(--text-base);
    line-height: var(--text-md-line-height);
  }

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

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

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

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

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

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

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

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

  /* Font Family */
  .font-mono {
    font-family: monospace;
  }

  /* Typography - Font Weight */
  .font-light {
    font-weight: var(--fw-light);
  }

  .font-normal {
    font-weight: var(--fw-normal);
  }

  .font-medium {
    font-weight: var(--fw-medium);
  }

  .font-semibold {
    font-weight: var(--fw-semibold);
  }

  .font-bold {
    font-weight: var(--fw-bold);
  }

  /* Typography - Text Transform */
  .uppercase {
    text-transform: uppercase;
  }

  .lowercase {
    text-transform: lowercase;
  }

  /* Typography - Text Align */
  .text-center {
    text-align: center;
  }

  /* Borders */
  .border {
    border: 1px solid var(--border);
  }

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

  /* Interactive */
  .focus\:border-primary:focus {
    border-color: var(--primary);
  }

  .focus\:outline-none:focus {
    outline: none;
  }

  /* Shadow */
  .shadow-sm {
    box-shadow: var(--shadow-sm);
  }

  .shadow {
    box-shadow: var(--shadow);
  }

  .shadow-md {
    box-shadow: var(--shadow-md);
  }

  .shadow-lg {
    box-shadow: var(--shadow-lg);
  }

  .shadow-xl {
    box-shadow: var(--shadow-xl);
  }

  .shadow-2xl {
    box-shadow: var(--shadow-2xl);
  }

  .shadow-inner {
    box-shadow: var(--shadow-inner);
  }

  .shadow-none {
    box-shadow: var(--shadow-none);
  }

  /* Sizing - Max Width */
  .max-w-sm {
    max-width: 24rem;
  }

  .max-w-md {
    max-width: 28rem;
  }

  .max-w-lg {
    max-width: 32rem;
  }

  .max-w-xl {
    max-width: 36rem;
  }

  .max-w-2xl {
    max-width: 42rem;
  }

  /* Height */
  .h-12 {
    height: 3rem;
  }

  /* Border Radius */
  .rounded-xs {
    border-radius: var(--radius-xs);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-full {
    border-radius: calc(infinity * 1px);
  }

  /* Spacing - Margin */
  .m-1 {
    margin: 0.25rem;
  }

  .m-2 {
    margin: 0.5rem;
  }

  .m-3 {
    margin: 0.75rem;
  }

  .m-4 {
    margin: 1rem;
  }

  .m-5 {
    margin: 1.25rem;
  }

  .m-6 {
    margin: 1.5rem;
  }

  .m-8 {
    margin: 2rem;
  }

  .m-10 {
    margin: 2.5rem;
  }

  .m-12 {
    margin: 3rem;
  }

  .m-16 {
    margin: 4rem;
  }

  .mt-1 {
    margin-top: 0.25rem;
  }

  .mt-2 {
    margin-top: 0.5rem;
  }

  .mt-3 {
    margin-top: 0.75rem;
  }

  .mt-4 {
    margin-top: 1rem;
  }

  .mt-5 {
    margin-top: 1.25rem;
  }

  .mt-6 {
    margin-top: 1.5rem;
  }

  .mt-8 {
    margin-top: 2rem;
  }

  .mt-10 {
    margin-top: 2.5rem;
  }

  .mt-12 {
    margin-top: 3rem;
  }

  .mt-16 {
    margin-top: 4rem;
  }

  .mb-1 {
    margin-bottom: 0.25rem;
  }

  .mb-2 {
    margin-bottom: 0.5rem;
  }

  .mb-3 {
    margin-bottom: 0.75rem;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }

  .mb-5 {
    margin-bottom: 1.25rem;
  }

  .mb-6 {
    margin-bottom: 1.5rem;
  }

  .mb-8 {
    margin-bottom: 2rem;
  }

  .mb-10 {
    margin-bottom: 2.5rem;
  }

  .mb-12 {
    margin-bottom: 3rem;
  }

  .mb-16 {
    margin-bottom: 4rem;
  }

  .ml-1 {
    margin-left: 0.25rem;
  }

  .ml-2 {
    margin-left: 0.5rem;
  }

  .ml-3 {
    margin-left: 0.75rem;
  }

  .ml-4 {
    margin-left: 1rem;
  }

  .ml-5 {
    margin-left: 1.25rem;
  }

  .ml-6 {
    margin-left: 1.5rem;
  }

  .ml-8 {
    margin-left: 2rem;
  }

  .ml-10 {
    margin-left: 2.5rem;
  }

  .ml-12 {
    margin-left: 3rem;
  }

  .ml-16 {
    margin-left: 4rem;
  }

  .mr-1 {
    margin-right: 0.25rem;
  }

  .mr-2 {
    margin-right: 0.5rem;
  }

  .mr-3 {
    margin-right: 0.75rem;
  }

  .mr-4 {
    margin-right: 1rem;
  }

  .mr-5 {
    margin-right: 1.25rem;
  }

  .mr-6 {
    margin-right: 1.5rem;
  }

  .mr-8 {
    margin-right: 2rem;
  }

  .mr-10 {
    margin-right: 2.5rem;
  }

  .mr-12 {
    margin-right: 3rem;
  }

  .mr-16 {
    margin-right: 4rem;
  }

  .mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }

  .mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  .mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .mx-10 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }

  .mx-12 {
    margin-left: 3rem;
    margin-right: 3rem;
  }

  .mx-16 {
    margin-left: 4rem;
    margin-right: 4rem;
  }

  .my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .my-12 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .space-x-1 > * + * {
    margin-left: 0.25rem;
  }
  .space-x-2 > * + * {
    margin-left: 0.5rem;
  }
  .space-x-3 > * + * {
    margin-left: 0.75rem;
  }
  .space-x-4 > * + * {
    margin-left: 1rem;
  }
  .space-x-5 > * + * {
    margin-left: 1.25rem;
  }
  .space-x-6 > * + * {
    margin-left: 1.5rem;
  }
  .space-x-8 > * + * {
    margin-left: 2rem;
  }
  .space-x-10 > * + * {
    margin-left: 2.5rem;
  }
  .space-x-12 > * + * {
    margin-left: 3rem;
  }
  .space-x-16 > * + * {
    margin-left: 4rem;
  }

  .space-y-1 > * + * {
    margin-top: 0.25rem;
  }
  .space-y-2 > * + * {
    margin-top: 0.5rem;
  }
  .space-y-3 > * + * {
    margin-top: 0.75rem;
  }
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  .space-y-5 > * + * {
    margin-top: 1.25rem;
  }
  .space-y-6 > * + * {
    margin-top: 1.5rem;
  }
  .space-y-8 > * + * {
    margin-top: 2rem;
  }
  .space-y-10 > * + * {
    margin-top: 2.5rem;
  }
  .space-y-12 > * + * {
    margin-top: 3rem;
  }
  .space-y-16 > * + * {
    margin-top: 4rem;
  }

  /* Spacing - Padding */
  .p-1 {
    padding: 0.25rem;
  }

  .p-2 {
    padding: 0.5rem;
  }

  .p-3 {
    padding: 0.75rem;
  }

  .p-4 {
    padding: 1rem;
  }

  .p-5 {
    padding: 1.25rem;
  }

  .p-6 {
    padding: 1.5rem;
  }

  .p-8 {
    padding: 2rem;
  }

  .p-10 {
    padding: 2.5rem;
  }

  .p-12 {
    padding: 3rem;
  }

  .p-16 {
    padding: 4rem;
  }

  .pt-1 {
    padding-top: 0.25rem;
  }

  .pt-2 {
    padding-top: 0.5rem;
  }

  .pt-3 {
    padding-top: 0.75rem;
  }

  .pt-4 {
    padding-top: 1rem;
  }

  .pt-5 {
    padding-top: 1.25rem;
  }

  .pt-6 {
    padding-top: 1.5rem;
  }

  .pt-8 {
    padding-top: 2rem;
  }

  .pt-10 {
    padding-top: 2.5rem;
  }

  .pt-12 {
    padding-top: 3rem;
  }

  .pt-16 {
    padding-top: 4rem;
  }

  .pb-1 {
    padding-bottom: 0.25rem;
  }

  .pb-2 {
    padding-bottom: 0.5rem;
  }

  .pb-3 {
    padding-bottom: 0.75rem;
  }

  .pb-4 {
    padding-bottom: 1rem;
  }

  .pb-5 {
    padding-bottom: 1.25rem;
  }

  .pb-6 {
    padding-bottom: 1.5rem;
  }

  .pb-8 {
    padding-bottom: 2rem;
  }

  .pb-10 {
    padding-bottom: 2.5rem;
  }

  .pb-12 {
    padding-bottom: 3rem;
  }

  .pb-16 {
    padding-bottom: 4rem;
  }

  .pl-1 {
    padding-left: 0.25rem;
  }

  .pl-2 {
    padding-left: 0.5rem;
  }

  .pl-3 {
    padding-left: 0.75rem;
  }

  .pl-4 {
    padding-left: 1rem;
  }

  .pl-5 {
    padding-left: 1.25rem;
  }

  .pl-6 {
    padding-left: 1.5rem;
  }

  .pl-8 {
    padding-left: 2rem;
  }

  .pl-10 {
    padding-left: 2.5rem;
  }

  .pl-12 {
    padding-left: 3rem;
  }

  .pl-16 {
    padding-left: 4rem;
  }

  .pr-1 {
    padding-right: 0.25rem;
  }

  .pr-2 {
    padding-right: 0.5rem;
  }

  .pr-3 {
    padding-right: 0.75rem;
  }

  .pr-4 {
    padding-right: 1rem;
  }

  .pr-5 {
    padding-right: 1.25rem;
  }

  .pr-6 {
    padding-right: 1.5rem;
  }

  .pr-8 {
    padding-right: 2rem;
  }

  .pr-10 {
    padding-right: 2.5rem;
  }

  .pr-12 {
    padding-right: 3rem;
  }

  .pr-16 {
    padding-right: 4rem;
  }

  .px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  /* ========== Reset Utilities (m-0, p-0) ========== */
  .m-0 {
    margin: 0;
  }

  .mt-0 {
    margin-top: 0;
  }

  .mb-0 {
    margin-bottom: 0;
  }

  .ml-0 {
    margin-left: 0;
  }

  .mr-0 {
    margin-right: 0;
  }

  .mx-0 {
    margin-left: 0;
    margin-right: 0;
  }

  .my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .p-0 {
    padding: 0;
  }

  .pt-0 {
    padding-top: 0;
  }

  .pb-0 {
    padding-bottom: 0;
  }

  .pl-0 {
    padding-left: 0;
  }

  .pr-0 {
    padding-right: 0;
  }

  .px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ========== Background & Border Utilities ========== */
  .bg-transparent {
    background-color: transparent;
  }

  .border-0 {
    border: 0;
  }

  .border-1 {
    border: 1px solid var(--border);
  }
}