/**
 * Button presentation utilities (q-namespaced). Composed by @apply-ing quanta
 * q- tokens; every color / spacing / radius / border-width / typography / shadow
 * value resolves to an emitted quanta token (or a token-derived value). Icons
 * are children, sized per size via `& svg`.
 *
 * Pinned PIXEL-PERFECT to Figma (dark theme). Default and Marketing share ONE
 * 5-step size ramp (Figma: "geometry identical to Button; only the visual layer
 * differs"); the size names were rebased to xxs..lg (previously xs..xl):
 *   Default   set 143:2356 / 107:2976   primary·secondary·tertiary·outline·
 *             ghost·danger·dangerSoft·BrandSoft       (sizes xxs/xs/sm/md)
 *   Marketing set 1533:1490              marketing primary/secondary/tertiary/
 *             ghost · special brand/pink   (primary/secondary xs..lg; rest xxs..lg)
 *   states    default/hover/focus/disabled
 *
 * Per size — height / h-padding / v-padding / radius / icon / type style. Type
 * is the COMPOSITE text-q-* utility (= Figma's named style) — NEVER hand-rolled,
 * so family(Inter)/size/weight/line-height/letter-spacing track the tokens:
 *   xxs  h 24  px 6   py 0   r 150(6)   icon 12  caption-sm-medium
 *   xs   h 32  px 8   py 6   r 200(8)   icon 16  label-sm-medium
 *   sm   h 40  px 12  py 8   r 250(10)  icon 20  label-sm-medium  (danger r 300)
 *   md   h 48  px 16  py 12  r 300(12)  icon 24  label-lg-semi-bold
 *   lg   h 56  px 20  py 16  r 300(12)  icon 24  label-lg-semi-bold
 * Weight is medium up to sm (xxs/xs/sm); semi-bold at md/lg — uniform across
 * variants (no per-variant weight bump).
 *
 * Notes:
 *   - radius uses the emitted --hf-radius-* tokens (150/200/250/300).
 *   - hover/focus = a flat overlay composited over the fill:
 *     lime / glass / red lighten with white 20% (transparent-light-20), white
 *     darkens with black 50% (transparent-dark-50). focus adds the lime ring.
 */

/* button() emits literal q-button-* strings (VARIANT_CLASS / SIZE_CLASS in
 * button.tsx). Tailwind skips node_modules for automatic content detection and
 * quanta is consumed as a symlinked package, so point the scanner explicitly at
 * the colocated source; the literals there match the @utility rules below. The
 * TS unions are the single source of truth — no hand-maintained safelist. */
@source "./button.tsx";

/* Reusable keyboard-focus rings — a tokenized background-colored offset gap
 * then a tokenized ring (Figma double-shadow: 0 0 0 2px background/primary,
 * 0 0 0 4px border/focus). Apply to any interactive element; offset assumes the
 * element sits on background-primary. General-purpose: hoist to a shared
 * focus.css if a second component needs them.
 *   q-focus-ring       — default (lime border-focus)
 *   q-focus-ring-error — destructive (red state/error-glow) */
@utility q-focus-ring {
  &:focus-visible {
    box-shadow:
      0 0 0 var(--hf-border-width-thick) var(--hf-color-background-primary),
      0 0 0 var(--hf-space-100) var(--hf-color-border-focus);
  }
}
@utility q-focus-ring-error {
  &:focus-visible {
    box-shadow:
      0 0 0 var(--hf-border-width-thick) var(--hf-color-background-primary),
      0 0 0 var(--hf-space-100) var(--hf-color-state-error-glow);
  }
}

@utility q-button {
  /* layout — [icon] label [icon] as centered grid columns */
  @apply inline-grid grid-flow-col max-w-full content-center items-center justify-center overflow-hidden;
  /* label */
  @apply text-center text-ellipsis whitespace-nowrap select-none;
  /* interaction */
  @apply cursor-pointer outline-none;
  @apply transition-[color,background-color,background-image,border-color,box-shadow];
  @apply q-focus-ring;
  @apply disabled:pointer-events-none disabled:opacity-50;
}

@utility q-button-label-frame {
  align-items: center;
  display: flex;
  gap: var(--hf-space-0);
  justify-content: center;
  min-inline-size: 0;
  overflow: hidden;
  padding-block: var(--hf-space-0);
  padding-inline: var(--hf-space-150);
}

.q-button:has(.q-button-label-frame) {
  gap: var(--hf-space-0);
}

/* Sizes — height/min-width on the quanta spacing scale; min-width == height
 * makes icon-only buttons square. Typography is the composite text-q-* utility
 * (= Figma's named type style) — never hand-rolled. Legacy direct-child icons
 * keep gap 6px; start/end slots use q-button-label-frame and collapse it to 0. */
@utility q-button-xxs {
  height: var(--hf-space-600);
  min-width: var(--hf-space-600);
  gap: var(--hf-space-150);
  padding: var(--hf-space-0) var(--hf-space-300);
  border-radius: var(--hf-radius-150);
  @apply text-q-caption-sm-medium;
  & svg {
    width: var(--hf-space-300);
    height: var(--hf-space-300);
  }
}
@utility q-button-xs {
  height: var(--hf-space-800);
  min-width: var(--hf-space-800);
  gap: var(--hf-space-150);
  padding: var(--hf-space-150) var(--hf-space-300);
  border-radius: var(--hf-radius-200);
  @apply text-q-label-sm-medium;
  & svg {
    width: var(--hf-space-400);
    height: var(--hf-space-400);
  }
}
@utility q-button-sm {
  height: var(--hf-space-1000);
  min-width: var(--hf-space-1000);
  gap: var(--hf-space-150);
  padding: var(--hf-space-200) var(--hf-space-400);
  border-radius: var(--hf-radius-250);
  @apply text-q-label-sm-medium;
  & svg {
    width: var(--hf-space-500);
    height: var(--hf-space-500);
  }
}
@utility q-button-md {
  height: var(--hf-space-1200);
  min-width: var(--hf-space-1200);
  gap: var(--hf-space-150);
  padding: var(--hf-space-400) var(--hf-space-400);
  border-radius: var(--hf-radius-300);
  @apply text-q-label-lg-semi-bold;
  & svg {
    width: var(--hf-space-600);
    height: var(--hf-space-600);
  }
}
@utility q-button-lg {
  height: var(--hf-space-1400);
  min-width: var(--hf-space-1400);
  gap: var(--hf-space-150);
  padding: var(--hf-space-400) var(--hf-space-500);
  border-radius: var(--hf-radius-300);
  @apply text-q-label-lg-semi-bold;
  & svg {
    width: var(--hf-space-600);
    height: var(--hf-space-600);
  }
}

/* ───────────────────────── Default variants (143:2356) ─────────────────────
 * fill / text / border / shadow / hover, each pinned to Figma. */

/* primary: lime brand, dark label, 1.5px light edge; hover +20% white overlay.
 * Figma gives the border as raw rgba(255,255,255,0.45), with no variable. */
@utility q-button-primary {
  @apply bg-q-button-brand text-q-text-inverse;
  &:hover,
  &:focus-visible {
    background-image: linear-gradient(var(--hf-color-transparent-light-20), var(--hf-color-transparent-light-20));
  }
}

/* secondary: white, dark label + drop shadow (0 2 4 black/10); hover +50% black overlay */
@utility q-button-secondary {
  @apply bg-q-button-primary text-q-text-inverse;
  box-shadow: var(--hf-shadow-raised-sm);
  &:hover,
  &:focus-visible {
    background-image: linear-gradient(var(--hf-color-transparent-dark-50), var(--hf-color-transparent-dark-50));
  }
  &:focus-visible {
    box-shadow:
      0 0 0 var(--hf-border-width-thick) var(--hf-color-background-primary),
      0 0 0 var(--hf-space-100) var(--hf-color-border-focus),
      var(--hf-shadow-raised-sm);
  }
}

/* tertiary: translucent glass surface (white 10%) + background blur 40px
 * (Figma background-blur radius 80 → CSS /2); hover +20% white overlay */
@utility q-button-tertiary {
  background-color: var(--hf-color-transparent-light-10);
  @apply text-q-text-primary;
  backdrop-filter: blur(var(--hf-space-1000));
  &:hover,
  &:focus-visible {
    background-image: linear-gradient(var(--hf-color-transparent-light-20), var(--hf-color-transparent-light-20));
  }
}

/* outline: transparent, thin default-border (white 10%); hover/focus reveal a dim fill */
@utility q-button-outline {
  @apply bg-transparent text-q-text-primary;
  @apply border-q-thin border-q-border-default;
  @apply hover:bg-q-overlay-dim-strong focus-visible:bg-q-overlay-dim-strong;
}

/* ghost: transparent, no border; hover/focus reveal a dim fill */
@utility q-button-ghost {
  @apply bg-transparent text-q-text-primary;
  @apply hover:bg-q-overlay-dim-strong focus-visible:bg-q-overlay-dim-strong;
}

/* danger: destructive red, white label; hover +20% white overlay.
 * Focus ring is the red error-glow (not the lime default) — Figma 106:3513. */
@utility q-button-danger {
  @apply bg-q-button-destructive text-q-text-primary;
  &:hover,
  &:focus-visible {
    background-image: linear-gradient(var(--hf-color-transparent-light-20), var(--hf-color-transparent-light-20));
  }
  @apply q-focus-ring-error;
}

/* dangerSoft: error-bg surface, error-fg label; hover +20% white overlay.
 * Focus ring is the red error-glow (not the lime default) — Figma 106:3753. */
@utility q-button-danger-soft {
  @apply bg-q-state-error-bg text-q-state-error-fg;
  &:hover,
  &:focus-visible {
    background-image: linear-gradient(var(--hf-color-transparent-light-20), var(--hf-color-transparent-light-20));
  }
  @apply q-focus-ring-error;
}

/* brandSoft: transparent-lime-10 surface, lime link label + icon; hover +20% white
 * overlay; default lime focus ring (inherited from q-button). Figma 2376:1486
 * (fill transparent/lime/10, text text/link, icon icon/accent). */
@utility q-button-brand-soft {
  @apply bg-q-transparent-lime-10 text-q-text-link;
  &:hover,
  &:focus-visible {
    background-image: linear-gradient(var(--hf-color-transparent-light-20), var(--hf-color-transparent-light-20));
  }
}

/* ── Variant × size exceptions (Figma is not purely size-driven) ─────────────
 * danger + dangerSoft round one step more than their size at sm (radius/300 =
 * 12 vs the size's radius/250 = 10). Compound selectors (specificity 0,2,0)
 * beat the size @utility (0,1,0). */
.q-button-danger.q-button-sm,
.q-button-danger-soft.q-button-sm { border-radius: var(--hf-radius-300); }

.q-button-marketing-primary.q-button-xs,
.q-button-marketing-secondary.q-button-xs,
.q-button-marketing-tertiary.q-button-xs,
.q-button-marketing-ghost.q-button-xs {
  padding-block-end: var(--hf-space-200);
  padding-block-start: var(--hf-space-150);
}

.q-button-marketing-primary.q-button-sm,
.q-button-marketing-secondary.q-button-sm,
.q-button-marketing-tertiary.q-button-sm,
.q-button-marketing-ghost.q-button-sm {
  padding-block-end: var(--hf-space-250);
  padding-block-start: var(--hf-space-200);
}

/* md keeps Marketing's asymmetric vertical padding (extra at the bottom to
 * optically centre the label above the −3px bevel); typography inherits the
 * size's label-lg-semi-bold composite (no font override — Figma 18px, not 16). */
.q-button-marketing-primary.q-button-md,
.q-button-marketing-secondary.q-button-md,
.q-button-marketing-tertiary.q-button-md,
.q-button-marketing-ghost.q-button-md {
  padding-block-end: var(--hf-space-400);
  padding-block-start: var(--hf-space-400);
}

.q-button-marketing-primary.q-button-lg,
.q-button-marketing-secondary.q-button-lg {
  padding-block-end: var(--hf-space-500);
  padding-block-start: var(--hf-space-400);
}

.q-button-marketing-tertiary.q-button-lg,
.q-button-marketing-ghost.q-button-lg {
  padding: var(--hf-space-400);
}

.q-button-marketing-tertiary.q-button-xxs,
.q-button-marketing-ghost.q-button-xxs {
  padding-inline: var(--hf-space-100);
}

/* ───────────────────── Marketing variants (1322:4366) ──────────────────────
 * Same geometry as the Default Button; only the visual layer differs. The 3D
 * key is a single 3px INSET BOTTOM line (box-shadow inset 0 -3px) — NOT an
 * extruded face — over soft drop shadows. Three Figma effect stacks:
 *
 *   GlossyLime (primary)   bevel inset 0 -3px #829b19 (olive)
 *                          + drops 0 6 4 #00000040 · 0 32 24 #00000026
 *   Glossy (secondary)     bevel inset 0 -3px #00000052 + same drops
 *   Glass (tertiary/ghost) backdrop-blur 12 · top sheen inset 0 2 3 white/5
 *                          · drop 0 2 4 -0.5 #0000001f
 *
 * The -3px line is token-derived: -(border-width-thick + thin) = -3px.
 * Raw values below are exactly the custom Figma effects/fills with no token. */

/* marketing primary: glossy lime CTA. Two stacked fill layers — a gloss sheen
 * (transparent → opaque highlight, brightness pooling at the bottom) over the
 * solid brand base — plus the olive bottom bevel. */
@utility q-button-marketing-primary {
  background-color: var(--hf-color-button-brand);
  background-image:
    var(--hf-gradient-special-gloss-lime),
    linear-gradient(90deg, var(--hf-color-button-brand) 0%, var(--hf-color-button-brand) 100%);
  border: var(--hf-border-width-none) solid transparent;
  color: var(--hf-color-text-inverse);
  box-shadow:
    inset 0 calc(-1 * (var(--hf-border-width-thick) + var(--hf-border-width-thin))) 0 0 #829b19, /* no token: Figma olive bevel color, no --hf-color-* equivalent */
    0 var(--hf-space-150) var(--hf-space-100) var(--hf-space-0) var(--hf-color-transparent-dark-25),
    0 var(--hf-space-800) var(--hf-space-600) var(--hf-space-0) var(--hf-color-transparent-dark-15);

  &:hover,
  &:focus-visible {
    background-image:
      linear-gradient(var(--hf-color-transparent-light-20), var(--hf-color-transparent-light-20)),
      var(--hf-gradient-special-gloss-lime),
      linear-gradient(90deg, var(--hf-color-button-brand) 0%, var(--hf-color-button-brand) 100%);
  }

  &:focus-visible {
    box-shadow:
      0 0 0 var(--hf-border-width-thick) var(--hf-color-background-primary),
      0 0 0 var(--hf-space-100) var(--hf-color-border-focus),
      inset 0 calc(-1 * (var(--hf-border-width-thick) + var(--hf-border-width-thin))) 0 0 #829b19, /* no token: Figma olive bevel color, no --hf-color-* equivalent */
      0 var(--hf-space-150) var(--hf-space-100) var(--hf-space-0) var(--hf-color-transparent-dark-25),
      0 var(--hf-space-800) var(--hf-space-600) var(--hf-space-0) var(--hf-color-transparent-dark-15);
  }
}

/* marketing secondary: glossy white with the dark bottom bevel. hover darkens
 * with black 10%. */
@utility q-button-marketing-secondary {
  background-color: var(--hf-color-button-primary);
  border: var(--hf-border-width-none) solid transparent;
  color: var(--hf-color-text-inverse);
  box-shadow:
    inset 0 calc(-1 * (var(--hf-border-width-thick) + var(--hf-border-width-thin))) 0 0 var(--hf-color-transparent-dark-32),
    0 var(--hf-space-150) var(--hf-space-100) var(--hf-space-0) var(--hf-color-transparent-dark-25),
    0 var(--hf-space-800) var(--hf-space-600) var(--hf-space-0) var(--hf-color-transparent-dark-15);

  &:hover,
  &:focus-visible {
    background-image: linear-gradient(var(--hf-color-transparent-dark-10), var(--hf-color-transparent-dark-10));
  }

  &:focus-visible {
    box-shadow:
      0 0 0 var(--hf-border-width-thick) var(--hf-color-background-primary),
      0 0 0 var(--hf-space-100) var(--hf-color-border-focus),
      inset 0 calc(-1 * (var(--hf-border-width-thick) + var(--hf-border-width-thin))) 0 0 var(--hf-color-transparent-dark-32),
      0 var(--hf-space-150) var(--hf-space-100) var(--hf-space-0) var(--hf-color-transparent-dark-25),
      0 var(--hf-space-800) var(--hf-space-600) var(--hf-space-0) var(--hf-color-transparent-dark-15);
  }
}

/* marketing tertiary: glass with a hairline edge + background blur 12px. The
 * top sheen is an inner white/5 highlight; the drop has a -0.5px spread. */
@utility q-button-marketing-tertiary {
  background-color: var(--hf-color-transparent-light-05);
  /* Edge bumped from border/subtle (white-5%, identical to the fill + inset
   * sheen → invisible) to a readable white-10% hairline so the glass edge
   * actually reads now the elevating drop shadow is gone. */
  border: var(--hf-border-width-thin) solid var(--hf-color-border-default);
  color: var(--hf-color-text-primary);
  box-shadow:
    inset 0 var(--hf-border-width-thick) calc(var(--hf-border-width-thick) + var(--hf-border-width-thin)) var(--hf-space-0) var(--hf-color-transparent-light-05);
  backdrop-filter: blur(var(--hf-space-300));

  &:hover,
  &:focus-visible {
    background-image: linear-gradient(var(--hf-color-transparent-light-20), var(--hf-color-transparent-light-20));
  }

  &:focus-visible {
    box-shadow:
      0 0 0 var(--hf-border-width-thick) var(--hf-color-background-primary),
      0 0 0 var(--hf-space-100) var(--hf-color-border-focus),
      inset 0 var(--hf-border-width-thick) calc(var(--hf-border-width-thick) + var(--hf-border-width-thin)) var(--hf-space-0) var(--hf-color-transparent-light-05);
  }
}

/* marketing ghost: same Figma Glass effect as tertiary, only without the border. */
@utility q-button-marketing-ghost {
  background-color: var(--hf-color-transparent-light-05);
  border: var(--hf-border-width-none) solid transparent;
  color: var(--hf-color-text-primary);
  box-shadow:
    inset 0 var(--hf-border-width-thick) calc(var(--hf-border-width-thick) + var(--hf-border-width-thin)) var(--hf-space-0) var(--hf-color-transparent-light-05);
  backdrop-filter: blur(var(--hf-space-300));

  &:hover,
  &:focus-visible {
    background-image: linear-gradient(var(--hf-color-transparent-light-20), var(--hf-color-transparent-light-20));
  }

  &:focus-visible {
    box-shadow:
      0 0 0 var(--hf-border-width-thick) var(--hf-color-background-primary),
      0 0 0 var(--hf-space-100) var(--hf-color-border-focus),
      inset 0 var(--hf-border-width-thick) calc(var(--hf-border-width-thick) + var(--hf-border-width-thin)) var(--hf-space-0) var(--hf-color-transparent-light-05);
  }
}

/* ───────────── Special Button (2100:1476 default · 2100:1477 pink) ──────────
 * Tall credit CTA, fixed 112px wide. A solid token fill (button/brand or
 * brand/pink) lit by a gloss sheen, carrying the Figma "Glossy" effect: a -3px
 * inset bevel over two drop shadows. Geometry: radius/300, py space/600,
 * px space/500, gap space/150, column-centered; height is content-driven
 * (24+24 padding + 12 label + 6 gap + 16 price = 82, the Figma frame height).
 *
 * Figma binds the base fills to tokens, but the gloss and Glossy effect colors
 * are raw values; keep those exact values here. */
@utility q-button-special-brand {
  --q-button-special-bg: var(--hf-color-button-brand);
  --q-button-special-fg: var(--hf-color-text-inverse);
  --q-button-special-gloss: var(--hf-gradient-special-gloss-lime-angled);
}

@utility q-button-special-pink {
  --q-button-special-bg: var(--hf-color-brand-pink);
  --q-button-special-fg: var(--hf-color-text-primary);
  --q-button-special-gloss: var(--hf-gradient-special-gloss-pink);
}

.q-button-special-brand,
.q-button-special-pink {
  align-items: center;
  background-color: var(--q-button-special-bg);
  background-image:
    var(--q-button-special-gloss),
    linear-gradient(90deg, var(--q-button-special-bg) 0%, var(--q-button-special-bg) 100%);
  block-size: auto;
  border: var(--hf-border-width-none) solid transparent;
  border-radius: var(--hf-radius-300);
  color: var(--q-button-special-fg);
  display: flex;
  flex-direction: column;
  gap: var(--hf-space-150);
  inline-size: calc(var(--hf-space-2000) + var(--hf-space-800)); /* 112px = 80 + 32 */
  justify-content: center;
  min-inline-size: calc(var(--hf-space-2000) + var(--hf-space-800));
  overflow: clip;
  padding: var(--hf-space-600) var(--hf-space-500);
  text-transform: none;
  /* Figma "Glossy": -3px inset bevel over two drops (-3px = -(thick + thin)) */
  box-shadow:
    inset 0 calc(-1 * (var(--hf-border-width-thick) + var(--hf-border-width-thin))) 0 0 var(--hf-color-transparent-dark-32),
    0 var(--hf-space-150) var(--hf-space-100) var(--hf-space-0) var(--hf-color-transparent-dark-25),
    0 var(--hf-space-800) var(--hf-space-600) var(--hf-space-0) var(--hf-color-transparent-dark-15);

  /* sparkle lead-icon: 16×16, inherits the content color. */
  & svg {
    color: var(--q-button-special-fg);
    height: var(--hf-space-400);
    width: var(--hf-space-400);
  }

  /* hover/focus lighten with white 20%, composited over the gloss sheen. */
  &:hover,
  &:focus-visible {
    background-image:
      linear-gradient(var(--hf-color-transparent-light-20), var(--hf-color-transparent-light-20)),
      var(--q-button-special-gloss),
      linear-gradient(90deg, var(--q-button-special-bg) 0%, var(--q-button-special-bg) 100%);
  }

  &:focus-visible {
    box-shadow:
      0 0 0 var(--hf-border-width-thick) var(--hf-color-background-primary),
      0 0 0 var(--hf-space-100) var(--hf-color-border-focus),
      inset 0 calc(-1 * (var(--hf-border-width-thick) + var(--hf-border-width-thin))) 0 0 var(--hf-color-transparent-dark-32),
      0 var(--hf-space-150) var(--hf-space-100) var(--hf-space-0) var(--hf-color-transparent-dark-25),
      0 var(--hf-space-800) var(--hf-space-600) var(--hf-space-0) var(--hf-color-transparent-dark-15);
  }
}

@utility q-button-special-label {
  color: var(--q-button-special-fg);
  /* no token: Figma-specific weighted font face name; token grotesk family kept as fallback */
  font-family: "Space_Grotesk:Bold", var(--hf-type-family-grotesk);
  font-size: var(--hf-type-size-100);
  font-weight: var(--hf-type-weight-bold);
  letter-spacing: var(--hf-type-letter-spacing-none);
  line-height: var(--hf-type-line-height-100);
  text-transform: uppercase;
}

@utility q-button-special-price {
  align-items: flex-start;
  color: var(--q-button-special-fg);
  display: flex;
  font-family: var(--hf-type-family-secondary);
  font-size: var(--hf-type-size-100);
  font-weight: var(--hf-type-weight-medium);
  gap: var(--hf-space-100);
  letter-spacing: var(--hf-type-letter-spacing-none); /* Figma caption/sm/medium = 0 */
  line-height: var(--hf-type-line-height-300);
}

@utility q-button-special-price-old {
  text-decoration-line: line-through;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

/* Icon-only: collapse horizontal padding so the button is square (min-w == h). */
@utility q-button-icon-only {
  padding-inline: var(--hf-space-0);
}

.q-button-special-brand.q-button-icon-only,
.q-button-special-pink.q-button-icon-only {
  padding-inline: var(--hf-space-500);
}