/* Walupi design tokens, redesign 2026: dense marketplace storefront +
   escrow-first portal. Rules:
   - indigo-950 = dark trust surfaces (header, escrow/wallet hero cards) only.
   - royal-* = primary actions and held-money signals only.
   - price = product prices only. accent (terracotta) = urgency, closing
     dates, deals, and alert dots only.
   - sky-* = in-transit and progress states only. danger-* = problems only.
     gold = rating stars only. Never invent new colours. */

/* Body and heading face (owner decision, 14 Sep 2026): Figtree, replacing
   Plus Jakarta Sans for body AND Space Grotesk for headings. Chosen over
   Urbanist for one reason: Walupi is read outdoors, in daylight, on cheap
   screens, and --text-xs is a 12px floor. Urbanist's circular bowls and
   modest x-height lose character differentiation at that size; Figtree's
   tall x-height and open apertures hold their colour. Variable 300-900.

   Space Grotesk survives on money numerals and the wordmark ONLY, subset to
   ASCII for that job (41KB of latin + latin-ext down to 12KB). Confined that
   way it stops being general decoration and becomes the ledger voice. Total
   font payload 90.2KB -> 42.3KB. Self-hosted; nothing is fetched from
   Google at runtime.

   Any glyph outside the money subset falls through the stack to Figtree,
   which is why --font-money names Figtree next and not a system face: a
   fallback must not change the shape of a number mid-figure. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin.202cfb54d4e6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.eca8d8b337ff.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/spacegrotesk-money.8f5923738a83.woff2") format("woff2");
}

:root {
  --paper: #f4f4f7;
  --surface: #ffffff;
  --ink: #16151f;
  --ink-60: #5f5f70;
  /* 4.5:1 or better on every ground it lands on: surface, paper,
     line-soft, sky-100 and the accent tint. The old #8b8a9a was 3.39:1
     on white and carried eyebrows, timestamps and fact labels. */
  --ink-40: #6b6a7c;
  --line: #e5e4ee;
  --line-soft: #f0eff5;

  /* Brightened one step (owner note, 2 Sep 2026: the old near-black indigo
     read too dark for a storefront). Same hues, more light; contrast on all
     dark surfaces stays AA for white and the muted companions. */
  --indigo-950: #2e239b;
  --indigo-950-muted: #cbc5f5;
  --indigo-950-soft: #b4a7fc;

  --royal-900: #392c8f;
  --royal-700: #5540c4;
  --royal-500: #7a63e6;
  --royal-200: #dcd5f8;
  --royal-100: #edeafb;

  --price: #0e7a46;
  /* The struck "was" price is --ink-40 (4.81:1 on paper, 5.28 on white).
     Deliberately not a new token: a second muted grey would drift. */
  /* 4.98:1 on its own tint, 5.06 on paper, 5.56 on white. The old
     #b4552e sat at 4.40, under AA for the small urgency copy it carries. */
  --accent: #a94d27;
  --accent-100: #fdf1de;
  --accent-line: #f3ddb5;
  /* Solid deal fill, white text on it (5.18:1). --accent stays the
     text-on-light value; #a94d27 as a FILL reads brown and muddy at pill
     size, which is why the savings on a deal card currently whisper.
     Rule: --accent for accent-coloured TEXT, --accent-600 for filled
     ribbons and flags that carry white text. */
  --accent-600: #c2410c;
  --gold: #e8a020;

  /* Neutral dark surface, added 14 Sep 2026. Before this every dark band on
     the site was indigo-950: the header, the trust band, the sign-in band
     and the escrow hero all the same slab, so the escrow hero, the one that
     is actually about the buyer's money, had nothing to be special against.
     --night is the ordinary dark ground; indigo-950 is now reserved, per
     FRONTEND.md, for the header and the escrow/wallet hero and nothing
     else. White on --night is 17.46:1, --night-muted on it 7.3:1. */
  --night: #1a1826;
  --night-muted: #a8a5bc;
  --night-line: #302c42;

  /* Warm second ground. The palette had exactly two page grounds, both cool
     (--paper and --surface), so zoning a long storefront page meant reaching
     for royal-100 again, which is how purple ended up on everything.
     --sand zones a section without spending the brand colour. Ink on it is
     16.63:1. */
  --sand: #f8f5f0;
  --sand-line: #eae4da;

  --sky-700: #1d5fd1;
  --sky-500: #3b82e8;
  --sky-100: #e4eefc;
  --danger-700: #a32c21;
  --danger-100: #fbeae8;

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Headings are Figtree now, at 700/800. --font-display keeps its name so
     the 18 sites already reading it need no edit; only its value changed. */
  --font-display: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Money and the wordmark only. Nothing else may name this. */
  --font-money: "Space Grotesk", "Figtree", system-ui, "Segoe UI", sans-serif;

  /* Type scale (added 11 Sep 2026). The build had 28 distinct font sizes and
     no scale: 8.5px, 10.5px, 11.5px, 12.5px and 13.5px all shipped, and 107
     of 190 size declarations sat at 13px or below. These seven steps are the
     whole vocabulary, and --text-xs is a hard floor: Walupi is read outdoors,
     in daylight, on cheap screens. */
  --text-xs: 12px;   /* captions, chips, timestamps. Never go below this. */
  --text-sm: 14px;   /* secondary and supporting copy */
  --text-md: 16px;   /* body default */
  --text-lg: 18px;   /* card titles, lead-ins */
  --text-xl: 22px;   /* section headings */
  --text-2xl: 28px;  /* page headings */
  --text-3xl: 36px;  /* hero numerals and hero headings */

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  /* Softened one step (owner note, 14 Sep 2026: the corners read too round).
     Same family, less curve: at 18px a product card's corner was eating into
     the photo inside it, and a 24px hero on a 390px phone curved for most of
     its own height. Commerce wants crisp edges around goods; the roundness
     was doing decoration, not structure. Radii step DOWN as elements nest
     (hero 20, card 14, control 10) so an inner corner always sits inside its
     outer one rather than fighting it. */
  --r-control: 8px;
  --r-card: 12px;
  --r-hero: 16px;
  --r-sheet: 16px;

  --shadow-cta: 0 -6px 18px rgba(23, 16, 64, 0.06);
  --shadow-pop: 0 6px 18px rgba(23, 16, 64, 0.1);
  /* Hover lift for cards on pointer devices only. Third shadow token, and
     the last: it exists so the lift is one value everywhere rather than a
     rgba() typed out per component. */
  --shadow-lift: 0 8px 22px rgba(23, 16, 64, 0.09);

  /* Motion. FRONTEND.md allows the HTMX swap fade and the snail marker and
     nothing decorative; these tokens keep the allowed motion to one curve
     and three durations instead of a hand-typed ms at each call site.
     Every rule that uses them sits behind prefers-reduced-motion. */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-press: 90ms;
  --dur-fast: 150ms;
  --dur-med: 260ms;
}