@import url('./design-tokens.css');

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid {
  display: grid;
}

.gap-xs { gap: var(--space-2); }
.gap-sm { gap: var(--space-3); }
.gap-md { gap: var(--space-4); }
.gap-lg { gap: var(--space-6); }

.mt-sm { margin-top: var(--space-3); }
.mt-md { margin-top: var(--space-5); }
.mt-lg { margin-top: var(--space-7); }

.mb-none { margin-bottom: 0; }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-muted { color: var(--color-text-secondary); }
.text-strong { font-weight: var(--font-weight-semibold); }

.card-grid {
  display: grid;
  gap: var(--space-4);
}

.card-grid--two {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.scroll-x {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x mandatory;
}

.scroll-x > * {
  scroll-snap-align: start;
}

.tagline {
  font-size: var(--font-size-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.text-gradient-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-highlight {
  background: var(--gradient-highlight);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.surface-blur {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.16);
  backdrop-filter: blur(18px);
}

.safe-area-bottom {
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
}