/*
 * TrainingApp landing — minimal custom CSS.
 * Tailwind (CDN) covers most styling; this file holds only what Tailwind
 * cannot express cleanly or what benefits from centralization.
 */

:root {
  --bg: #0a0a0a;
  --bg-elev: #141414;
  --fg: #f5f5f5;
  --fg-muted: #a3a3a3;
  --border: #262626;
  /* Accent — placeholder lime. TODO: sync with iOS app accent color. */
  --accent: #c2ff00;
  --accent-fg: #0a0a0a;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafafa;
    --bg-elev: #ffffff;
    --fg: #0a0a0a;
    --fg-muted: #525252;
    --border: #e5e5e5;
  }
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--fg);
}

code, kbd, pre, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Utility classes referenced from HTML */
.bg-app        { background-color: var(--bg); }
.bg-app-elev   { background-color: var(--bg-elev); }
.text-app      { color: var(--fg); }
.text-app-muted{ color: var(--fg-muted); }
.border-app    { border-color: var(--border); }
.accent        { color: var(--accent); }
.bg-accent     { background-color: var(--accent); color: var(--accent-fg); }

/* Focus ring — accessibility AA */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Screenshot image (actual asset once dropped into assets/screenshots/) */
.screenshot-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 19.5;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: #0f0f0f;
  object-fit: cover;
}

/* Screenshot placeholder — shown when the real PNG is missing (onerror fallback) */
.screenshot-placeholder {
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(160deg, #1a1a1a 0%, #0f0f0f 100%);
  border: 1px solid var(--border);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 1rem;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}