/* Custom App-Specific Styles */

/* Import Cooper Hewitt fonts */
@font-face {
  font-family: 'Cooper Hewitt';
  src: url('/static/font/cooper-hewitt/CooperHewitt-Thin.otf') format('opentype');
  font-weight: 100;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('/static/font/cooper-hewitt/CooperHewitt-Light.otf') format('opentype');
  font-weight: 300;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('/static/font/cooper-hewitt/CooperHewitt-Book.otf') format('opentype');
  font-weight: 400;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('/static/font/cooper-hewitt/CooperHewitt-Medium.otf') format('opentype');
  font-weight: 500;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('/static/font/cooper-hewitt/CooperHewitt-Semibold.otf') format('opentype');
  font-weight: 600;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('/static/font/cooper-hewitt/CooperHewitt-Bold.otf') format('opentype');
  font-weight: 700;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('/static/font/cooper-hewitt/CooperHewitt-Heavy.otf') format('opentype');
  font-weight: 900;
}

/* Import Great Vibes Font */
@font-face {
  font-family: 'Great Vibes';
  src: url('/static/font/Great_Vibes/GreatVibes-Regular.ttf') format('truetype');
  font-weight: 400;
}

/* Import EB Garamond Font */
@font-face {
  font-family: 'EB Garamond';
  src: url('/static/font/garamond_[allfont.ru].ttf') format('truetype');
  font-weight: 400;
}

/* Import Inter from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* App Body Reset */
body {
  font-family: var(--font-ui);
  background-color: var(--bg-app);
  color: var(--text-primary);
}

/* Main Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Page Wrapper */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-content {
  flex: 1;
  padding: var(--space-8) var(--space-4);
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

/* Auth Pages */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--primary-light) 0%, transparent 100%);
}

.auth-card {
  width: 100%;
  max-width: 450px;
}

/* Loading States */
.loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Spinner Animation */
@keyframes spinner {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

/* Utility Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Password Strength Indicators */
.strength-indicator {
  flex: 1;
  height: 8px;
  background-color: var(--border-soft);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-normal);
}

.strength-indicator--very-weak {
  background-color: var(--rdc-rouge);
}

.strength-indicator--weak {
  background-color: var(--rdc-orange);
}

.strength-indicator--medium {
  background-color: var(--rdc-jaune);
}

.strength-indicator--strong {
  background-color: var(--rdc-vert);
}

.strength-text {
  font-size: var(--text-xs);
  font-weight: 500;
  margin-top: var(--space-2);
}

.strength-text--empty {
  color: var(--text-secondary);
}

.strength-text--weak {
  color: var(--rdc-rouge);
  font-weight: 600;
}

.strength-text--medium {
  color: var(--rdc-orange);
  font-weight: 600;
}

.strength-text--strong {
  color: var(--rdc-vert);
  font-weight: 600;
}

.password-match-feedback {
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

.password-match-feedback--empty {
  color: var(--text-secondary);
}

.password-match-feedback--match {
  color: var(--rdc-vert);
  font-weight: 600;
}

.password-match-feedback--mismatch {
  color: var(--rdc-rouge);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .page-content {
    padding: var(--space-4) var(--space-3);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}