/* src/css/components/button/general.css */
.btn {
  border: none;
  border-radius: var(--radius-pill);
  padding-block-start: var(--space-small);
  padding-block-end: var(--space-small);
  padding-inline-start: var(--space-medium);
  padding-inline-end: var(--space-medium);
  font: inherit;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-normal);
}
.btn:active {
  transform: translateY(0);
}

/* src/css/components/button/primary.css */
.btnPrimary {
  background: linear-gradient(135deg, var(--sheet-accent), var(--btn-primary-end));
}
.btnPrimary:hover {
  background: linear-gradient(135deg, var(--sheet-accent-hover), var(--btn-primary-hover-end));
  box-shadow: var(--shadow-button-primary);
  transform: translateY(-1px);
}

/* src/css/index.css */
.homeHero {
  background:
    radial-gradient(circle at 20% 50%, var(--sheet-bg-radial-1), transparent 50%),
    radial-gradient(circle at 80% 10%, var(--sheet-bg-radial-2), transparent 45%),
    linear-gradient(150deg, var(--sheet-bg-gradient-start), var(--sheet-bg-gradient-end));
  border-block-end: 1px solid var(--sheet-line);
}
.homeHeroInner {
  max-inline-size: var(--content-max-width);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-block-start: var(--space-xxxlarge);
  padding-block-end: var(--space-xxxlarge);
  padding-inline-start: var(--space-xlarge);
  padding-inline-end: var(--space-xlarge);
}
.homeEyebrow {
  margin-block-start: 0;
  margin-block-end: var(--space-small);
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sheet-muted);
}
.homeHeroTitle {
  margin-block-start: 0;
  margin-block-end: var(--space-medium);
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  color: var(--sheet-ink);
}
.homeHeroSubtitle {
  margin-block-start: 0;
  margin-block-end: var(--space-xlarge);
  margin-inline-start: 0;
  margin-inline-end: 0;
  max-inline-size: 52ch;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--sheet-muted);
}
.homeCta {
  font-size: 1rem;
  padding-block-start: var(--space-medium);
  padding-block-end: var(--space-medium);
  padding-inline-start: var(--space-xlarge);
  padding-inline-end: var(--space-xlarge);
}
.homeTools {
  padding-block-start: var(--space-xxlarge);
  padding-block-end: var(--space-xxlarge);
}
.homeToolsInner {
  max-inline-size: var(--content-max-width);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: var(--space-xlarge);
  padding-inline-end: var(--space-xlarge);
}
.homeToolsTitle {
  margin-block-start: 0;
  margin-block-end: var(--space-xlarge);
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-size: 1.5rem;
  color: var(--sheet-ink);
}
.homeToolsGrid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-large);
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block-start: 0;
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
}
.toolCard {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-medium);
  background: var(--color-surface);
  border: 1px solid var(--sheet-line);
  border-radius: var(--radius-xl);
  padding-block-start: var(--space-large);
  padding-block-end: var(--space-large);
  padding-inline-start: var(--space-large);
  padding-inline-end: var(--space-large);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.toolCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 48px rgba(58, 34, 16, 0.16);
}
.toolCardIcon {
  font-size: 2.2rem;
  line-height: 1;
}
.toolCardBody {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-small);
  flex: 1;
}
.toolCardTitle {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-size: 1.15rem;
  color: var(--sheet-ink);
}
.toolCardDesc {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--sheet-muted);
  flex: 1;
}
.toolCardLink {
  align-self: flex-start;
  margin-block-start: var(--space-small);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sheet-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.toolCardLink:hover {
  color: var(--sheet-accent-hover);
}