/**
 * Честный Отзыв — CSS Custom Properties (Design Tokens)
 */

:root {
  /* Primary */
  --color-primary: #0061a4;
  --color-primary-container: #2196f3;
  --color-on-primary: #ffffff;

  /* Secondary (verified) */
  --color-secondary: #006e1c;
  --color-secondary-container: #91f78e;

  /* Verification levels */
  --color-verified-geo: #9E9E9E;
  --color-verified-qr: #2E7D32;
  --color-verified-receipt: #F59E0B;

  /* Surface */
  --color-surface: #f8f9fb;
  --color-surface-container-low: #f2f4f6;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-high: #e6e8ea;

  /* Text */
  --color-on-surface: #191c1e;
  --color-on-surface-variant: #404752;
  --color-outline: #707883;

  /* Stars */
  --color-star-active: #fabd00;
  --color-star-inactive: #d8dadc;

  /* Error */
  --color-error: #ba1a1a;
  --color-warning: #F57C00;

  /* Fonts */
  --font-headline: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-sheet: 0 -12px 32px rgba(25, 28, 30, 0.06);
  --shadow-overlay: 0 -12px 32px rgba(25, 28, 30, 0.15);
}

/* Screen transitions */
.screen { display: none !important; }
.screen.active { display: flex !important; flex-direction: column; }

/* Overlay animations */
.overlay-backdrop { display: none; }
.overlay-backdrop.visible { display: block; }
.overlay-sheet {
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.overlay-backdrop.visible .overlay-sheet {
  transform: translateY(0);
}

/* Pulse animation (check-in icon) */
.pulse-ring { animation: pulse 2s infinite; }
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.5; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

/* Hide scrollbar */
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* Material Icons filled */
.filled-icon { font-variation-settings: 'FILL' 1; }