/* =========================================================
   Root Variables
   ========================================================= */

   :root {
    --font-inter: "Inter", sans-serif;
    --font-poppins: "Poppins", sans-serif;
    --font-bebas: "Bebas Neue", sans-serif;
    --font-helvetica: "Helvetica Neue", sans-serif;
  
    --color-primary: #1487FC;
    --color-secondary: #F9FAFB;
    --color-tertiary: #198754;
    --color-quaternary: #DC3545;
    --color-bg-footer: #E8F3FF;
  
    --font-22px: 1.375rem;
    --font-20px: 1.25rem;
    --font-18px: 1.125rem;
    --font-16px: 1rem;
    --font-14px: 0.875rem;
    --font-12px: 0.75rem;
  
    --tracking-4: 0.04em;
    --container-width: 1200px;
  }
  
  /* =========================================================
     Base Styles
     ========================================================= */
  
  body {
    font-family: var(--font-inter);
    color: #111827;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-poppins);
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  /* =========================================================
     Font Utilities (RESTORED)
     ========================================================= */
  
  .font-inter {
    font-family: var(--font-inter);
  }
  
  .font-poppins {
    font-family: var(--font-poppins);
  }
  
  .font-bebas {
    font-family: var(--font-bebas);
  }
  
  .font-helvetica {
    font-family: var(--font-helvetica);
  }
  
  /* =========================================================
     Text Size Utilities (RESTORED)
     ========================================================= */
  
  .text-font-22px { font-size: var(--font-22px); }
  .text-font-20px { font-size: var(--font-20px); }
  .text-font-18px { font-size: var(--font-18px); }
  .text-font-16px { font-size: var(--font-16px); }
  .text-font-14px { font-size: var(--font-14px); }
  .text-font-12px { font-size: var(--font-12px); }
  
  /* =========================================================
     Color Utilities (RESTORED)
     ========================================================= */
  
  .bg-primary {
    background-color: var(--color-primary);
  }
  
  .text-primary {
    color: var(--color-primary);
  }
  
  .bg-footer {
    background-color: var(--color-bg-footer);
  }
  
  /* =========================================================
     Tracking / Letter Spacing
     ========================================================= */
  
  .tracking-4 {
    letter-spacing: var(--tracking-4);
  }
  
  /* =========================================================
     Container Override
     ========================================================= */
  
    .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
  }
  /*
  .container {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
    */
  
  /* =========================================================
     Component Styles
     ========================================================= */
  
  .active_button {
    background-color: var(--color-primary);
    color: #ffffff;
    border-radius: 8px;
  }
  
  .modal-content {
    animation: slide-in 0.5s ease-out;
  }
  
  @keyframes slide-in {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* =========================================================
     Alpine.js
     ========================================================= */
  
  [x-cloak] {
    display: none !important;
  }