@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Inter:wght@300..600&family=JetBrains+Mono:wght@300..500&family=Space+Grotesk:wght@300..600&display=swap");

:root {
  --content-max-width: 1360px;
  --content-edge-gap: 32px;

  /* Centralized font tokens */
  --font-brand: "Comfortaa", sans-serif;
  --font-ui: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-title: "Space Grotesk", sans-serif;
  --font-reading: "Inter", sans-serif;
  --font-fallback: Arial, sans-serif;

  /* Centralized typography tokens */
  --tracking-sitewide: 0.04em;
  --weight-reading: 300;
  --weight-reading-strong: 317;
  --weight-title: 340;
  --weight-title-strong: 525;
  --weight-title-heavy: 610;
  --weight-hero: 425;

  /* Centralized text colors */
  --text-primary: #000000;
  --text-secondary: #334155;
  --text-muted: #6b7280;
  --text-inverse: #f7f7f2;
  --text-heading: #0b0b0b;
  --text-body: #181818;
  --text-soft: #6d737e;

  /* Centralized line/border tokens */
  --line-width-thin: 1px;
  --line-color-soft: #d1d5db;
  --line-color-contrast-soft: rgba(8, 12, 20, 0.2);
  --line-color-contrast-mid: rgba(8, 12, 20, 0.32);
  --line-color-contrast-strong: rgba(8, 12, 20, 0.44);
  --line-radius-card: 4px;
  --line-radius-none: 0;
}

body {
  font-family: var(--font-reading, var(--font-ui));
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.main-category-title {
  font-family: var(--font-title, var(--font-ui));
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.05;
  font-weight: var(--weight-reading-strong);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.main-breadcrumb {
  font-family: var(--font-mono, var(--font-ui));
  font-size: clamp(11px, 0.95vw, 14px);
  line-height: 1.2;
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.main-breadcrumb a {
  color: var(--text-primary);
  text-decoration: none;
}

.main-breadcrumb a:hover {
  text-decoration: underline;
}

.main-breadcrumb-sep {
  color: var(--text-primary);
  opacity: 0.55;
}

/* Topbar and menu typography */
.topbar {
  font-family: var(--font-title);
}

.topbar .logo,
.centered-text,
.slogan {
  font-family: var(--font-brand);
  letter-spacing: 0;
}

.topbar .logo {
  font-weight: var(--weight-title-heavy);
}

.lang-switch,
.topbar-button a,
.dropdown .dropbtn,
.dropdown-content a,
.dropdown-submenu > summary,
.mobile-menu,
.mobile-link,
.mobile-sublist a,
.mobile-subgroup > summary,
.mobile-subgroup-links a,
.social-text {
  font-family: var(--font-title);
  letter-spacing: var(--tracking-sitewide);
}

.lang-switch,
.topbar-button a,
.dropdown .dropbtn {
  color: var(--text-inverse);
  font-weight: var(--weight-title);
}

.dropdown-content a,
.dropdown-submenu > summary,
.mobile-close,
.mobile-link,
.mobile-sublist a,
.mobile-subgroup > summary,
.mobile-subgroup-links a {
  color: var(--text-primary);
}

.lang-switch:hover,
.topbar-button a:hover,
.dropdown .dropbtn:hover {
  color: var(--text-inverse);
}

.dropdown-content a:hover,
.dropdown-submenu > summary:hover,
.mobile-link:hover,
.mobile-sublist a:hover,
.mobile-subgroup > summary:hover,
.mobile-subgroup-links a:hover {
  color: #0f172a;
}

.dropdown-submenu > summary,
.dropdown-submenu-links .dropdown-category-link,
.mobile-link,
.mobile-subgroup-links .mobile-subgroup-category,
.social-text {
  font-weight: var(--weight-title-strong);
}

.mobile-sublist a,
.mobile-subgroup > summary,
.mobile-subgroup-links a {
  font-weight: var(--weight-title);
}

.mobile-subgroup > summary::after,
.dropdown-submenu > summary::after {
  font-weight: var(--weight-title);
}

.social-text {
  color: var(--text-secondary);
}

/* About */
.about-description,
.about-contact-line {
  font-family: var(--font-reading);
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.about-contact-label {
  font-weight: var(--weight-reading-strong);
}

.about-contact-links a + a::before {
  color: rgba(0, 0, 0, 0.38);
}

/* Shared detail page */
.detail-details,
.detail-details .description {
  font-family: var(--font-reading);
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

/* Home services section */
.home-services-kicker {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-soft);
}

.home-service-item {
  font-family: var(--font-title);
  font-weight: var(--weight-hero);
  letter-spacing: var(--tracking-sitewide);
  color: #0a0a0a;
}

/* Product category page */
.category-product-media-empty {
  font-family: var(--font-reading);
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-muted);
}

.category-product-name {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.category-product-description {
  font-family: var(--font-reading);
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.category-product-price {
  font-family: var(--font-mono);
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

/* Single product page */
.product-page {
  color: #1f2937;
}

.product-title,
.product-subtitle,
.product-accordion > summary,
.product-accordion-subheading,
.product-related-title,
.related-product-name {
  font-family: var(--font-title);
  font-weight: var(--weight-reading-strong);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.product-price,
.related-product-price {
  font-family: var(--font-mono);
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.product-accordion-content,
.related-product-description,
.related-products-empty,
.related-product-media-empty {
  font-family: var(--font-reading);
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.related-product-media-empty {
  color: var(--text-muted);
}

/* Products index page */
.products-index-categories .product-related-title,
.products-index-best-seller .product-related-title,
.products-index-category-name,
.products-index-best-seller .best-seller-product-name {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.products-index-best-seller .best-seller-product-description {
  font-family: var(--font-reading);
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.products-index-best-seller .best-seller-product-price {
  font-family: var(--font-mono);
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

/* Services and projects index pages */
.section-index-card-title,
.section-index-card-button,
.service-index-card-title,
.project-index-card-title,
.service-index-card-button,
.project-index-card-button {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-heading);
}

.section-index-card-description,
.service-index-card-description,
.project-index-card-description {
  font-family: var(--font-reading);
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-body);
}

/* Materials and colors page */
.materials-material-name,
.materials-points-group h3,
.materials-colors-title {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.materials-description,
.materials-points-group li,
.materials-colors-hint {
  font-family: var(--font-reading);
  font-weight: var(--weight-reading);
  letter-spacing: var(--tracking-sitewide);
  color: var(--text-primary);
}

.materials-swatch-name {
  font-family: var(--font-mono);
  font-weight: var(--weight-reading-strong);
  letter-spacing: var(--tracking-sitewide);
}

.materials-colors-title,
.materials-colors-hint {
  color: var(--text-secondary);
}

@media (min-width: 981px) {
  .main-category-title {
    font-size: 34px;
    line-height: 1.05;
  }

  .main-breadcrumb {
    font-size: 14px;
    line-height: 1.2;
  }
}