/* welcome.css — Plan 01-10 D-17-onboarding welcome page styling.
 *
 * Imports the canonical Plan 01-12 token system (src/shared/tokens.css)
 * which carries the full --mks-* variable set + 8 local @font-face
 * rules (Lora display + IBM Plex Sans UI + IBM Plex Mono diagnostic
 * — all self-hosted per MV3 CSP) + the D-04 Loom palette.
 *
 * KEY INVARIANTS (Plan 01-10 A17 design-swap-readiness contract):
 *   1. FIRST LINE is `@import '../shared/tokens.css';` (Plan 01-12
 *      must_have #9 path-B; verified by `grep -F` in <verify> block).
 *   2. ZERO hex literals in this source file (verified by
 *      `grep -E '#[0-9a-fA-F]{3,8}'` exit 1 in <verify>). Every color
 *      reads from var(--mks-*); every font reads from var(--mks-font-*).
 *      The @imported tokens.css IS allowed hex literals — it IS the
 *      canonical source.
 *   3. >= 5 var(--mks-*) references (verified by `grep -c`).
 *   4. NO placeholder welcome-tokens.css file is created — Plan 01-12
 *      landed first and supplies the canonical tokens directly.
 *
 * Layout: max-width 720px (= --mks-welcome-max-w in tokens.css),
 * centered, hero + body + footer vertical stack per D-02 Surface Kit
 * option A. BEM-ish class names matching welcome.html. */

@import '../shared/tokens.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--mks-font-ui);
  background: var(--mks-surface);
  color: var(--mks-fg-1);
  min-height: 100vh;
  line-height: var(--mks-lh-base);
}

.welcome {
  max-width: var(--mks-welcome-max-w);
  margin: 0 auto;
  padding: var(--mks-space-12) var(--mks-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--mks-space-10);
}

/* ── Hero ──────────────────────────────────────────────────────────── */

.welcome-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mks-space-4);
  padding: var(--mks-space-10) var(--mks-space-6);
  background: var(--mks-surface-raised);
  border: var(--mks-border-width) solid var(--mks-border);
  border-radius: var(--mks-radius-xl);
  box-shadow: var(--mks-shadow-2);
}

.welcome-hero__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mks-space-20);
  height: var(--mks-space-20);
  border-radius: var(--mks-radius-full);
  background: var(--mks-rec);
  color: var(--mks-fg-inverse);
}

.welcome-hero__mark-placeholder {
  font-family: var(--mks-font-display);
  font-size: var(--mks-text-md);
  font-weight: var(--mks-weight-semibold);
  letter-spacing: var(--mks-tracking-tight);
}

/* Plan 01-10 must_have #9 path-A swap-in mark image (landed 2026-05-20).
 * Replaces .welcome-hero__mark-placeholder at DOMContentLoaded via
 * welcome.ts populateMark(). The img inherits the wrapper's rec-bg
 * circle (background var(--mks-rec)); we size the img to 60% of the
 * wrapper for visual breathing room (the canonical mark is 32×32 with
 * stroke-width 2.25 — at full-wrapper size it would touch the circle
 * edge unpleasantly). The dark ink stroke (canonical ink token from
 * the SVG source) renders on the rec-orange BG with strong contrast
 * per D-04 Loom palette intent. */
.welcome-hero__mark-img {
  width: 60%;
  height: 60%;
  display: block;
}

.welcome-hero__title {
  font-family: var(--mks-font-display);
  font-size: var(--mks-text-3xl);
  font-weight: var(--mks-weight-regular);
  line-height: var(--mks-lh-tight);
  letter-spacing: var(--mks-tracking-display);
  color: var(--mks-fg-1);
}

.welcome-hero__tagline-ru {
  font-family: var(--mks-font-display);
  font-size: var(--mks-text-lg);
  font-weight: var(--mks-weight-regular);
  font-style: italic;
  line-height: var(--mks-lh-snug);
  color: var(--mks-fg-1);
  margin-top: var(--mks-space-3);
}

.welcome-hero__tagline-en {
  font-family: var(--mks-font-ui);
  font-size: var(--mks-text-base);
  font-weight: var(--mks-weight-regular);
  line-height: var(--mks-lh-snug);
  color: var(--mks-fg-2);
}

/* ── Body ──────────────────────────────────────────────────────────── */

.welcome-body {
  display: flex;
  flex-direction: column;
  gap: var(--mks-space-5);
}

.welcome-body__line {
  font-family: var(--mks-font-ui);
  font-size: var(--mks-text-md);
  line-height: var(--mks-lh-base);
  color: var(--mks-fg-1);
}

.welcome-body__cta {
  font-family: var(--mks-font-ui);
  font-size: var(--mks-text-md);
  font-weight: var(--mks-weight-medium);
  line-height: var(--mks-lh-base);
  color: var(--mks-fg-1);
  padding: var(--mks-space-5) var(--mks-space-6);
  background: var(--mks-madder-100);
  border-left: 3px solid var(--mks-rec);
  border-radius: var(--mks-radius-md);
}

/* ── Footer ────────────────────────────────────────────────────────── */

.welcome-footer {
  padding-top: var(--mks-space-6);
  border-top: var(--mks-border-width) solid var(--mks-border);
}

.welcome-footer__privacy {
  font-family: var(--mks-font-ui);
  font-size: var(--mks-text-sm);
  line-height: var(--mks-lh-base);
  color: var(--mks-fg-3);
  text-align: center;
}

/* ── Reduced motion / small screen courtesies ─────────────────────── */

@media (max-width: 600px) {
  .welcome {
    padding: var(--mks-space-6) var(--mks-space-4);
    gap: var(--mks-space-6);
  }
  .welcome-hero {
    padding: var(--mks-space-6) var(--mks-space-4);
  }
  .welcome-hero__title {
    font-size: var(--mks-text-2xl);
  }
}
