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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;

    --font-oswald: var(--font-oswald);
    --font-permanent-marker: var(--font-permanent-marker);
    --font-playfair-display: var(--font-playfair-display);
    --font-roboto: var(--font-roboto);
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-oswald), sans-serif;
    font-weight: 300;
    /* Ensure smooth font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* All headings use Permanent Marker */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-permanent-marker), cursive;
    font-weight: 400;
    /* Optimize font rendering for headings */
    font-display: swap;
  }

  /* Navigation uses Oswald */
  nav,
  nav a {
    font-family: var(--font-oswald), sans-serif;
    font-weight: 300;
  }

  /* Ensure all text elements use Oswald by default */
  p,
  span,
  div,
  a,
  button,
  input,
  textarea,
  label {
    font-family: var(--font-oswald), sans-serif;
    font-weight: 300;
  }

  /* Specific font classes */
  .font-oswald {
    font-family: var(--font-oswald), sans-serif !important;
    font-weight: 300 !important;
  }

  .font-roboto {
    font-family: var(--font-roboto), sans-serif !important;
  }

  .font-permanent-marker {
    font-family: var(--font-permanent-marker), cursive !important;
  }

  .font-playfair {
    font-family: var(--font-playfair-display), serif !important;
  }

  /* Hero title - using Permanent Marker */
  .hero-title {
    font-family: var(--font-permanent-marker), cursive !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em;
    font-display: swap;
  }

  /* Section titles - using Permanent Marker */
  .section-title {
    font-family: var(--font-permanent-marker), cursive !important;
    font-weight: 400 !important;
    font-display: swap;
  }

  /* Service card titles - using Permanent Marker */
  .service-title {
    font-family: var(--font-permanent-marker), cursive !important;
    font-weight: 400 !important;
    font-display: swap;
  }

  /* Testimonial names - using Permanent Marker */
  .testimonial-name {
    font-family: var(--font-permanent-marker), cursive !important;
    font-weight: 400 !important;
    font-display: swap;
  }

  /* Prevent font flash during load */
  .font-loading {
    visibility: hidden;
  }

  .fonts-loaded .font-loading {
    visibility: visible;
  }

  /* Custom height for larger logos */
  .max-h-30 {
    max-height: 7.5rem; /* 120px */
  }

  /* Text shadow */
  .text-shadow-sm {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  }
}

/* Critical font loading optimization */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/oswald/v53/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZTaR.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}