/**
 * @file
 * FlowDrop Base Styles
 *
 * Foundation styles and utility classes for FlowDrop components.
 * These provide common patterns used across all SDC components.
 */

/* ========================================================================
 * BASE TYPOGRAPHY
 * ======================================================================== */

.fd-text-xs { font-size: var(--fd-font-size-xs); }
.fd-text-sm { font-size: var(--fd-font-size-sm); }
.fd-text-base { font-size: var(--fd-font-size-base); }
.fd-text-lg { font-size: var(--fd-font-size-lg); }
.fd-text-xl { font-size: var(--fd-font-size-xl); }
.fd-text-2xl { font-size: var(--fd-font-size-2xl); }
.fd-text-3xl { font-size: var(--fd-font-size-3xl); }

.fd-font-normal { font-weight: var(--fd-font-weight-normal); }
.fd-font-medium { font-weight: var(--fd-font-weight-medium); }
.fd-font-semibold { font-weight: var(--fd-font-weight-semibold); }
.fd-font-bold { font-weight: var(--fd-font-weight-bold); }

.fd-text-primary { color: var(--fd-color-gray-900); }
.fd-text-secondary { color: var(--fd-color-gray-500); }
.fd-text-muted { color: var(--fd-color-gray-400); }

/* ========================================================================
 * LAYOUT UTILITIES
 * ======================================================================== */

.fd-flex { display: flex; }
.fd-inline-flex { display: inline-flex; }
.fd-grid { display: grid; }

.fd-flex-row { flex-direction: row; }
.fd-flex-col { flex-direction: column; }

.fd-items-start { align-items: flex-start; }
.fd-items-center { align-items: center; }
.fd-items-end { align-items: flex-end; }

.fd-justify-start { justify-content: flex-start; }
.fd-justify-center { justify-content: center; }
.fd-justify-end { justify-content: flex-end; }
.fd-justify-between { justify-content: space-between; }

.fd-gap-1 { gap: var(--fd-space-1); }
.fd-gap-2 { gap: var(--fd-space-2); }
.fd-gap-3 { gap: var(--fd-space-3); }
.fd-gap-4 { gap: var(--fd-space-4); }
.fd-gap-6 { gap: var(--fd-space-6); }
.fd-gap-8 { gap: var(--fd-space-8); }

.fd-flex-1 { flex: 1 1 0%; }
.fd-flex-auto { flex: 1 1 auto; }
.fd-flex-none { flex: none; }

.fd-flex-wrap { flex-wrap: wrap; }

/* ========================================================================
 * SPACING UTILITIES
 * ======================================================================== */

.fd-p-0 { padding: var(--fd-space-0); }
.fd-p-2 { padding: var(--fd-space-2); }
.fd-p-3 { padding: var(--fd-space-3); }
.fd-p-4 { padding: var(--fd-space-4); }
.fd-p-6 { padding: var(--fd-space-6); }
.fd-p-8 { padding: var(--fd-space-8); }

.fd-px-4 { padding-inline: var(--fd-space-4); }
.fd-px-6 { padding-inline: var(--fd-space-6); }
.fd-py-2 { padding-block: var(--fd-space-2); }
.fd-py-3 { padding-block: var(--fd-space-3); }
.fd-py-4 { padding-block: var(--fd-space-4); }

.fd-m-0 { margin: var(--fd-space-0); }
.fd-mb-2 { margin-block-end: var(--fd-space-2); }
.fd-mb-4 { margin-block-end: var(--fd-space-4); }
.fd-mb-6 { margin-block-end: var(--fd-space-6); }
.fd-mt-4 { margin-block-start: var(--fd-space-4); }
.fd-mt-6 { margin-block-start: var(--fd-space-6); }

/* ========================================================================
 * BORDER & RADIUS UTILITIES
 * ======================================================================== */

.fd-border { border: var(--fd-border-width) solid var(--fd-border-color); }
.fd-border-0 { border: none; }

.fd-rounded { border-radius: var(--fd-radius-md); }
.fd-rounded-lg { border-radius: var(--fd-radius-lg); }
.fd-rounded-xl { border-radius: var(--fd-radius-xl); }
.fd-rounded-full { border-radius: var(--fd-radius-full); }

/* ========================================================================
 * SHADOW UTILITIES
 * ======================================================================== */

.fd-shadow-sm { box-shadow: var(--fd-shadow-sm); }
.fd-shadow-md { box-shadow: var(--fd-shadow-md); }
.fd-shadow-lg { box-shadow: var(--fd-shadow-lg); }
.fd-shadow-card { box-shadow: var(--fd-shadow-card); }

/* ========================================================================
 * INTERACTIVE STATES
 * ======================================================================== */

.fd-transition {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--fd-transition-normal);
}

.fd-cursor-pointer { cursor: pointer; }

.fd-focus-ring:focus-visible {
  outline: 2px solid var(--fd-color-primary-500);
  outline-offset: 2px;
}

/* ========================================================================
 * ICON UTILITIES
 * ======================================================================== */

.fd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fd-icon-sm {
  width: 1rem;
  height: 1rem;
}

.fd-icon-md {
  width: 1.25rem;
  height: 1.25rem;
}

.fd-icon-lg {
  width: 1.5rem;
  height: 1.5rem;
}

.fd-icon-xl {
  width: 2rem;
  height: 2rem;
}

/* ========================================================================
 * VISUALLY HIDDEN (Accessibility)
 * ======================================================================== */

.fd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================================================
 * TRUNCATION
 * ======================================================================== */

.fd-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


