@import url("reset.css");
@import url("variables.css");
@import url("tokens.css");
@import url("typography.css");
@import url("layout.css");
@import url("nav.css");
@import url("hero.css");
@import url("components.css");


body {
  margin: 0;
  background-color: var(--color-bg-surface);     /* Light gray background */
  color: var(--color-text-primary);              /* Main body text color */
  font-family: var(--font-body);                 /* Your default text font */
  font-size: var(--fs-body);                     /* 18px from tokens */
  font-weight: var(--fw-regular);                /* 400 from tokens */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
}

h2 {
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading);
}

p.meta {
  font-family: var(--font-meta);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

button {
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
}


/* Hero Section */

.hero-title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: var(--fw-regular);
  }
  

  
  .hero-accent {
    font-family: var(--font-meta);
    font-size: var(--fs-subheadline);
    font-weight: var(--fw-regular);
    color: var(--color-accent);
  }
  
  /* CTA Section */
  .cta-button {
    font-family: var(--font-subheading);
    font-size: var(--fs-button);
    font-weight: var(--fw-semibold);
    color: var(--color-button-text);
  }
  
  .cta-input::placeholder {
    font-family: var(--font-body);
    font-size: var(--fs-button);
    font-weight: var(--fw-semibold);
    color: var(--color-bg-header);
  }
  
  .cta-subtext {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--medium-gray);
  }
  
  .cta-input {
    flex: 1;
    font-size: var(--fs-body);
  }
  
  .cta-button {
    flex: 1;
    font-size: var(--fs-cta-button);
    font-weight: var(--fw-bold);
    align-items: center;
    justify-content: center; /* Centers text horizontally */
    text-align: center; /* Fallback for non-flex environments */ 
    line-height: 2.2;                            /* no added height */
    padding-block: clamp(0.75rem, 2vw, 1rem);  /* fluid vertical padding */
    padding-inline: clamp(1.25rem, 3vw, 2rem); /* fluid horizontal padding */
    padding-inline: 1.5rem;
  }


  
  .cta-input::placeholder {
    color: var(--color-text-muted); /* or var(--dark-charcoal) if you prefer */
    opacity: 1; /* Ensures color is fully applied in all browsers */
  }