/* QuickHand glue for the kitchen kit (vendored from claudecode/kitchen-kit on 23 October 2026).
   Three jobs: the tokens the kit reads, the magnet treatment for .primary-btn (the kit ships the
   script, each site styles the button), and the few overrides that fit the kit's ice-blue defaults
   to QuickHand's black ground and amber mark. To revert the whole kit, delete the /kitchen links in
   index.html and this folder; the React pages only call window.PRE* when it exists. */

:root {
  --accent: #e8963a;
  --radius: 16px;
  --muted-color: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.12);
  --bg-inner: #000000;
  --font-main: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-heading: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ---- Magnet (kitchen/js/magnet.js) ---------------------------------------
   The lean rides on `translate`, so a Motion `transform` (whileHover scale) on
   the same element composes with it instead of fighting it. The light is a
   radial sheen that follows the cursor; --btn-light flips it dark on white
   buttons. Layout and colour stay with each button's own classes. */
.primary-btn {
  --btn-light: rgba(255, 255, 255, 0.09);
  position: relative;
  isolation: isolate;
  translate: var(--lean-x, 0px) var(--lean-y, 0px);
}
/* Doubled so it outranks single-class transition utilities (Tailwind, the static page's .btn). */
.primary-btn.primary-btn {
  transition-property: translate, transform, background-color, border-color, color, opacity;
  transition-duration: 0.45s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.primary-btn.qh-btn-on-light { --btn-light: rgba(0, 0, 0, 0.07); }
.primary-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(150px circle at var(--light-x, 50%) var(--light-y, 50%), var(--btn-light), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.primary-btn:hover::after,
.primary-btn[data-near="true"]::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .primary-btn { transition: none; translate: 0 0; }
  .primary-btn::after { transition: none; }
}

/* ---- Hold to confirm: amber instead of ice blue ------------------------- */
.pre-hold[data-tone="accent"] {
  --hold-border: rgba(232, 150, 58, 0.45);
  --hold-surface: rgba(232, 150, 58, 0.08);
  --hold-surface-hover: rgba(232, 150, 58, 0.14);
}
.pre-hold.qh-hold {
  width: 100%;
  min-height: 48px;
  border-radius: 9999px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ---- Tactile accordion rows: an open row sits held down ------------------
   The kit keys the held look on aria-pressed. The FAQ rows are disclosure
   buttons, where aria-expanded is the right attribute, so the same three
   declarations are mapped onto it here. */
.pre-tactile.pre-tactile[aria-expanded] { --tactile-depth: 3px; }
.pre-tactile.pre-tactile[aria-expanded="true"] {
  --lift: 0px;
  background-color: var(--tactile-face);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  translate: 0 var(--tactile-travel);
}
.pre-tactile.pre-tactile[aria-expanded="true"]::before {
  clip-path: inset(0 0 calc((var(--tactile-depth) - var(--tactile-travel)) * -1) 0);
}
.pre-tactile.qh-faq-row {
  --tactile-face: #15171c;
  --tactile-face-hover: #1b1e24;
  --tactile-edge: #090a0c;
}
/* The home page's mobile menu key: open = pressed, with the amber face the kit gives a held toggle. */
.pre-tactile.qh-burger {
  --tactile-face: #1a1d23;
  --tactile-face-hover: #22262d;
  --tactile-edge: #0b0c0f;
  --tactile-text: rgba(255, 255, 255, 0.85);
  z-index: 60;
}
.pre-tactile.qh-burger[aria-pressed="true"] { --tactile-edge: #8a5a22; }

/* Header badge foil: keep the pill's own rounding on the overlay layers. */
.pre-foil.rounded-full .pre-foil__layer { border-radius: 9999px; }

/* ---- Receipt printer on the download page -------------------------------- */
.qh-receipt .pre-rp { --rp-paper: #f1efe8; }
.qh-receipt .pre-rp__mark,
.qh-receipt .pre-rp__brand { letter-spacing: 0.18em; }

/* ---- Logo trace in the page preloader ----------------------------------- */
.qh-preloader-mark { color: var(--accent); }