@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Syne:wght@600;700;800&display=swap');
@import url('./horizontal-showroom.css');

/*
 * TK Web Studio shared type + brand shell.
 * Keep this file intentionally small: page-specific layout belongs in that page's
 * stylesheet. This prevents the public site from accumulating competing themes.
 */
:root {
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --tkws-ink: #171717;
  --tkws-ink-2: #242424;
  --tkws-blue: #d84418;
  --tkws-cyan: #ff754b;
  --tkws-text: #f5f9ff;
  --tkws-muted: #b8c8dc;
  --tkws-line: rgba(255,117,75,.24);
}

html body,
html body button,
html body input,
html body textarea,
html body select {
  font-family: var(--font-body);
}

html body :is(h1, h2, h3, .brand, .display-type, .home-fit__price) {
  font-family: var(--font-display);
}

html body :is(.eyebrow, .pill, .workMeta, .project-tech, .btn, .nav, .tag, .fine, p, li) {
  font-family: var(--font-body);
}

/* One predictable logo size across Home, Showroom and the rest of the public site. */
html body .header .brand img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  flex: 0 0 44px !important;
  object-fit: contain !important;
}

/* Keep the shared navigation legible and stop page-level experiments stretching it. */
html body .header__inner {
  min-height: 72px;
}

html body .nav a,
html body .tk-nav-services__link,
html body .tk-nav-services__toggle {
  font-family: var(--font-body);
}

/* A calmer, usable footer layout at laptop widths and below. */
@media (max-width: 980px) {
  html body .footer__inner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 28px 0 !important;
    text-align: center !important;
  }

  html body .footer__links {
    justify-content: center !important;
  }

  html body .footer-copy {
    justify-self: center !important;
    max-width: 40ch;
    text-align: center !important;
  }
}

@media (max-width: 700px) {
  html body .header__inner {
    min-height: 64px !important;
  }

  html body .header .brand img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    flex-basis: 40px !important;
  }
}