@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Mexican Pride';
    src: url('/fonts/mexican-pride-by-aspekhndz.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  body {
    background-color: #1C1C1C;
    color: #F5F3F4;
    font-family: 'Open Sans', 'Helvetica', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer utilities {
  /* ==========================================================================
     EXPLICIT DESIGN SYSTEM TYPOGRAPHY TOKENS (From Figma Spec)
     ========================================================================== */

  /* 1. M1 MEXICAN / H1 Mexican - Container relative fluid scaling with Strategy A Stroke */
  .font-m1-mexican {
    font-family: 'Mexican Pride', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.0 !important; /* 100% line height */
    text-transform: uppercase !important;
    
    /* STRATEGY A Refinement: Slightly boosted thickness for smaller container footprints */
    -webkit-text-stroke: 1px #F5F3F4;
  }

  /* 2. H1 -> Open Sans, 48px, 100% LH, 0% tracking */
  .font-h1-sans {
    font-family: 'Open Sans', 'Helvetica', sans-serif !important;
    font-size: 48px !important;
    line-height: 1.0 !important;
    letter-spacing: 0em !important;
  }

  /* 3. H2 -> Open Sans, 32px, 120% LH, 0% tracking */
  .font-h2 {
    font-family: 'Open Sans', 'Helvetica', sans-serif !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    letter-spacing: 0em !important;
  }

  /* 4. H3 -> Open Sans, 24px, 120% LH, 0% tracking */
  .font-h3 {
    font-family: 'Open Sans', 'Helvetica', sans-serif !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: 0em !important;
  }

  /* 5. H3 Mexican -> Mexican Pride, 24px base, clean rendering for subheaders */
  .font-h3-mexican {
    font-family: 'Mexican Pride', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0em !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 6. Description -> Open Sans, 20px, 120% LH, 0% tracking */
  .font-description {
    font-family: 'Open Sans', 'Helvetica', sans-serif !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    letter-spacing: 0em !important;
  }

  /* 7. Text -> Open Sans, 16px, 140% LH, 0% tracking */
  .font-text {
    font-family: 'Open Sans', 'Helvetica', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    letter-spacing: 0em !important;
  }

  /* 8. S TEXT CAPS -> Open Sans, 14px, 120% LH, 0% tracking, Uppercase */
  .font-s-text-caps {
    font-family: 'Open Sans', 'Helvetica', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
  }

  /* 9. S Text -> Open Sans, 14px, 120% LH, 0% tracking */
  .font-s-text {
    font-family: 'Open Sans', 'Helvetica', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0em !important;
  }

  /* 10. XS Text -> Open Sans, 12px, 120% LH, 0% tracking */
  .font-xs-text {
    font-family: 'Open Sans', 'Helvetica', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  /* ==========================================================================
     BRAND GLOBAL COLORS & UI UTILITIES
     ========================================================================== */
  .text-brand-white { color: #F5F3F4 !important; }
  .bg-brand-black   { background-color: #1C1C1C !important; }
  .bg-brand-red     { background-color: #EB1E1E !important; }

  /* Glass CTA circle blur */
  .glass-btn-blur {
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
  }

  /* Isolated indicator rule: Sets 1px line exactly on top of navigation container line bounds */
  .nav-track-line {
    position: absolute;
    top: -1px; 
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 1px;
    background-color: #EB1E1E;
  }

  /* Universal filter trick to force asset content into pure solid #F5F3F4 color */
  .force-brand-white-icon {
    filter: brightness(0) invert(1) sepia(1) hue-rotate(0deg) saturate(0%) brightness(96%);
  }

  /* Disable Strategy A stroke overrides once viewport width reaches standard tablet/desktop ceilings */
  @media (min-width: 640px) {
    .font-m1-mexican {
      -webkit-text-stroke: 0px transparent !important;
    }
  }

  /* ==========================================================================
     PREMIUM SLIDING OPACITY VIEW TRANSITIONS
     ========================================================================== */
  .view-container {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .view-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.97) translateY(8px);
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
  }
  .view-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    position: relative;
    width: 100%;
  }
  #main-bg {
    background-image: url('/images/por-vida-barbering-bkg.jpg');
  }
  /* Default (Home) */
  .bg-state-home { filter: grayscale(0) brightness(0.65) blur(0px); }
  /* Locator State */
  .bg-state-locator { filter: grayscale(1) brightness(0.25) blur(4px); }
  /* Default Fallback */
  .bg-state-default { filter: grayscale(1) brightness(0.2) blur(8px); }
  body[data-view="home"] #main-bg { filter: grayscale(0) brightness(0.65) blur(0px); }
  body[data-view="locator"] #main-bg { filter: grayscale(1) brightness(0.25) blur(4px); }
}