/* ==========================================================================
   Bumpcall Hi-Fi Mockup — Shared Styles
   Brand tokens, animations, and overrides for mockup screens.
   All mockup screens MUST link to this file.
   Reference: design-system.md v1.1
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables — Bumpcall Design Tokens (shadcn convention)
   -------------------------------------------------------------------------- */
:root {
  --background: #F5F0E8;
  --foreground: #2D2D2D;
  --card: #FFFFFF;
  --card-foreground: #2D2D2D;
  --primary: #F97B5C;
  --primary-dark: #E0653F;
  --primary-light: #FBAA96;
  --primary-foreground: #FFFFFF;
  --secondary: #F0F0F0;
  --secondary-foreground: #2D2D2D;
  --muted: #F0F0F0;
  --muted-foreground: #8A8A8A;
  --accent: #FBAA96;
  --accent-foreground: #2D2D2D;
  --destructive: #D93025;
  --destructive-foreground: #FFFFFF;
  --border: #D1D1D1;
  --input: #D1D1D1;
  --ring: #F97B5C;
  --success: #34A853;
  --success-light: #E8F5E9;
  --warning: #F7C948;
  --warning-light: #FFF8E1;
  --info: #A8D8EA;
  --info-light: #E8F4FD;
  --error: #D93025;
  --error-light: #FDECEA;
  --sky: #A8D8EA;
  --olive: #6B7B3A;
  --sunshine: #F7C948;
}

.dark {
  --background: #1A1A1A;
  --foreground: #F0F0F0;
  --card: #2D2D2D;
  --card-foreground: #F0F0F0;
  --secondary: #3A3A3A;
  --secondary-foreground: #F0F0F0;
  --muted: #3A3A3A;
  --muted-foreground: #8A8A8A;
  --accent: #E0653F;
  --accent-foreground: #FFFFFF;
  --border: #4A4A4A;
  --input: #4A4A4A;
}

/* --------------------------------------------------------------------------
   Bumpcall Brand Animations
   -------------------------------------------------------------------------- */
@keyframes matching-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.5); opacity: 0; }
}
@keyframes lobby-heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes checkin-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,123,92,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(249,123,92,0); }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.animate-matching-pulse { animation: matching-pulse 1.5s ease-in-out infinite; }
.animate-lobby-heartbeat { animation: lobby-heartbeat 1s ease-in-out infinite; }
.animate-checkin-glow { animation: checkin-glow 2s ease-in-out infinite; }
.animate-fade-in { animation: fade-in 0.3s ease-out; }

/* --------------------------------------------------------------------------
   Mockup Screen Info Header
   -------------------------------------------------------------------------- */
.mockup-screen-info {
  background: var(--muted);
  padding: 6px 16px;
  font-size: 11px;
  color: var(--muted-foreground);
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, monospace;
}

/* --------------------------------------------------------------------------
   Print styles
   -------------------------------------------------------------------------- */
@media print {
  .mockup-screen-info { display: none; }
}