:root {

  --font-heading: 'acumin-pro', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
  --font-body: 'tablet-gothic', 'Roboto', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;

  /* Gotham weights you have */
  --fw-300: 300;
  --fw-400: 400;
  --fw-700: 700;
  --fw-800: 800;

  /* Fluid Typography Scale */
  /* min-size, ideal-size (fluid), max-size */
  --font-size-h1: clamp(2.5rem, 6vw + 1rem, 6rem);
  --font-size-h2: clamp(2rem, 4.5vw + 1rem, 4.5rem);
  --font-size-h3: clamp(1.75rem, 3.5vw + 1rem, 3rem);
  --font-size-h4: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  --font-size-h5: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
  --font-size-h6: clamp(1rem, 0.75vw + 1rem, 1.25rem);
  --font-size-body: clamp(1rem, 0.5vw + 1rem, 1.125rem);

  --primary-color: #cc5500;
  --secondary-color: #33302e;
  --accent-color: #a0968d;
  --headline-color: #33302e;
  --body-color: #33302e;
  --dark-color: #33302e;
  --light-color: #f9f7f5;
  --white-color: #f9f7f5;

  /* Service-specific colors */
  --service-web-design: #4f7942;
  --service-web-development: #e7a220;
  --service-web-maintenance: #5d8b8e;
  --service-digital-marketing: #d04040;
}

/* font css */
/* Optional: snappy paint while kit loads */
html.wf-loading body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
html.wf-active body {
  font-family: var(--font-body);
}

/* Global defaults */
body {
  font-family: var(--font-body);
  font-weight: var(--fw-400);
  font-size: var(--fs-body);
}

/* Block: Typography */
.typography {
  /* You can set a default font-family here for the entire block */
  font-family: 'Your Chosen Font', sans-serif;
  line-height: 1.5; /* A good default for readability */
}

/* Modifiers for Headings */
.typography--h1 {
  font-size: var(--font-size-h1);
  font-weight: bold; /* Or other specific font weights */
}

.typography--h2 {
  font-size: var(--font-size-h2);
}

.typography--h3 {
  font-size: var(--font-size-h3);
}

.typography--h4 {
  font-size: var(--font-size-h4);
}

.typography--h5 {
  font-size: var(--font-size-h5);
}

.typography--h6 {
  font-size: var(--font-size-h6);
}

/* Modifier for Body Text */
.typography--body {
  font-size: var(--font-size-body);
}

/* Optional: Additional Modifiers */
/* If you want different styles for different contexts */
.typography--bold {
  font-weight: bold;
}

.typography--italic {
  font-style: italic;
}
How

/* Utilities — apply anywhere (blocks, Spectra, etc.) */
.font-heading {
  font-family: var(--font-heading) !important;
}
.font-body {
  font-family: var(--font-body) !important;
}

/* Weight helpers (match your kit exactly) */
.fw-300 { font-weight: var(--fw-300) !important; }
.fw-400 { font-weight: var(--fw-400) !important; }
.fw-700 { font-weight: var(--fw-700) !important; }
.fw-800 {
  font-weight: var(--fw-800) !important;
}

/* Style helpers */
.is-italic{ font-style: italic !important; }
.is-normal{ font-style: normal !important; }

/* (Nice-to-have) Font rendering */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* buttons css */

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Default button (primary) */
.button--primary {
  background-color: var(--uicore-primary-color);
  color: var(--uicore-white-color);
}

.button--primary:hover {
  background-color: #c94910; /* slightly darker */
}

/* Secondary button */
.button--secondary {
  background-color: var(--uicore-secondary-color);
  color: var(--uicore-white-color);
}

/* Service button overrides */
.button--web-design {
  --uicore-primary-color: var(--service-web-design);
}

.button--web-development {
  --uicore-primary-color: var(--service-web-development);
}

.button--web-maintenance {
  --uicore-primary-color: var(--service-web-maintenance);
}

.button--digital-marketing {
  --uicore-primary-color: var(--service-digital-marketing);
}

/* section css */

.section {
  padding: 4rem 2rem;
}

.section__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--uicore-headline-color);
  margin-bottom: 1.5rem;
}

.section__text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--uicore-body-color);
  max-width: 700px;
}

/* Service-specific section variants */
.section--web-design {
  background-color: var(--service-web-design);
  color: var(--uicore-white-color);
}

.section--web-development {
  background-color: var(--service-web-development);
  color: var(--uicore-white-color);
}

.section--web-maintenance {
  background-color: var(--service-web-maintenance);
  color: var(--uicore-white-color);
}

.section--digital-marketing {
  background-color: var(--service-digital-marketing);
  color: var(--uicore-secondary-color); /* dark text */
}

/* card css */
.card {
  border-radius: 8px;
  padding: 2rem;
  background-color: var(--uicore-light-color);
  color: var(--uicore-body-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.card__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--uicore-headline-color);
}

.card__text {
  font-size: 1rem;
  line-height: 1.6;
}

/* Service modifiers */
.card--web-design {
  border-top: 4px solid var(--service-web-design);
}

.card--web-development {
  border-top: 4px solid var(--service-web-development);
}

.card--web-maintenance {
  border-top: 4px solid var(--service-web-maintenance);
}

.card--digital-marketing {
  border-top: 4px solid var(--service-digital-marketing);
}