/* Harps website — shared design tokens. Inherited from ../voice-capture/design.md */

@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Medium.woff2') format('woff2');
  font-display: swap;
  font-weight: 500;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-SemiBold.woff2') format('woff2');
  font-display: swap;
  font-weight: 600;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Medium.woff2') format('woff2');
  font-display: swap;
  font-weight: 500;
}

:root {
  /* Dark-only, by design decision — no light variant. Pulled from the
     Harps Figma file's own color system
     (figma.com/design/k3JW2wFEx1YQsIDYqneqn7): background/primary vs a
     darker background/deep for cards, capsules, and mockup windows. */
  color-scheme: dark;

  --bg: #13131c;       /* background/primary */
  --side: #0d0d16;     /* background/deep — capsule, cards, mockup windows */
  --sel: #1c1c24;      /* surface/card — raised fills: hovers, keys, tracks, soft buttons */
  --hairline: rgba(255, 255, 255, 0.07);  /* border/default */
  --text: #fafafa;                        /* text/primary */
  --text-muted: rgba(255, 255, 255, 0.56); /* text/secondary */
  --text-subtle: rgba(255, 255, 255, 0.44); /* text/muted */
  --text-faint: rgba(255, 255, 255, 0.3);   /* text/subtle */
  --label-mono: rgba(255, 255, 255, 0.478); /* text/tertiary */
  --live: #130cee;     /* accent/primary */
  --up: #4ade80;       /* accent/success */

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale. Pick from these rather than inventing a size. Text inside
     product illustrations (the hero demo, the how-it-works mockups) is
     drawn at mockup scale and keeps local sizes. */
  --fs-display: 74px;     /* hero headline */
  --fs-display-sm: 53px;  /* hero headline, phone */
  --fs-figure: 44px;      /* big numbers — price */
  --fs-title-1: 39px;     /* section titles */
  --fs-title-2: 34px;     /* page titles (inner pages) */
  --fs-title-3: 20px;     /* hero subtitle, step titles, brand */
  --fs-title-4: 18px;     /* in-page headings */
  --fs-lead: 16px;        /* card titles */
  --fs-body-lg: 15px;     /* ledes */
  --fs-body: 14px;        /* body copy */
  --fs-ui: 13px;          /* nav, buttons, rows, secondary copy */
  --fs-small: 12px;       /* footers, lists, meta */
  --fs-micro: 11px;       /* mono labels, dates, badges */

  /* Motion. --ease-out for entrances, hovers, and color changes;
     --ease-swap for the hero demo's field/capsule morph. */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-swap: cubic-bezier(.32,.72,0,1);
  --dur-fast: .15s;   /* link/text color hovers */
  --dur-base: .5s;    /* surface hovers, page-load entrances */
  --dur-slow: .6s;    /* scroll reveals */

  /* Layout rhythm. */
  --page-max: 1200px;         /* home page content width */
  --prose-max: 760px;         /* inner pages (privacy, changelog) */
  --gutter: 40px;             /* page side padding */
  --gutter-sm: 20px;          /* same, phone */
  --section-gap: 225px;       /* space above each home-page section */
  --section-gap-sm: 144px;    /* same, phone */
  --section-end: 216px;       /* space below the last section */

  --r-window: 14px;
  --r-popover: 13px;
  --r-card: 10px;
  --r-control: 8px;
  --r-pill: 48px;
  --r-capsule: 999px;

  --shadow-window:
    0 24px 70px 0 rgba(0, 0, 0, 0.18),
    0 6px 18px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-float:
    0 18px 50px 0 rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.09);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 14.4px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--label-mono);
}

.proto-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--side);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}
.proto-bar a {
  color: var(--text-faint);
  text-decoration: none;
}
.proto-bar a:hover {
  color: var(--text-subtle);
}