/* components.css - EB Solutions component library (uses tokens.css) */
/* Load after tokens.css in the theme so `var(--...)` are available */

/* Buttons */
.ebs-btn {
  display: inline-block;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  padding: calc(var(--space-2)) calc(var(--space-3));
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.ebs-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
  border: 0;
  box-shadow: var(--shadow-sm);
}
.ebs-btn--primary:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }

.ebs-btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* Cards */
.ebs-card {
  background: var(--color-surface);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--color-neutral-900);
}
.ebs-card__title { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.ebs-card__body { font-size: var(--font-size-sm); color: var(--color-neutral-700); }

/* Hero */
.ebs-hero {
  padding: var(--space-6) var(--space-3);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-600) 100%);
  color: var(--color-surface);
}
.ebs-hero h1 { font-size: var(--font-size-xxl); margin-bottom: var(--space-3); }
.ebs-hero p { font-size: var(--font-size-md); margin-bottom: var(--space-4); }

/* Section variants */
.ebs-section--dark { background: var(--color-neutral-900); color: var(--color-surface); padding: var(--space-5) 0; }
.ebs-section--light { background: var(--color-bg); color: var(--color-neutral-900); padding: var(--space-5) 0; }

/* Grid utilities */
.ebs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }

/* Small responsiveness */
@media (max-width: 720px) {
  .ebs-hero h1 { font-size: var(--font-size-xl); }
}