/* Shared visual foundations synchronized with the FitQuest Figma file. */
:root {
  --fq-color-background: #0b0b0d;
  --fq-color-surface: #151518;
  --fq-color-surface-raised: #1d1d22;
  --fq-color-border: #2e2e35;
  --fq-color-text: #f6f5f8;
  --fq-color-text-muted: #aaa8b4;
  --fq-color-brand-lime: #b6ff45;
  --fq-color-brand-purple: #9b4dff;
  --fq-color-brand-lavender: #cfa9ff;
  --fq-spacing-1: 4px;
  --fq-spacing-2: 8px;
  --fq-spacing-3: 12px;
  --fq-spacing-4: 16px;
  --fq-spacing-6: 24px;
  --fq-spacing-8: 32px;
  --fq-radius-sm: 8px;
  --fq-radius-md: 14px;
  --fq-radius-lg: 20px;
  --bg: var(--fq-color-background);
  --panel: var(--fq-color-surface);
  --panel2: var(--fq-color-surface-raised);
  --line: var(--fq-color-border);
  --ink: var(--fq-color-text);
  --muted: var(--fq-color-text-muted);
  --lime: var(--fq-color-brand-lime);
  --purple: var(--fq-color-brand-purple);
  --soft-purple: var(--fq-color-brand-lavender);
}

/* Shared controls feel consistent across every route and remain keyboard-first. */
.btn,
.tool-button,
.modal-close,
.nav-link,
.mobile-nav a,
.home-tile,
.quest-card,
.routine-card,
.achievement-card,
.history-card,
.next-training-card,
.pet-mission,
.home-shortcut {
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:hover:not(:disabled),
.tool-button:hover,
.modal-close:hover {
  filter: brightness(1.08);
}

.btn:focus-visible,
.tool-button:focus-visible,
.nav-link:focus-visible,
.mobile-nav a:focus-visible,
.home-tile:focus-visible,
.quest-card:focus-visible,
.pet-mission:focus-visible,
.history-card:focus-visible {
  outline: 2px solid var(--fq-color-brand-lime);
  outline-offset: 3px;
}

.v2-heading {
  gap: var(--fq-spacing-6);
}

.v2-heading h1 {
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.v2-heading p {
  line-height: 1.65;
}

.panel,
.profile-editor,
.home-tile,
.quest-card,
.routine-card,
.achievement-card,
.history-card,
.next-training-card,
.pet-habitat,
.pet-mission,
.checkin-history,
.presence-card,
.squad-intro,
.squad-empty {
  border-color: var(--fq-color-border);
}

.home-tile:hover,
.quest-card:hover,
.routine-card:hover,
.achievement-card:hover,
.history-card:hover,
.next-training-card:hover,
.pet-mission:hover,
.home-shortcut:hover {
  border-color: color-mix(in srgb, var(--fq-color-brand-purple) 58%, var(--fq-color-border));
}

/* Route changes get a brief entrance; content-only re-renders stay still. */
#main.route-enter .v2-heading,
#main.route-enter .home-greeting {
  animation: fq-motion-enter 420ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
  animation-delay: 35ms;
}

#main.route-enter .neon-hero,
#main.route-enter .home-status-column,
#main.route-enter .profile-editor,
#main.route-enter .profile-layout > *,
#main.route-enter .pet-habitat,
#main.route-enter .squad-intro,
#main.route-enter .checkin-page > *,
#main.route-enter .agenda-grid > * {
  animation: fq-motion-enter 460ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
  animation-delay: 90ms;
}

.btn:active:not(:disabled),
.tool-button:active,
.home-shortcut:active {
  transform: scale(0.98);
}

.toast {
  animation: fq-toast-pop 520ms cubic-bezier(0.18, 1.25, 0.4, 1) both;
}

@keyframes fq-toast-pop {
  from {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes fq-motion-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (hover: hover) and (pointer: fine) {
  .home-tile:hover,
  .quest-card:hover,
  .routine-card:hover,
  .achievement-card:hover,
  .history-card:hover,
  .next-training-card:hover,
  .pet-mission:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-reveal {
    transition:
      opacity 380ms ease,
      transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--motion-order, 0) * 45ms);
  }

  .motion-pending {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.99);
  }

  .motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

input,
select,
textarea {
  border-radius: var(--fq-radius-md);
}

@media (min-width: 1024px) {
  .content-shell {
    min-height: calc(100vh - 40px);
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 24;
    backdrop-filter: blur(18px);
  }

  .sidebar {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #59416a transparent;
  }
}

@media (max-width: 759px) {
  #main {
    padding-inline: clamp(14px, 4.5vw, 22px);
  }

  .v2-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 21px;
  }

  .v2-heading h1 {
    font-size: clamp(31px, 9vw, 40px);
  }

  .v2-heading p {
    max-width: 42ch;
  }

  .heading-actions {
    width: 100%;
    margin-top: 5px;
  }

  .heading-actions .btn {
    min-height: 46px;
  }

  .achievement-grid,
  .agenda-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-nav {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  #main.route-enter .v2-heading,
  #main.route-enter .home-greeting,
  #main.route-enter .neon-hero,
  #main.route-enter .home-status-column,
  #main.route-enter .profile-editor,
  #main.route-enter .profile-layout > *,
  #main.route-enter .pet-habitat,
  #main.route-enter .squad-intro,
  #main.route-enter .checkin-page > *,
  #main.route-enter .agenda-grid > * {
    animation: none;
  }

  .btn,
  .tool-button,
  .modal-close,
  .nav-link,
  .mobile-nav a,
  .home-tile,
  .quest-card,
  .routine-card,
  .achievement-card,
  .history-card,
  .next-training-card,
  .pet-mission,
  .home-shortcut {
    transition: none;
  }
}