/*
 * NoteFusion design tokens for the web — the browser half of
 * `mobile/src/design/theme.ts`. Values are copied, not reinterpreted: the app and
 * the site have to look like the same product, and a landing page that ships a
 * slightly different blue undermines the download it is asking for.
 *
 * Keep in lock-step with theme.ts. If a token changes there, change it here.
 */

:root {
  /* Surfaces */
  --bg: #f4f7fc; /* Mist — root canvas */
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-alt: #eef3fb; /* Faint blue tint — nested rows, chips */

  /* Borders */
  --border: #e2e8f0; /* Slate hairline */
  --border-light: #eff3f9;

  /* "The Fusion" brand palette */
  --blue: #2563eb; /* Primary   — gradient start */
  --blue-deep: #1d4ed8; /* Deep      — pressed / darker shade */
  --blue-bright: #3b82f6; /* Bright    — gradient end */
  --sky: #0ea5e9; /* Sky       — wordmark accent */

  --accent-soft: rgba(37, 99, 235, 0.1);
  --accent-glow: rgba(37, 99, 235, 0.22);

  /* Typography
   * Two deliberate deviations from theme.ts, both forced by WCAG on a page whose
   * type is smaller than the app's:
   *   --text-muted  the app's #64748B measures 4.43:1 on Mist and 4.27:1 on the
   *                 faint tint, so it fails AA at body size. #5D6D82 clears 4.5
   *                 on white, Mist and the tint at once.
   *   --text-faint  #94A3B8 is 2.4:1 and cannot be rescued at any size, so it is
   *                 no longer used for text here. It stays defined for borders,
   *                 dividers and icons.
   */
  --text: #0f172a; /* Ink Navy */
  --text-muted: #5d6d82; /* Slate, darkened for AA on light surfaces */
  --text-faint: #94a3b8; /* Light Slate — non-text use only */
  --on-accent: #ffffff;

  /* Semantic signals */
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;

  /* Gradients */
  --fusion: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  --fusion-start: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);

  /* The fusion gradient is decorative; text sits on it all over the site. The
     light end (#3B82F6) fails 4.5:1 for normal-size white text (3.68), so any
     element that carries text uses this contrast-safe flat blue instead and
     keeps the gradient for large type, fills and shadows. */
  --fusion-contrast: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);

  /* Radii — radii.sm/md/lg/xl/pill */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing — spacing.xs … xxxl */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-2xl: 32px;
  --s-3xl: 48px;

  /* Shadows — shadow.card / shadow.glow */
  --sh-card: 0 2px 10px rgba(15, 23, 42, 0.06);
  --sh-card-lift: 0 12px 32px rgba(15, 23, 42, 0.1);
  --sh-glow: 0 8px 20px rgba(37, 99, 235, 0.28);

  /* Layout */
  --wrap: 1120px;
  --wrap-narrow: 760px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The header is sticky and 76px tall, so an unpadded fragment jump parks the
     target underneath it. Below 860px the section padding drops to 64px, which
     is less than the header, and the heading disappears entirely. Setting this
     on the scroll container also stops focus rings being clipped under the bar
     when Tab scrolls an element to the top. */
  scroll-padding-top: calc(76px + var(--s-lg));
}

section[id] {
  scroll-margin-top: calc(76px + var(--s-lg));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
}

/* `height: auto` is not optional next to `max-width: 100%`. Every img here
   carries intrinsic width/height attributes so the browser can reserve the box
   and avoid a layout shift; without this the attribute height is also the used
   height, so a downscaled image keeps its full pixel height and stretches. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Visible focus ring on every interactive element. Removing the default outline
   without replacing it makes the site unusable by keyboard.
   Two-tone on purpose: a single #3B82F6 ring is 1.0:1 against the African
   section, whose gradient ends in that exact colour, so the halo is what makes
   it visible there and the blue ring is what makes it visible everywhere else. */
:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s-xl);
}

.wrap-narrow {
  max-width: var(--wrap-narrow);
}

/* ── Brand mark ──────────────────────────────────────────────────────────────
 * The artwork ships as a white silhouette with an alpha channel and is recoloured
 * per surface — `tintColor` in React Native, a CSS mask here. Same one-mark-many-
 * colours property, same single source of truth (the design render).
 */
.mark {
  display: block;
  width: 34px;
  height: 45px; /* artwork is 331 × 438 */
  background-color: var(--blue);
  -webkit-mask: url("mark.png") center / contain no-repeat;
  mask: url("mark.png") center / contain no-repeat;
  flex: none;
}

.mark--on-blue {
  background-color: #ffffff;
}

.wordmark {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.wordmark span {
  color: var(--sky);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 600;
  font-size: 0.975rem;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--fusion-contrast);
  color: var(--on-accent);
  box-shadow: var(--sh-glow);
}

.btn--light {
  background: #ffffff;
  color: var(--blue-deep);
  box-shadow: 0 8px 20px rgba(8, 22, 60, 0.22);
}

/* A control's visible boundary needs 3:1 of its own (WCAG 1.4.11), which the
   --border hairline (1.2:1) does not give. This is the one place the hairline
   is load-bearing rather than decorative. */
.btn--ghost {
  background: transparent;
  color: var(--blue-deep);
  border-color: #7c8ba0;
  box-shadow: var(--sh-card);
}
.btn--ghost:hover {
  background: var(--surface);
}

.btn--on-blue-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.btn--on-blue-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn--lg {
  padding: 17px 32px;
  font-size: 1.05rem;
}