/* Light theme only — tokens from mobile-app/src/theme/themes.ts (lightPalette) */
:root {
  color-scheme: light;
  --background: #e9eef9;
  --background-end: #d5ddf0;
  --surface: #ffffff;
  --surface-elevated: #f1f4fa;
  --surface-subtle: #e6eaf2;
  --primary: #4c8bf5;
  --primary-hover: #3a7be5;
  --success: #22a861;
  --warning: #ff8a33;
  --danger: #d84b4c;
  --text-primary: #1a2340;
  --text-secondary: #4a5878;
  --text-white: #ffffff;
  --border: #d1d7e5;
  --shadow-card: 0px 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-nav: 0px 4px 18px rgba(0, 0, 0, 0.15);
  --nav-start: #edf1fb;
  --nav-end: #d9e1f4;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  background: linear-gradient(
    180deg,
    var(--background) 0%,
    var(--background-end) 100%
  );
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Marketing screenshots — natural aspect, no device chrome */
.app-screenshot {
  display: block;
  width: 100%;
  max-width: min(280px, calc(100vw - 2.5rem));
  height: min(552px, calc(100vw - 2.5rem));
  padding: 5px;
  margin-inline: auto;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}