/* ============================================================
   InlineBanner — Sticky bottom promotional banner.

   Appears 3 s after page load, slides up from below the
   viewport. Dismissed state is persisted in sessionStorage.
   ============================================================ */

/* ---- Outer wrap ------------------------------------------ */
/* Fixed to the bottom of the viewport. The tall top-padding
   creates the gradient-fade zone above the card. */

@keyframes banner-card-exit {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(100% + 2rem)); }
}

@keyframes banner-gradient-exit {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.inline-banner-wrap {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  z-index:         99999;
  display:         flex;
  justify-content: center;
  padding:         6rem 1.5rem 1rem;     /* 96px top fade, 24px sides (= container 48px − 24px outset), 16px bottom */
  pointer-events:  none;
  transform:       translateY(calc(100% + 1.5rem));
  transition:      transform 340ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Gradient on pseudo-element so it can animate independently of the card */
.inline-banner-wrap::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(to top, rgb(245 240 231 / 1), rgb(245 240 231 / 0));
  pointer-events: none;
}

.inline-banner-wrap[data-state="open"] {
  transform: translateY(0);
}

/* Dismiss: wrap stays pinned, card slides down, gradient fades */
.inline-banner-wrap[data-state="closed"] {
  pointer-events: none;
  transform:      translateY(0);
}

.inline-banner-wrap[data-state="closed"] .inline-banner {
  animation:      banner-card-exit 340ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
  pointer-events: none;
}

.inline-banner-wrap[data-state="closed"]::before {
  animation: banner-gradient-exit 300ms ease forwards;
}


/* ---- Card ------------------------------------------------ */
.inline-banner {
  --inline-banner-bg: var(--color-brand-blue-500);
  --inline-banner-text: var(--accent);
  --inline-banner-close-color: color-mix(in srgb, var(--inline-banner-text) 64%, transparent);
  --inline-banner-close-hover-bg: color-mix(in srgb, var(--inline-banner-text) 12%, transparent);
  --inline-banner-close-hover-color: var(--inline-banner-text);
  --inline-banner-regular-badge-bg: var(--opacity-accent-20);
  --inline-banner-regular-badge-label: var(--card);
  --inline-banner-regular-badge-note: rgba(255, 255, 255, 0.6);
  --inline-banner-regular-badge-sep: rgba(255, 255, 255, 0.6);
  position:         relative;
  display:          flex;
  align-items:      flex-start;
  gap:              0;
  overflow:         clip;
  padding:          0.75rem;    /* 12px */
  border-radius:    var(--radius-lg);  /* 24px */
  width:            100%;
  max-width:        89.5rem;   /* 1432px */
  background:       var(--inline-banner-bg);
  box-shadow:       0 6px 18px var(--opacity-neutral-10), 0 0 6px rgba(40, 40, 37, 0.06);
  pointer-events:   auto;
  font-family:      var(--font-family-default);
}

.inline-banner[data-color-variant="orange"] {
  --inline-banner-bg: var(--color-brand-orange-500);
  --inline-banner-text: var(--accent);
}

.inline-banner[data-color-variant="cyan"] {
  --inline-banner-bg: var(--color-brand-blue-300);   /* #7ECBE7 */
  --inline-banner-text: var(--foreground);           /* dark text on the light-cyan card */
}

.inline-banner[data-color-variant="dark"] {
  --inline-banner-bg: var(--color-brand-neutral-950);
  --inline-banner-text: var(--background);
}

.inline-banner[data-color-variant="light"] {
  --inline-banner-bg: var(--card);
  --inline-banner-text: var(--foreground);
  --inline-banner-close-color: var(--muted-foreground);
  --inline-banner-close-hover-bg: var(--opacity-neutral-10);
  --inline-banner-close-hover-color: var(--foreground);
  --inline-banner-regular-badge-bg: var(--secondary);
  --inline-banner-regular-badge-label: var(--foreground);
  --inline-banner-regular-badge-note: var(--muted-foreground);
  --inline-banner-regular-badge-sep: var(--muted-foreground);
}


/* ---- Noise overlay (blue + orange + cyan) ----------------- */
/* Using ::before so the texture blends with the background but
   never composites with text or other content above it.       */

.inline-banner[data-color-variant="blue"]::before,
.inline-banner[data-color-variant="orange"]::before,
.inline-banner[data-color-variant="cyan"]::before {
  content:          '';
  position:         absolute;
  inset:            0;
  border-radius:    var(--radius-lg);
  background-image: url("https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/6a10ffdb2b90b09311ca7952_the-noise.svg");
  background-size:  200px 200px;
  mix-blend-mode:   screen;
  opacity:          0.5;
  pointer-events:   none;
  z-index:          0;
}


/* ---- Left image panel ------------------------------------ */

.inline-banner__img-panel {
  position:         relative;
  z-index:          1;
  flex-shrink:      0;
  width:            19.375rem;  /* 310px */
  aspect-ratio:     1 / 1;
  background-color: var(--accent);
  border:           0.5px solid var(--opacity-neutral-20);
  border-radius:    0.75rem;   /* 12px */
  overflow:         hidden;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.inline-banner__illustration {
  width:      100%;
  height:     100%;
  object-fit: cover;
}


/* ---- Soft badge ------------------------------------------ */

/* Inline SVG or raster image icon inside the soft badge */
.inline-banner__badge-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.inline-banner__badge-icon svg {
  display: block;
  width:   0.75rem;  /* 12px — matches hardcoded TagIcon */
  height:  0.75rem;
}

.inline-banner__badge-icon--img {
  display:    block;
  width:      0.75rem;
  height:     0.75rem;
  object-fit: contain;
}

.inline-banner__soft-badge {
  position:    absolute;
  top:         0.75rem;
  left:        0.75rem;
  z-index:     1;
  display:     flex;
  align-items: center;
  gap:         var(--spacing-1-5);   /* 6px */
  height:      1.625rem;             /* 26px */
  padding:     var(--spacing-1) var(--spacing-3);   /* 4px 12px */
  border-radius: var(--radius-full);
  background:  var(--card);
  white-space: nowrap;
}

.inline-banner__badge-label {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
  color:       var(--foreground);
}


.inline-banner__badge-sep {
  flex-shrink:  0;
  width:        2.5px;
  height:       2.5px;
  border-radius: 50%;
  background:   var(--muted-foreground);
}

.inline-banner__badge-note {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color:       var(--muted-foreground);
}


/* ---- Content (right) ------------------------------------- */

.inline-banner__content {
  position:       relative;
  z-index:        1;
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-9);   /* 36px */
  align-items:    flex-start;
  padding:        1rem 3rem;  /* 16px top/bottom, 48px sides */
}

.inline-banner__copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);   /* 24px */
  width:          100%;
  max-width:      50rem;   /* 800px */
}

.inline-banner__heading {
  margin:      0;
  font-size:   var(--font-size-3xl);    /* 30px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-3xl);  /* 36px */
  color:       var(--inline-banner-text);
}

.inline-banner__body {
  margin:      0;
  font-size:   var(--font-size-xl);     /* 20px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xl);   /* 28px */
  color:       var(--inline-banner-text);
}


/* ---- CTA buttons ----------------------------------------- */
/* Primary + optional secondary sit in a row, wrapping on narrow widths. */

.inline-banner__actions {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--spacing-4);   /* 16px */
}

/* blue/orange: primary/accent — text color override only.
   dark: primary/default inside data-scheme="dark" wrapper (TSX).
   light: primary/default, no overrides.
   The secondary CTA is variant="secondary" and inherits the accent
   border+text from the Button primitive — no per-variant override needed. */

.inline-banner[data-color-variant="blue"] .inline-banner__cta[data-variant="primary"][data-tone="accent"] {
  color: var(--color-brand-blue-500);
}

.inline-banner[data-color-variant="orange"] .inline-banner__cta[data-variant="primary"][data-tone="accent"] {
  color: var(--color-brand-orange-500);
}

.inline-banner[data-color-variant="cyan"] .inline-banner__cta[data-variant="primary"][data-tone="accent"] {
  color: var(--color-brand-blue-500);   /* #33A3CC */
}


/* ---- Close button ---------------------------------------- */

.inline-banner__close {
  position:        absolute;
  z-index:         1;
  top:             15px;
  right:           15px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           2rem;
  height:          2rem;
  padding:         0;
  border:          0;
  border-radius:   var(--radius-full);
  background:      transparent;
  color:           var(--inline-banner-close-color);
  cursor:          pointer;
  transition:      color 120ms ease, background-color 120ms ease;
}

.inline-banner__close:hover,
.inline-banner__close:focus-visible {
  background: var(--inline-banner-close-hover-bg);
  color:      var(--inline-banner-close-hover-color);
}


/* ---- Regular variant ------------------------------------- */

/* Top-row exists in wide markup for mobile only — hidden on desktop */
.inline-banner[data-variant="wide"] .inline-banner__top-row {
  display: none;
}

.inline-banner[data-variant="wide"] {
  align-items: center;
}

.inline-banner[data-variant="regular"] {
  flex-direction: column;
  padding:        1.25rem;   /* 20px */
  max-width:      67rem;     /* 1072px = container 1024px + 24px each side */
}

.inline-banner__top-row {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
}

/* Semi-transparent white badge (sits on blue, not on cream panel) */
.inline-banner[data-variant="regular"] .inline-banner__soft-badge {
  position:   static;
  background: var(--inline-banner-regular-badge-bg);
  color:      var(--inline-banner-regular-badge-label); /* cascades to the SVG icon */
}

.inline-banner[data-variant="regular"] .inline-banner__badge-label {
  color: var(--inline-banner-regular-badge-label);
}

.inline-banner[data-variant="regular"] .inline-banner__badge-sep {
  background: var(--inline-banner-regular-badge-sep);
}

.inline-banner[data-variant="regular"] .inline-banner__badge-note {
  color: var(--inline-banner-regular-badge-note);
}

/* Close button is in-flow in the top row — remove absolute positioning */
.inline-banner[data-variant="regular"] .inline-banner__close {
  position: static;
}

.inline-banner[data-variant="regular"] .inline-banner__content {
  padding: 2.5rem;   /* 40px 40px 32px */
}


/* ---- Responsive ------------------------------------------ */

/* Tablet (≤991px): smaller image panel, tighter padding */
/* Wrap sides drop to 12px */
@media (max-width: 991px) {
  .inline-banner-wrap {
    padding-left:  0.75rem;
    padding-right: 0.75rem;
  }

  .inline-banner__content {
    padding: 1rem 2rem 1rem;
  }

  .inline-banner__heading {
    font-size:   1.5rem;                 /* 24px — no token between xl(20) and 3xl(30) */
    line-height: var(--line-height-lg);  /* 28px */
  }

  .inline-banner__body {
    font-size:   var(--font-size-lg);    /* 18px */
    line-height: var(--line-height-lg);  /* 28px */
  }
}

/* Mobile (≤767px): hide image panel, stack content */
@media (max-width: 767px) {
  .inline-banner-wrap {
    padding-top: 3rem;
  }

  .inline-banner__img-panel {
    display: none;
  }

  .inline-banner__content {
    padding: 1.5rem 1.25rem 1.25rem;
    gap:     var(--spacing-6);
  }

  .inline-banner__copy {
    gap: var(--spacing-4);   /* 16px heading→body, tighter than body→button (24px) */
  }

  .inline-banner__close {
    top:   var(--spacing-3);
    right: var(--spacing-3);
  }

  .inline-banner[data-variant="wide"] {
    flex-direction: column;
  }

  .inline-banner[data-variant="wide"] .inline-banner__top-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
  }

  .inline-banner[data-variant="wide"] .inline-banner__top-row .inline-banner__soft-badge {
    position:   static;
    background: var(--inline-banner-regular-badge-bg);
    color:      var(--inline-banner-regular-badge-label);
  }

  .inline-banner[data-variant="wide"] .inline-banner__top-row .inline-banner__badge-label {
    color: var(--inline-banner-regular-badge-label);
  }

  .inline-banner[data-variant="wide"] .inline-banner__top-row .inline-banner__badge-sep {
    background: var(--inline-banner-regular-badge-sep);
  }

  .inline-banner[data-variant="wide"] .inline-banner__top-row .inline-banner__badge-note {
    color: var(--inline-banner-regular-badge-note);
  }

  /* Move close into the top-row on mobile; hide the standalone absolute one */
  .inline-banner[data-variant="wide"] > .inline-banner__close {
    display: none;
  }

  .inline-banner[data-variant="wide"] .inline-banner__top-row .inline-banner__close {
    position: static;
  }

  .inline-banner[data-variant="regular"] {
    padding: 0.75rem;
  }

  .inline-banner[data-variant="regular"] .inline-banner__content {
    padding: 1.5rem 1.25rem 1.25rem;
    gap:     var(--spacing-6);
  }
}


/* ============================================================
   Inverted variant
   Badge in a 164px left rail, copy in the middle, image panel on
   the right. Static by default (used by BannerSection) but reusable
   on sticky banners — the close button renders only when dismissible.
   Structural skeleton mirrors AirTrialSection.
   ============================================================ */

.inline-banner[data-variant="inverted"] {
  align-items: flex-start;
  gap:         0;                  /* rail + copy padding handle spacing */
  padding:     var(--spacing-4);   /* 16px */
  max-width:   none;               /* fills its container (BannerSection uses container-wide) */

  /* Rail badge: dark-translucent pill + banner-text label (blue/orange/dark). */
  --inline-banner-inverted-badge-bg:    var(--opacity-neutral-20);
  --inline-banner-inverted-badge-label: var(--inline-banner-text);
}

/* Light card needs an opaque pill + dark label for contrast. */
.inline-banner[data-variant="inverted"][data-color-variant="light"] {
  --inline-banner-inverted-badge-bg:    var(--secondary);
  --inline-banner-inverted-badge-label: var(--foreground);
}

/* Cyan card: info-60 pill + white label (Figma "Skip the line"). */
.inline-banner[data-variant="inverted"][data-color-variant="cyan"] {
  --inline-banner-inverted-badge-bg:    color-mix(in srgb, var(--info) 60%, transparent);
  --inline-banner-inverted-badge-label: var(--card);
}


/* ---- Badge rail (164px) ----------------------------------- */

.inline-banner[data-variant="inverted"] .inline-banner__rail {
  position:       relative;
  z-index:        1;
  flex-shrink:    0;
  width:          164px;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

.inline-banner[data-variant="inverted"] .inline-banner__soft-badge {
  position:   static;
  background: var(--inline-banner-inverted-badge-bg);
}

.inline-banner[data-variant="inverted"] .inline-banner__badge-label {
  color: var(--inline-banner-inverted-badge-label);
}

.inline-banner[data-variant="inverted"] .inline-banner__badge-sep {
  background: color-mix(in srgb, var(--inline-banner-inverted-badge-label) 60%, transparent);
}

.inline-banner[data-variant="inverted"] .inline-banner__badge-note {
  color: color-mix(in srgb, var(--inline-banner-inverted-badge-label) 70%, transparent);
}


/* ---- Intro: copy + image ---------------------------------- */

.inline-banner[data-variant="inverted"] .inline-banner__intro {
  position:              relative;
  z-index:               1;
  flex:                  1 1 auto;
  min-width:             0;
  align-self:            stretch;
  display:               grid;
  grid-template-columns: minmax(0, 1fr) 302px;
  align-items:           center;
  gap:                   var(--spacing-9);   /* 36px */
}

/* Copy column: uniform 32px rhythm (Figma), no left padding, no flex. */
.inline-banner[data-variant="inverted"] .inline-banner__content {
  flex:    none;
  gap:     var(--spacing-8);   /* 32px body → buttons */
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) 0;
}

.inline-banner[data-variant="inverted"] .inline-banner__copy {
  gap: var(--spacing-8);   /* 32px heading → body */
}

/* Heading uses the hp-heading scale (36/40); regular base, bold via <strong>. */
.inline-banner[data-variant="inverted"] .inline-banner__heading {
  font-size:   2.25rem;   /* 36px */
  line-height: 2.5rem;    /* 40px */
  font-weight: var(--font-weight-regular);
}


/* ---- Image panel (right) ---------------------------------- */

.inline-banner[data-variant="inverted"] .inline-banner__img-panel {
  z-index: 1;
  width:   302px;
}


/* ---- Tablet (≤1200px) -------------------------------------
   Promote the intro grid items into the card grid so the rail sits
   above the copy while the image spans the full height on the right.
   Breakpoint is 1200px (not the usual 991px tablet cutoff): with a
   wider fixed image column (VrBannerSection sets 421px instead of the
   302px default — see VrBannerSection.css), the side-by-side row leaves
   copy uncomfortably little room between ~991–1200px, so the stacked
   layout now kicks in sooner. `inverted` currently only reaches the page
   through `BannerSection`, and `VrBannerSection` is its only consumer, so
   raising this here doesn't affect any other banner. */

@media (max-width: 1200px) {
  .inline-banner[data-variant="inverted"] {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) 302px;
    grid-template-areas:
      "rail image"
      "copy image";
    align-items: start;
    gap:         0;   /* copy padding handles the badge→copy and copy→image spacing */
  }

  .inline-banner[data-variant="inverted"] .inline-banner__rail {
    grid-area: rail;
    width:     100%;
  }

  .inline-banner[data-variant="inverted"] .inline-banner__intro {
    display: contents;
  }

  /* Inset the copy like the regular variant so it isn't flush to the badge/edge. */
  .inline-banner[data-variant="inverted"] .inline-banner__content {
    grid-area: copy;
    padding:   var(--spacing-8);   /* 32px all — regular-like inset */
  }

  .inline-banner[data-variant="inverted"] .inline-banner__img-panel {
    grid-area:  image;
    align-self: center;
  }
}


/* ---- Mobile (≤767px): badge stacks above the copy ----------
   Image is hidden here (inherits the unscoped `.inline-banner__img-panel
   { display: none }` mobile rule above), like the sticky variants.
   Card + copy padding mirror the regular variant's mobile treatment. */

@media (max-width: 767px) {
  .inline-banner[data-variant="inverted"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rail"
      "copy";
    gap:     0;                  /* badge → copy spacing comes from the copy's padding-top */
    padding: var(--spacing-3);   /* 12px — matches regular */
  }

  .inline-banner[data-variant="inverted"] .inline-banner__content {
    padding: 1.5rem 1.25rem 1.25rem;   /* 24 / 20 / 20 — matches regular */
    gap:     var(--spacing-6);
  }

  .inline-banner[data-variant="inverted"] .inline-banner__copy {
    gap: var(--spacing-4);   /* 16px heading → body */
  }

  .inline-banner[data-variant="inverted"] .inline-banner__heading {
    font-size:   1.875rem;   /* 30px */
    line-height: 2.25rem;    /* 36px */
  }

  .inline-banner[data-variant="inverted"] .inline-banner__body {
    font-size:   var(--font-size-lg);   /* 18px */
    line-height: var(--line-height-lg);
  }
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:      center;
  border:           1px solid transparent;
  box-sizing:       border-box;
  cursor:           pointer;
  display:          inline-flex;
  flex-shrink:      0;
  justify-content:  center;
  overflow:         hidden;
  text-decoration:  none;
  user-select:      none;
  white-space:      nowrap;
  background-clip:  padding-box;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
  --btn-gap:   0.25rem;
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
  --btn-gap:   0.375rem;
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1rem;              /* 8px 16px → height 36px */
  --btn-gap:   0.375rem;
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
  --btn-gap:   0.5rem;
}

.btn[data-icon-only="true"] {
  padding: 0;
}

.btn[data-size="xs"][data-icon-only="true"] {
  width:  1.625rem; /* 26px */
  height: 1.625rem;
}

.btn[data-size="sm"][data-icon-only="true"] {
  width:  2rem; /* 32px */
  height: 2rem;
}

.btn[data-size="md"][data-icon-only="true"] {
  width:  2.25rem; /* 36px */
  height: 2.25rem;
}

.btn[data-size="lg"][data-icon-only="true"] {
  width:  2.5rem; /* 40px */
  height: 2.5rem;
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"][data-tone="default"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"][data-tone="default"] {
  background-color: transparent;
  border-color:     var(--primary);
  color:            var(--primary);
}

.btn[data-variant="primary"][data-tone="accent"] {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--foreground);
}

.btn[data-variant="secondary"][data-tone="accent"] {
  background-color: transparent;
  border-color:     var(--accent);
  color:            var(--accent);
}


.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Primary hover — 20% dark overlay on background, full opacity */
.btn[data-variant="primary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:          1;
}

.btn[data-variant="primary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--accent) 80%, transparent);
  border-color:     color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:          1;
}

/* Secondary hover — darker primary border + text, no fill */
.btn[data-variant="secondary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:      1;
}

.btn[data-variant="secondary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  color:        color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:      1;
}

.btn[data-variant="info"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--info) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--info) 80%, #282825 20%);
  color:            var(--info-foreground);
  opacity:          1;
}

.btn[data-variant="success"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--success) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--success) 80%, #282825 20%);
  color:            var(--success-foreground);
  opacity:          1;
}

.btn[data-variant="warning"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--warning) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--warning) 80%, #282825 20%);
  color:            var(--warning-foreground);
  opacity:          1;
}

.btn[data-variant="destructive"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  color:            var(--destructive-foreground);
  opacity:          1;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon:not(.btn__icon--hover-only) { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="md"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="lg"] .btn__icon:not(.btn__icon--hover-only) { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Hover-only icon — hidden by default, slides/fades in on :hover.
   Negative margin-right cancels the flex gap when collapsed so
   the label stays flush with the padding edge.
   ============================================================ */

/* Must come after the .btn[data-size] .btn__icon rules to win specificity tie */
.btn .btn__icon--hover-only {
  min-width:    0;        /* override flex min-width: auto so item can truly collapse */
  width:        0;
  overflow:     hidden;
  opacity:      0;
  margin-right: calc(-1 * var(--btn-gap, 0.5rem));
  transition:   width 0.2s ease, opacity 0.15s ease, margin-right 0.2s ease;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:        1rem; /* sm / md / lg */
  height:       1rem;
  opacity:      1;
  margin-right: 0;
}

.btn[data-size="xs"]:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:  0.75rem;
  height: 0.75rem;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}