/* ─────────────────────────────────────────────────────────────────────────
   Night Pulse — shared brand tokens
   ─────────────────────────────────────────────────────────────────────────
   Ported verbatim from the GotHuman app design system so the landing page
   and the app read as one brand. Values mirror the app's tokens/*.css —
   when the app changes, change them here too.

   Source: Claude Design "Mobile app redesign strategy"
           tokens/colors.css, effects.css, spacing.css, typography.css

   Scope note: this file carries the BRAND layer only (color, type, glow,
   radii, voice-carrying details). It deliberately does NOT carry the app's
   UI chrome — screen radii, tab bars, sheets, the pinned-bottom CTA. Those
   solve mobile problems; a landing page that adopts them just looks like a
   screenshot of the app.
   ───────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root {
  /* ── Base night surfaces (elevation = lighter step, never shadow) ────── */
  --np-void: #060509;      /* canvas behind screens */
  --np-night: #0d0c11;     /* page background */
  --np-surface: #141218;   /* card */
  --np-raised: #17151d;    /* input / raised card / nav pill */
  --np-line: #2b2735;      /* hairline border */
  --np-line-soft: #221f2a; /* row dividers */
  --np-edge: #23202b;      /* screen edge */

  /* ── Ink ─────────────────────────────────────────────────────────────── */
  --np-ink: #f4f1ea;
  --np-muted: #b7b0c0;
  --np-dim: #8e8798;
  --np-faint: #6d6678;

  /* ── Signature: ember → amber ────────────────────────────────────────── */
  --np-ember: #ff6a3d;
  --np-amber: #ffb02e;
  --np-amber-soft: #ffd08a;
  --np-flame: #ff8a4d;      /* selected borders */
  --np-action-ink: #1a0b04; /* text on gradient */
  --np-gradient: linear-gradient(90deg, #ff6a3d, #ffb02e);
  --np-gradient-tilt: linear-gradient(135deg, #ff6a3d, #ffb02e);

  /* ── Semantic ────────────────────────────────────────────────────────── */
  --np-success: #3ddc84;   /* live presence — never decorative */
  --np-danger: #ff3b30;    /* panic only */

  /* ── Trust tiers ─────────────────────────────────────────────────────── */
  --np-trust-newcomer: #f4f1ea;
  --np-trust-established: #9aa8e6;
  --np-trust-established-ring: #6f51b8;
  --np-trust-trusted: #f4868a;
  --np-trust-trusted-ring: #ff6a3d;
  --np-trust-verified: #ffb02e;

  /* ── Glow, not shadow — light blooms in the dark ─────────────────────── */
  --glow-cta: 0 8px 40px rgba(255, 120, 60, 0.35);
  --glow-amber: 0 0 24px rgba(255, 176, 46, 0.5);
  --glow-amber-soft: 0 0 16px rgba(255, 176, 46, 0.18);
  --glow-success: 0 0 10px #3ddc84;
  --bloom-warm: radial-gradient(closest-side, rgba(255, 106, 61, 0.2), transparent);
  --bloom-amber: radial-gradient(closest-side, rgba(255, 176, 46, 0.16), transparent);
  --overlay-scrim: rgba(4, 3, 7, 0.6);

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-display: "Instrument Serif", serif;  /* headlines; italic = emphasis */
  --font-sans: "Space Grotesk", sans-serif;   /* UI + body */
  --font-mono: "Space Mono", monospace;       /* data: distances, timers, eyebrows */

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-pill: 999px;
  --radius-btn: 20px;
  --radius-btn-lg: 22px;
  --radius-input: 20px;
  --radius-card: 22px;
  --radius-card-raised: 24px;
  --radius-card-featured: 26px;
  --radius-sheet: 32px;
}

/* ─────────────────────────────────────────────────────────────────────────
   DAY LAYER — landing-page only. NOT from the app.
   ─────────────────────────────────────────────────────────────────────────
   Night Pulse is dark-only by product decision (it's a night-time proximity
   app and the dark carries meaning), so there is no upstream light mode to
   port. These values are derived here for the light landing variant and have
   no owner in the design system — if the app ever ships a light theme, throw
   these away and port that instead.

   Derivation rules, so the two read as one brand:
     · Ink is violet-black (#14121a), echoing the night surface #0d0c11 —
       not the warm brown the old theme used.
     · Elevation still means "lighter step": cream canvas → white card.
     · The signature gradient is UNCHANGED. It is used only as a FILL with
       dark ink on top (CTA, marker, chips) — the relationship it has in the
       app. Amber as *text* fails contrast on cream, so accent text uses
       --day-accent-ink instead.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --day-canvas: #faf7f2;    /* page */
  --day-section: #f5f0e8;   /* alternating band */
  --day-recessed: #f2ede4;  /* recessed band, footer */
  --day-surface: #ffffff;   /* card / input — the raised step */

  --day-ink: #14121a;
  --day-muted: #5f5866;
  /* dim carries the 11px mono eyebrows, which appear on all four surfaces —
     darkened until it clears 4.5:1 against the worst of them (#f2ede4). */
  --day-dim: #6f6977;
  /* faint is the fused-row placeholder, and that row has no visible labels —
     the placeholder IS the label, so it's essential content, not decoration. */
  --day-faint: #7c7387;

  --day-line: #e3ddd6;
  --day-line-soft: #ece7df;

  /* Ember darkened until it clears 4.5:1 on the cream canvas — for small
     accent text (eyebrows, links) where the raw amber is unreadable. */
  --day-accent-ink: #c2410c;

  /* The signature as *text* on cream. The real gradient runs to amber, which
     drops to ~1.8:1 here; this keeps the ember hue family and stays legible
     on large display numerals. Fill-on-dark-ink is still the primary
     expression — reach for this only when the gradient must be type. */
  --day-gradient-text: linear-gradient(135deg, #c2410c, #ff6a3d);

  /* Softer bloom: a glow reads as haze on light, so it's pulled back. */
  --glow-cta-day: 0 8px 32px rgba(255, 106, 61, 0.28);
  --glow-cta-day-hover: 0 10px 40px rgba(255, 106, 61, 0.42);
}

/* ── Ambient motion — slow, never bouncy ──────────────────────────────── */
@keyframes np-ping {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes np-breathe {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Lucide icons — the app's icon language (lucide-react-native).
   Rendered as a CSS mask so glyphs tint with currentColor and inherit the
   surrounding token, exactly like the app's icons do.

   Usage:  <i class="i" style="--i:url(...icons/arrow-right.svg)"></i>
   or the named helpers below. Size with font-size or width/height.
   ───────────────────────────────────────────────────────────────────────── */
.i {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
  vertical-align: -0.125em;
}

.i-arrow-right   { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/arrow-right.svg"); }
.i-check         { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/circle-check.svg"); }
.i-bell          { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/bell.svg"); }
.i-heart         { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/heart.svg"); }
.i-message       { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/message-circle.svg"); }
.i-mail          { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/mail.svg"); }
.i-sparkles      { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/sparkles.svg"); }
.i-thumbs-up     { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/thumbs-up.svg"); }
.i-map-pin       { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/map-pin.svg"); }
.i-radar         { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/radar.svg"); }
.i-coffee        { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/coffee.svg"); }
.i-user-round    { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@0.462.0/icons/user-round.svg"); }