/* SendVo · Colors & Type
 * Source of truth: SendVo Brand Guidelines v1 (May 2026)
 * Five-color palette. No more. Inter Display + Inter + JetBrains Mono.
 */

/* ─────────────────────────────────────────────
 * Fonts
 *   · Inter — Google Fonts CDN (display + body share Inter for now)
 *   · JetBrains Mono — system fallback via `--sv-font-mono`
 * ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ─── Brand palette · 5 swatches ─── */
  --sv-pitch:        #0A0A0A; /* primary ink · dark surface */
  --sv-volt:         #FF5722; /* signal accent · CTAs · send state */
  --sv-paper:        #F7F5F0; /* background · light surface */
  --sv-stone:        #5C5C5C; /* body text · muted UI */
  --sv-ash:          #E5E3DD; /* lines · dividers · subtle fills */

  /* ─── Semantic states ─── */
  --sv-delivered:    #22C55E;
  --sv-in-transit:   #FF5722; /* same as Volt — "sending" reads as accent */
  --sv-review:       #F59E0B;
  --sv-undeliverable:#DC2626;

  /* ─── Tonal extensions (derived; do not introduce new hues) ─── */
  --sv-pitch-40:     rgba(10,10,10,0.40);
  --sv-pitch-18:     rgba(10,10,10,0.18);
  --sv-pitch-06:     rgba(10,10,10,0.06);
  --sv-paper-70:     rgba(247,245,240,0.70);  /* improved-contrast muted on dark surfaces */

  /* ─── Semantic surface tokens ─── */
  --sv-bg-elevated:      #FFFFFF;
  --sv-bg-dark:          var(--sv-pitch);
  --sv-bg-dark-elevated: #141414;             /* dark surface raised above bg-dark — postcard back */
  --sv-cream:            #FAF4E6;             /* cash-offer postcard surface · alternate to --sv-paper */
  --sv-border-strong:#CFCDC6;

  /* ─── Type families ─── */
  --sv-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sv-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sv-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── Type scale (px) — from §09 ─── */
  --sv-text-display-xl: 80px;    /* hero h1 — page-level only */
  --sv-text-display:    48px;    /* section h2s — all sections */
  --sv-text-h1:         32px;    /* card-level large headings */
  --sv-text-h2:         22px;    /* sub-headings within cards */
  --sv-text-body-lg:    17px;    /* hero lede paragraph (lead-in copy) */
  --sv-text-h3:         16px;    /* card body titles */
  --sv-text-body-md:    15px;    /* section sub-copy, case quotes */
  --sv-text-body:       14px;    /* default body copy */
  --sv-text-link:       13px;    /* nav links, footer, inline anchors */
  --sv-text-small:      12px;    /* table copy, captions, in-card mono */
  --sv-text-micro:      11px;    /* eyebrow, micro labels */
  /* The scale runs 11 / 12 / 13 / 14 / 15 / 16 / 17 / 22 / 32 / 48 / 80.
   * Intermediate sizes (13, 15, 17) are intentional per design — body
   * density varies by content role. Snap inline `fontSize` literals to
   * the nearest token rather than re-introducing arbitrary numbers. */

  /* ─── Spacing scale (4px base) — only the values currently used ─── */
  --sv-sp-3: 12px;
  --sv-sp-4: 16px;
  --sv-sp-5: 20px;
  --sv-sp-16: 64px;

  /* ─── Radius — UI components live at 6px, surfaces at 10–14px ─── */
  --sv-radius-xs: 4px;
  --sv-radius-sm: 6px;   /* buttons, inputs (per §10 — 6px radius) */
  --sv-radius-md: 10px;
  --sv-radius-lg: 14px;
  --sv-radius-pill: 999px;

  /* ─── Elevation — restrained; brand reads flat ─── */
  --sv-shadow-1: 0 1px 0 rgba(10,10,10,0.04), 0 1px 2px rgba(10,10,10,0.04);

  /* ─── Motion ─── */
  --sv-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ─────────────────────────────────────────────
 * A11y — focus ring + skip link
 * Applies a brand-token focus ring to every focusable element so keyboard
 * users get a visible cue. The skip-link sits visually-hidden at the top of
 * the document and reveals on focus.
 * ───────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--sv-volt);
  outline-offset: 2px;
  border-radius: var(--sv-radius-xs);
}
input[type="range"]:focus-visible {
  outline-offset: 4px;
}

.sv-skip-link {
  position: absolute;
  top: -64px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--sv-pitch);
  color: var(--sv-paper);
  font-family: var(--sv-font-body);
  font-size: var(--sv-text-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--sv-radius-sm);
  transition: top 180ms var(--sv-ease);
}
.sv-skip-link:focus,
.sv-skip-link:focus-visible {
  top: 12px;
}

/* Anchor scroll-offset — sticky nav is ~51px tall (14px padding + 22px
 * content + 1px border); the buffer keeps deep links clear of it. */
section[id] {
  scroll-margin-top: 80px;
}

/* ─────────────────────────────────────────────
 * Text-link hover — plain-text anchors (nav, footer, inline links).
 * Buttons keep their own hover state via React in SVBtn.
 * Color lives in CSS so :hover can override it; layout/typography
 * still come from inline styles on each anchor.
 * ───────────────────────────────────────────── */
.sv-link {
  color: var(--sv-pitch);
  text-decoration: none;
  transition: color 150ms var(--sv-ease);
}
.sv-link:hover {
  color: var(--sv-volt);
}

/* ─────────────────────────────────────────────
 * Tab buttons — segmented controls and toggle pairs. `aria-pressed`
 * carries the selected state; the selected button uses inline styles
 * (pitch bg, paper fg), the unpressed half gets a hover affordance via
 * CSS. Three variants:
 *   .sv-tab            — filled-toggle (pressed: pitch bg, unpressed: transparent)
 *   .sv-tab--outlined  — outlined chip (unpressed: white bg, border)
 *   .sv-tab--underline — bottom-border indicator (unpressed: stone text)
 * ───────────────────────────────────────────── */
.sv-tab {
  transition: background 150ms var(--sv-ease), color 150ms var(--sv-ease);
}
.sv-tab[aria-pressed="false"]:hover {
  background: var(--sv-pitch-06);
}
.sv-tab.sv-tab--outlined[aria-pressed="false"] {
  background: var(--sv-bg-elevated);
}
.sv-tab.sv-tab--outlined[aria-pressed="false"]:hover {
  background: var(--sv-pitch-06);
}
.sv-tab.sv-tab--underline[aria-pressed="false"]:hover {
  background: transparent;
  color: var(--sv-pitch);
}

/* ─────────────────────────────────────────────
 * US-map state cells — used in the audience demo's state-mode panel.
 * Selected state fills volt via inline style (so `aria-pressed="true"`
 * wins); unselected gets the default fill from this class and a soft
 * volt tint on hover so the affordance reads.
 * ───────────────────────────────────────────── */
.us-state {
  fill: var(--sv-bg-elevated);
  stroke: var(--sv-ash);
  stroke-width: 0.5;
  cursor: pointer;
  transition: fill 150ms var(--sv-ease);
}
.us-state[aria-pressed="false"]:hover {
  fill: color-mix(in srgb, var(--sv-volt) 14%, var(--sv-bg-elevated));
}

/* ─────────────────────────────────────────────
 * Mobile responsive overrides
 * Layout in JSX uses inline styles; these utility classes override
 * via the cascade + !important at <=720px. Apply them by attaching
 * the matching `className` to the JSX container.
 *
 *  .sv-section            section padding-x shrinks 56px → 20px
 *  .sv-section-tall       section padding-y shrinks 96px → 56px
 *  .sv-grid-stack         multi-col grid / flex-row collapses to 1 col
 *  .sv-grid-stack-2       grid collapses to 2 cols
 *  (sv-grid-scroll        removed — was used for compare + pipeline tables
 *                          on mobile; both now use no-scroll layouts)
 *  .sv-flex-wrap          flex-row gets wrap + reset shrink-0
 *  .sv-card-pad           card padding 40px 48px → 24px 20px
 *  .sv-hero-demo          fixed `height` becomes `minHeight`
 *  .sv-mobile-hide        display: none on mobile
 *  .sv-hero-h1            hero <h1> clamps display-xl → min 40px
 *  .sv-card-headline      32-px card headline clamps to 22px floor
 *  .sv-number-cell        Numbers strip — drop border-left + horizontal pad
 *  .sv-pipeline-chevron   absolute-positioned chevrons hide (decoupled from
 *                         the scrolled grid; dots + labels carry the read)
 * ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .sv-section { padding-left: 20px !important; padding-right: 20px !important; }
  /* Tall sections kept generous padding on mobile per the breathing-room
   * pass — section-to-section air helps the page feel structured rather
   * than crammed. `--sv-sp-16` = 64px (token). */
  .sv-section-tall { padding-top: var(--sv-sp-16) !important; padding-bottom: var(--sv-sp-16) !important; }
  /* SVSectionH2 lives at 48px / line-height 1.02 on desktop — tight by
   * design. On narrow viewports the clamped size hits 28-32px where
   * 1.02 makes adjacent lines kiss. Loosen to 1.1 for readability. */
  .sv-section-h2 { line-height: 1.1 !important; }

  .sv-grid-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .sv-grid-stack-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .sv-flex-wrap {
    flex-wrap: wrap !important;
    row-gap: var(--sv-sp-4);
  }
  .sv-flex-wrap > * { flex-shrink: 1 !important; }

  .sv-card-pad { padding: 24px 20px !important; }

  /* HeroDemo loses its fixed desktop height so the tracking-tab stack
   * (campaign card + breakdown table + events feed) doesn't clip; an
   * intrinsic-height container grows to whatever the tab body needs. */
  .sv-hero-demo { height: auto !important; }

  .sv-mobile-hide { display: none !important; }

  /* Responsive type — clamp displays so they don't overflow narrow viewports.
   * Anchor min size to a token (h1 → display, card headline → h2). */
  .sv-hero-h1 {
    font-size: clamp(var(--sv-text-display), 11vw, var(--sv-text-display-xl)) !important;
    line-height: 1.06 !important;
  }
  .sv-card-headline {
    font-size: clamp(var(--sv-text-h2), 6vw, var(--sv-text-h1)) !important;
  }

  /* Numbers strip — collapse vertical-rule borders + tighten the cell box */
  .sv-number-cell {
    padding: 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--sv-ash);
    padding-top: 24px !important;
  }
  .sv-number-cell:first-child { border-top: none; padding-top: 0 !important; }
  .sv-number-cell .sv-mono-jumbo { font-size: clamp(var(--sv-text-display), 13vw, var(--sv-text-display-xl)) !important; }

  /* Pipeline — desktop is a horizontal track of 8 stations with absolute-
   * positioned chevrons between dots. On mobile we rotate to a vertical
   * stepper so all 8 stations fit a 375 px viewport without scrolling.
   * Chevrons are absolute-positioned against the card (not the grid),
   * so once stations stack they'd float disconnected — hide them. Dot
   * color + ring carries the "current step" indicator. */
  .sv-pipeline-chevron { display: none !important; }
  .sv-pipeline-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sv-sp-5) !important;
  }
  /* Each station gets its own 2-row × 3-col grid. Time + dot span both
   * rows on the left; title (row 1) and meta (row 2) stack on the right.
   * Grid display overrides the desktop inline `display: flex`. */
  .sv-pipeline-station {
    display: grid !important;
    grid-template-columns: 48px 18px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: var(--sv-sp-3) !important;
    row-gap: 2px !important;
    padding: 0 !important;
    align-items: center !important;
    position: relative;
  }
  /* Vertical connector line between dots. Pseudo on every non-last
   * station starts at the dot's vertical center and extends past the
   * station's bottom into the row-gap so it meets the next dot's top
   * half. Ash by default; volt when this station's outflow is
   * completed (data-completed="true" → `i < step` from the JSX). The
   * dot sits z-index:1 over the line so its volt fill/ring reads. */
  .sv-pipeline-station:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    /* center of dot column = 48 + sp-3 + 18/2 = 69px from station left */
    left: calc(48px + var(--sv-sp-3) + 9px);
    transform: translateX(-50%);
    width: 1px;
    height: calc(100% + var(--sv-sp-5));
    background: var(--sv-ash);
    pointer-events: none;
    z-index: 0;
    transition: background 240ms var(--sv-ease);
  }
  .sv-pipeline-station[data-completed="true"]:not(:last-child)::after {
    background: var(--sv-volt);
  }
  .sv-pipeline-station .sv-pipeline-time {
    grid-row: 1 / span 2;
    grid-column: 1;
    text-align: right;
    align-self: center;
    font-size: var(--sv-text-small) !important;
  }
  .sv-pipeline-station .sv-pipeline-dot {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    justify-self: center;
    position: relative;
    z-index: 1;
  }
  .sv-pipeline-station .sv-pipeline-title {
    grid-row: 1;
    grid-column: 3;
    text-align: left !important;
    max-width: none !important;
    font-size: var(--sv-text-h3) !important;
    align-self: end;
  }
  .sv-pipeline-station .sv-pipeline-meta {
    grid-row: 2;
    grid-column: 3;
    align-self: start;
    font-size: var(--sv-text-small) !important;
  }

  /* Nav — give the sticky header a tighter padded box; scroll-margin
   * follows. The link cluster gets `.sv-mobile-hide` on the JSX side. */
  .sv-nav-row { padding: 14px 20px !important; }
  section[id] { scroll-margin-top: 60px; }
}

/* ─────────────────────────────────────────────
 * Touch-target sizing — applies on touch devices regardless of
 * viewport width. `pointer: coarse` is true for finger input;
 * the viewport-width fallback covers older browsers and mobile
 * sims that don't report coarse. SVBtn exposes `data-size`; sm/md
 * lift to 44px (lg already clears it). `.sv-touch-target` is a
 * generic class for non-SVBtn controls (segmented tabs, chip
 * pickers, mode toggles).
 * ───────────────────────────────────────────── */
@media (pointer: coarse), (max-width: 720px) {
  .sv-btn[data-size="sm"], .sv-btn[data-size="md"] { min-height: 44px; }
  .sv-touch-target { min-height: 44px; }
  /* Nav + footer `<a>` links — transparent vertical padding pushes the
   * implicit tap area up to ≥44px. Visible text size unchanged. Scoped
   * to nav + footer descendants only because `.sv-link` is also used
   * on inline body links (e.g. the hero "Get a price for your send →"
   * sits mid-paragraph); a body-flow `<a>` shouldn't grow vertically. */
  nav a.sv-link, footer a.sv-link { padding: var(--sv-sp-3) 0; }
}