/**
 * Design System Atoms - Futpalbase (from HQ)
 */

/* DSText - typography styles */
.ds-text {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ds-text--displayLarge {
  font-size: var(--ds-font-display-large-size);
  font-weight: var(--ds-font-display-large-weight);
}
.ds-text--displayMedium {
  font-size: var(--ds-font-display-medium-size);
  font-weight: var(--ds-font-display-medium-weight);
}
.ds-text--displaySmall {
  font-size: var(--ds-font-display-small-size);
  font-weight: var(--ds-font-display-small-weight);
}

.ds-text--headlineLarge {
  font-size: var(--ds-font-headline-large-size);
  font-weight: var(--ds-font-headline-large-weight);
}
.ds-text--headlineMedium {
  font-size: var(--ds-font-headline-medium-size);
  font-weight: var(--ds-font-headline-medium-weight);
}
.ds-text--headlineSmall {
  font-size: var(--ds-font-headline-small-size);
  font-weight: var(--ds-font-headline-small-weight);
}

.ds-text--bodyLarge {
  font-size: var(--ds-font-body-large-size);
  font-weight: var(--ds-font-body-large-weight);
}
.ds-text--bodyMedium {
  font-size: var(--ds-font-body-medium-size);
  font-weight: var(--ds-font-body-medium-weight);
}
.ds-text--bodySmall {
  font-size: var(--ds-font-body-small-size);
  font-weight: var(--ds-font-body-small-weight);
}

.ds-text--labelLarge {
  font-size: var(--ds-font-label-large-size);
  font-weight: var(--ds-font-label-large-weight);
}
.ds-text--labelMedium {
  font-size: var(--ds-font-label-medium-size);
  font-weight: var(--ds-font-label-medium-weight);
}
.ds-text--labelSmall {
  font-size: var(--ds-font-label-small-size);
  font-weight: var(--ds-font-label-small-weight);
}

/* Text colors */
.ds-text--onSurface { color: var(--ds-on-surface); }
.ds-text--onSurfaceSecondary { color: var(--ds-on-surface-secondary); }
.ds-text--onPrimary { color: var(--ds-on-primary); }
.ds-text--primary { color: var(--ds-primary); }
.ds-text--error { color: var(--ds-error); }
.ds-text--accent { color: var(--ds-accent); }

/* DSIcon - icon sizes */
.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-on-surface-secondary);
}
.ds-icon--small { font-size: 16px; }
.ds-icon--medium { font-size: 24px; }
.ds-icon--large { font-size: 32px; }

.ds-icon--onSurface { color: var(--ds-on-surface); }
.ds-icon--onSurfaceSecondary { color: var(--ds-on-surface-secondary); }
.ds-icon--onPrimary { color: var(--ds-on-primary); }
.ds-icon--primary { color: var(--ds-primary); }

/* DSAvatar */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--ds-surface-variant);
  overflow: hidden;
}
.ds-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-avatar__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ds-on-surface-secondary);
}

/* DSSurface */
.ds-surface {
  background-color: var(--ds-surface);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.ds-surface--surfaceVariant {
  background-color: var(--ds-surface-variant);
}

/* DSDayCircle */
.ds-day-circle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-xxs);
}
.ds-day-circle__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.25px solid rgba(179, 179, 179, 0.25);
  background-color: transparent;
  box-shadow: none;
}
.ds-day-circle--active .ds-day-circle__ring {
  background-color: rgba(255, 179, 51, 0.28);
  box-shadow: 0 1px 3px rgba(255, 179, 51, 0.22);
}
.ds-day-circle__icon {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ds-warning);
}
.ds-day-circle__label {
  font-size: var(--ds-font-label-small-size);
  font-weight: var(--ds-font-label-small-weight);
  color: var(--ds-on-surface-secondary);
  opacity: 0.45;
}
.ds-day-circle--active .ds-day-circle__label {
  color: var(--ds-on-surface);
  opacity: 1;
}