/* Strikee link hosting — styles ported from the mobile app's design system.
 *
 * Every value below is copied from the app rather than invented, so the web
 * fallback looks like the app it hands off to. Sources (mobile repo):
 *   lib/core/theme/app_theme.dart      → AppColors, AppRadii, AppGradients, textTheme
 *   lib/core/theme/app_fonts.dart      → AppFonts.fontFamily = 'Gilroy'
 *   lib/core/components/app_primary_button.dart → AppPrimaryButton
 *   lib/core/components/radial_glow_background.dart → login-screen glow
 *
 * Keep the token block in sync with AppColors / AppRadii. If a value here has
 * no counterpart in the app, that is a bug, not a liberty.
 */

/* ── Gilroy ───────────────────────────────────────────────────────────────
 * Self-hosted, subset to Latin + punctuation and converted to woff2
 * (565 KB of TTF → 52 KB). Three weights, matching the ones the web pages
 * actually use: 500 body, 600 headings/buttons, 700 wordmark.
 * See docs/design-system.md to add a weight or a character range.
 */
@font-face {
  font-family: "Gilroy";
  src: url("/fonts/gilroy-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/fonts/gilroy-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/fonts/gilroy-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutrals — AppColors.neutral* */
  --neutral-0: #181818;
  --neutral-5: #242526;
  --neutral-10: #2d2f32;
  --neutral-20: #42454b;
  --neutral-60: #979eaa;
  --neutral-80: #cbcfd5;
  --neutral-100: #f8f9fa;

  /* Yellow ramp — AppColors.yellow* */
  --yellow-10: #535118;
  --yellow-20: #757217;
  --yellow-50: #fef513;

  /* Semantic aliases — AppColors */
  --background-default: var(--neutral-0); /* backgroundDefault */
  --background-dark: #242528; /* backgroundDark, = button ink */
  --card-background: var(--neutral-5); /* cardBackground */
  --card-border: var(--neutral-20); /* cardBorder */
  --button-background: var(--neutral-10); /* buttonBackground (secondary) */
  --accent-yellow: var(--yellow-50); /* accentYellow */
  --text-primary: #ffffff; /* textPrimary */
  --text-secondary: var(--neutral-60); /* textSecondary */

  /* Corner radii — AppRadii */
  --radius-field: 12px; /* AppRadii.field */
  --radius-card: 16px; /* AppRadii.card / .control */
  --radius-pill: 20px; /* AppRadii.pill / .button */
  --radius-full: 100px; /* AppRadii.full */

  /* AppPrimaryButton defaults */
  --button-height: 56px;
  --button-font-size: 20px;

  --font-family: "Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--background-default);
  color: var(--text-primary);
  font-family: var(--font-family);
  /* textTheme.bodyMedium — 14 / w500 */
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Login-screen ambient glow — AppGradients.screenAmbientGlow painted by
 * RadialGlowBackground(center: Alignment(0.3, -0.35), radius: 0.68).
 * Alignment(0.3, -0.35) maps to 65% / 32.5% in CSS percentages, and the app's
 * radius is a fraction of the *shortest* side, hence the `closest-side` sizing.
 * Stops and the 0.2 alpha on yellow20 are copied verbatim. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    68% 68% at 65% 32.5%,
    rgba(117, 114, 23, 0.2) 0%,
    rgba(117, 114, 23, 0.2) 48%,
    rgba(117, 114, 23, 0) 100%
  );
}

/* Card — cardTheme: neutral5 fill, 1px neutral20 border, 16px radius,
 * elevation 0 (so no box-shadow). */
main {
  width: 100%;
  max-width: 26rem;
  padding: 32px 28px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--card-background);
  text-align: center;
}

.mark {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 14px;
  /* Gilroy Bold — the app's headlineLarge weight */
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-yellow);
}

/* textTheme.headlineMedium — 24 / w600 */
h1 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

p {
  margin: 0 0 14px;
  color: var(--text-secondary);
}

p:last-child {
  margin-bottom: 0;
}

strong {
  /* No 700 needed inline; 600 matches the app's emphasis weight. */
  font-weight: 600;
  color: var(--text-primary);
}

.stores {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

/* AppPrimaryButton — 56px tall, AppRadii.pill, 20px / w600 label,
 * full width, no elevation. */
a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 0 24px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--button-font-size);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  /* AppPrimaryButtonStyle.secondary — buttonBackground on textPrimary */
  background: var(--button-background);
  color: var(--text-primary);
  transition: filter 0.15s ease, opacity 0.15s ease;
}

/* AppPrimaryButtonStyle.primary — accentYellow on backgroundDark ink */
a.btn.primary {
  background: var(--accent-yellow);
  color: var(--background-dark);
}

a.btn:hover {
  filter: brightness(1.12);
}

a.btn.primary:hover {
  filter: brightness(0.94);
}

a.btn:active {
  opacity: 0.85;
}

a.btn:focus-visible {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 3px;
}

/* Loading spinner — accentYellow on the neutral20 track used by the app's
 * button/card borders. */
.spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto 20px;
  border: 3px solid var(--neutral-20);
  border-top-color: var(--accent-yellow);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.4s;
  }
}

[hidden] {
  display: none !important;
}

/* textTheme.bodySmall — 12 / w500, textMuted (= neutral60) */
footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--card-border);
  font-size: 12px;
  color: var(--text-secondary);
}

footer a {
  color: var(--text-secondary);
}

@media (max-width: 26rem) {
  body {
    padding: 16px;
  }

  main {
    padding: 28px 20px;
  }
}