/* 1st-Pouf, MIT © Mojtaba Beheshti.
 * Theme/aliases/shadows adapted for this static site from the official registry.
 * Original source retained in docs/vendor/pouf-original.css. License: /licenses/1st-pouf.txt
 */
:root {
  /* -- Palette: verbatim from the reference ------------------------------ */
  --color-bg: #f0e9ff;
  --color-ink: #3a2e5c;
  --color-muted: #71609b;
  --color-pink: #ffb3d1;
  --color-purple: #c9a8ff;
  --color-blue: #9ec8ff;
  --color-mint: #a8f0d0;
  --color-yellow: #ffe58a;
  --color-orange: #ffb38a;
  --color-surface: #ffffff;

  /* 'Nunito Variable' FIRST, and it is not interchangeable with 'Nunito':
   * @fontsource-variable/nunito — the package the install docs tell you to
   * import — registers its @font-face under the family name 'Nunito Variable'.
   * A stack that only says 'Nunito' therefore matches nothing, silently falls
   * through to SF Pro Rounded / Helvetica Neue on macOS and DejaVu Sans on
   * Linux, and 1st-Pouf renders in a system face on every machine. Confirmed with
   * Chrome's CSS.getPlatformFontsForNode: the nav was drawing in Helvetica Neue
   * while document.fonts.check('Nunito Variable') returned false.
   * 'Nunito' is kept behind it for anyone on the static @fontsource/nunito
   * package, which does register that name. */
  --font-pouf: 'Nunito Variable', 'Nunito', 'SF Pro Rounded', 'Helvetica Neue', system-ui, sans-serif;

  /* -- Radii: verbatim (card 32, control 20, blob 24) -------------------- */
  --radius-card: 32px;
  --radius-control: 20px;
  --radius-blob: 24px;
  --radius-pill: 999px;
}

:root {
  /* -- Legacy token aliases. Components and the recipes below speak these
   *    names; @theme above is the Tailwind-facing vocabulary. Both resolve
   *    to the same values. -------------------------------------------- */
  --bg: var(--color-bg);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --pink: var(--color-pink);
  --purple: var(--color-purple);
  --blue: var(--color-blue);
  --mint: var(--color-mint);
  --yellow: var(--color-yellow);
  --orange: var(--color-orange);
  --surface: var(--color-surface);
  --font: var(--font-pouf);
  --r-card: var(--radius-card);
  --r-control: var(--radius-control);
  --r-blob: var(--radius-blob);
  --r-pill: var(--radius-pill);

  /* -- Ink that sits ON a pastel accent fill (a solid Button, a Badge, a Blob,
   *    an active NavLink) rather than on the page.
   *
   *    It is a separate token ONLY because of dark mode. The accents stay
   *    pastel in both themes — they are the brand — so text on them must stay
   *    dark, while --ink flips to near-white for the page. Collapsing the two
   *    puts #efe9ff on #c9a8ff, which is unreadable. In light mode this
   *    resolves to exactly --ink, so every computed colour is unchanged. --- */
  --on-accent: var(--ink);
  /* Secondary copy on a pastel fill. Fixed dark ink rather than `--muted`,
   * because `--muted` follows the page theme and becomes lavender in dark
   * mode. #493b64 clears 5.03:1 on the lowest-contrast brand accent. */
  --on-accent-muted: #493b64;
  /* Inverse and code surfaces intentionally diverge in dark mode. Simply
   * swapping page ink/background makes command bars and inverse pills turn
   * into large white slabs, which overwhelms an otherwise dark interface. */
  --inverse-surface: var(--ink);
  --inverse-ink: var(--bg);
  --code-surface: var(--ink);
  --code-ink: var(--bg);

  /* -- Semantic aliases. Screens speak intent ("this is a loss"), never
   *    colour ("this is pink"), so a re-theme is a change here alone. ---- */
  --up: var(--mint);
  --down: var(--pink);
  --warn: var(--yellow);
  --info: var(--blue);
  --idle: var(--purple);

  /* -- Spacing scale. The reference uses 6/8/10/12/14/16/20/24/26/32/40. -- */
  --s1: 6px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;

  /* -- The clay recipe. Three shadows encoding one physical claim:
   *    light from above (inner top highlight), the surface's own thickness
   *    (inner floor shadow), and the cast onto the page (outer drop). ---- */
  /* -- Floor thickness as tokens, because the floor inset paints INSIDE the
   *    box: symmetric padding therefore reads bottom-heavy — the lip eats
   *    that much of the lower whitespace. White containers below bias their
   *    vertical padding by half their lip (same total height, optically
   *    centred content). The blob solves the same problem with a
   *    translateY(-2px) on its glyph. ---------------------------------- */
  --lip: 10px;
  --lip-row: 6px;
  --pouf-card:
    inset 0 calc(-1 * var(--lip)) 0 rgba(201, 168, 255, 0.35),
    inset 0 6px 0 rgba(255, 255, 255, 0.9),
    0 20px 40px rgba(58, 46, 92, 0.15);
  --pouf-control:
    inset 0 -6px 0 rgba(0, 0, 0, 0.15), inset 0 4px 0 rgba(255, 255, 255, 0.35),
    0 8px 16px rgba(58, 46, 92, 0.2);
  --pouf-control-active:
    inset 0 -3px 0 rgba(0, 0, 0, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.35),
    0 4px 10px rgba(58, 46, 92, 0.15);
  --pouf-blob:
    inset 0 -8px 0 rgba(0, 0, 0, 0.12), inset 0 4px 0 rgba(255, 255, 255, 0.4),
    0 10px 20px rgba(58, 46, 92, 0.15);
  --pouf-field:
    inset 0 -4px 0 rgba(0, 0, 0, 0.06), inset 0 4px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 2px rgba(201, 168, 255, 0.2);
  --pouf-field-focus:
    inset 0 -4px 0 rgba(0, 0, 0, 0.06), inset 0 4px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 3px var(--purple);

  /* -- Cushion rows. "Every row a cushion" at 32px padding makes a 50-row
   *    log unnavigable, so rows get their own tighter scale. The shadow
   *    recipe is kept whole -- only the padding tightens. ---------------- */
  --pouf-row:
    inset 0 calc(-1 * var(--lip-row)) 0 rgba(201, 168, 255, 0.3),
    inset 0 4px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(58, 46, 92, 0.1);
  --pouf-row-hover:
    inset 0 calc(-1 * var(--lip-row)) 0 rgba(201, 168, 255, 0.45),
    inset 0 4px 0 rgba(255, 255, 255, 0.95),
    0 12px 24px rgba(58, 46, 92, 0.16);
}