/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   Shared homepage section patterns
   Import in any section component that uses the sticky badge rail.

   Provides: .hp-section shell, .hp-rail sticky rail,
   .hp-badge pill, .hp-heading, .hp-body
   ============================================================ */


/* ---- Section shell ----------------------------------------
   Background-color is intentionally omitted — each section
   sets its own via a single-rule override. */

.hp-section {
  position:       relative;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4rem;      /* 64px */
  padding:        8rem 0;   /* 128px top + bottom */
  font-family:    var(--font-family-default);
  width:          100%;
  box-sizing:     border-box;

}

/* Tablet (≤991px) */
@media (max-width: 991px) {
  .hp-section {
    padding: 6rem 0;
    gap:     3rem;
  }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  .hp-section {
    padding: 4rem 0;
    gap:     2rem;
  }
}

/* ---- Tight modifier -----------------------------------------
   Used by the AIR product page, where the default 128px rhythm reads
   as too loose. Same 0.75 / 0.5 tablet/mobile scaling as .hp-section
   above, just off a 96px desktop baseline instead of 128px. Add
   alongside .hp-section (e.g. className="hp-section hp-section--tight
   air-cta"); a section can still override further for anything that
   doesn't fit (see AirHowItWorksSection's mobile padding). */
.hp-section--tight {
  padding-block: 6rem;   /* 96px */
}

@media (max-width: 991px) {
  .hp-section--tight {
    padding-block: 4.5rem;   /* 72px */
  }
}

@media (max-width: 767px) {
  .hp-section--tight {
    padding-block: 3rem;   /* 48px */
  }
}


/* ---- Sticky badge rail ------------------------------------
   Absolutely positioned inside the first .container, pushed
   left via right: calc(100% - 80px).  The offset skips the
   container's left padding so the rail anchors to the content
   edge rather than the padding edge.  .container has
   position: relative so the rail is bounded to the container's
   height — badge stops when the container ends.
   Width = gutter between container (1024px) and container-wide
   (1384px): (1384 − 1024) / 2 = 180px.
   Shown only at ≥1480px — when container-wide is at max-width
   and the gutter is a fixed, predictable size. */

.hp-rail {
  display:        none;
  position:       absolute;
  right:          calc(100% - 80px);   /* 80px = container left padding */
  top:            0;
  bottom:         0;
  width:          calc((1384px - 1024px) / 2);   /* 180px */
  pointer-events: none;
}

.hp-rail__sticky {
  position:        sticky;
  top:             var(--nav-section-offset, 8rem);
  display:         flex;
  justify-content: flex-end;
  align-items:     flex-start;
  padding-right:   12px;   /* 12px gap from the container's left edge */
}

@media (min-width: 1480px) {
  .hp-rail {
    display:         flex;
    justify-content: flex-start;
    align-items:     flex-start;
  }

  .container[data-hp-rail-overflow] > .hp-rail {
    visibility: hidden;
  }
}


/* ---- Badge pill -------------------------------------------
   Base pill used in the sticky rail and as the inline badge.
   .hp-badge--inline controls visibility relative to breakpoint. */

.hp-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  height:          26px;
  padding:         0 var(--spacing-3);
  background:      var(--card);
  border-radius:   var(--radius-full);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-xs);
  color:           var(--foreground);
  white-space:     nowrap;
}

/* Inline variant — shown below 1480px, hidden at and above (matches the rail
   breakpoint so there's never a gap where neither badge shows).

   It carries NO margin: `.section-header` owns badge→heading spacing via its
   24px `gap`. The one exception is a header that deliberately wants margin-
   driven spacing (DemoSection, `gap: 0`), which adds its own
   `.x .hp-badge--inline { margin-bottom }`. */
@media (min-width: 1480px) {
  .hp-badge--inline {
    display: none;
  }

  .container[data-hp-rail-overflow] .hp-badge--inline {
    display: inline-flex;
  }
}

/* Live indicator dot (DemoSection "Live demo" badge) */
.hp-badge__dot {
  display:          block;
  width:            6px;
  height:           6px;
  border-radius:    var(--radius-full);
  background-color: var(--primary);
  flex-shrink:      0;
}

/* ---- Chip variant -----------------------------------------
   A badge with a leading highlight chip + label, e.g.
   "New · Quality Studio". Put .hp-badge--chip on the badge and
   .hp-badge__chip on the leading element. Works in both the
   sticky rail (via <SectionRail className="hp-badge--chip">) and
   the inline position. */

.hp-badge--chip {
  gap:     4px;
  padding: 4px 12px 4px 4px;   /* py-4, pr-12, tight pl-4 so the chip hugs the edge */
}

.hp-badge__chip {
  display:       inline-flex;
  align-items:   center;
  height:        100%;
  padding:       0 8px;
  border-radius: var(--radius-full);
  background:    var(--opacity-primary-20);
  color:         var(--primary);
}


/* ---- Section header --------------------------------------
   Sitewide convention for the badge + heading + body block at
   the top of a section. Use directly (do not clone into a
   per-section class). The inline badge is the first child; the
   heading+body live in `__text`. Spacing is owned here so it is
   identical across every section:
     badge → 24px → text → 36px (heading→body) → 24px → actions

   align-items: flex-start is what keeps the inline badge from
   stretching full-width on small screens. */

.section-header {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--spacing-6);   /* 24px — owns badge→heading spacing */
}

.section-header__text {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;         /* don't stretch children — buttons keep their
                                         natural width (paragraphs still wrap at max-width) */
  gap:            var(--spacing-9);   /* 36px */
  max-width:      50rem;              /* 800px readable measure (heading + body) */
}

/* The body keeps the readable measure even when the block is widened (--wide),
   so a wide heading never drags the body to full width. This is the universal
   cap — sections should NOT add their own `.x .hp-body { max-width }`. */
.section-header__text .hp-body {
  max-width: 50rem;
}

/* Modifiers */
.section-header--center {
  align-items: center;
  text-align:  center;
}
/* Heading uses the full width; the body stays capped by the rule above. */
.section-header__text--wide {
  max-width: none;
}

.section-header__text--gap-36 {
  gap: var(--spacing-9);
}

@media (max-width: 767px) {
  .section-header       { gap: var(--spacing-4); }   /* 16px */
  .section-header__text { gap: var(--spacing-6); }   /* 24px */
  .section-header__text--gap-36 { gap: var(--spacing-9); }   /* 36px */
}


/* ---- Section intro row ------------------------------------
   Full-width text-left / action-right row. The copy slot expands to push
   actions to the far edge; text inside keeps the standard 50rem measure. */

.section-intro-row {
  display:     flex;
  align-items: center;
  gap:         2.25rem;   /* 36px */
  width:       100%;
}

.section-intro-row__copy {
  flex:      1;
  min-width: 0;
}

.section-intro-row__copy > .hp-body {
  max-width: 50rem;
}

.section-intro-row__actions {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .section-intro-row {
    flex-direction: column;
    align-items:    flex-start;
    gap:            2.25rem;   /* 36px */
  }
}


/* ---- Section heading --------------------------------------
   36px regular weight; .fw-bold inside uses bold. */

.hp-heading {
  margin:      0;
  font-size:   2.25rem;
  font-weight: var(--font-weight-regular);
  line-height: 2.5rem;
  color:       var(--foreground);
}

.hp-heading.fw-bold {
  font-weight: var(--font-weight-bold);
}



/* ---- Section subheading -----------------------------------
   24px — used beneath headings as a secondary label. */

.hp-subheading {
  margin:      0;
  font-size:   1.5rem;
  line-height: 2rem;
  color:       var(--foreground);
}


/* ---- Section body text ------------------------------------
   20px regular — used in header intro blocks. */

.hp-body {
  margin:      0;
  font-size:   1.25rem;
  line-height: 1.75rem;
  color:       var(--foreground);
}

@media (max-width: 767px) {
  .hp-heading {
    font-size:   1.875rem;  /* 30px */
    line-height: 2.25rem;   /* 36px */
  }

  .hp-subheading {
    font-size:   1.25rem;   /* 20px */
    line-height: 1.75rem;   /* 28px */
  }

  .hp-body {
    font-size:   1.125rem;  /* 18px */
    line-height: 1.75rem;   /* 28px */
  }
}


/* ---- Shared card shell ------------------------------------
   Secondary background + hairline border + 12px radius.
   Use alongside component class for layout-specific rules. */

.card-secondary {
  background:    var(--secondary);
  border:        0.5px solid var(--border);
  border-radius: 12px;
  box-sizing:    border-box;
}


/* ---- 26px number pill -------------------------------------
   Circular badge used for step numbers.
   Color (background) set per-component. */

.num-pill {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  flex-shrink:     0;
  border-radius:   var(--radius-full);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-medium);
  line-height:     1;
  color:           var(--foreground);
}


/* ---- Card typography --------------------------------------
   Base/bold title and base/regular muted body.
   Color overrides applied per-component as needed. */

.card-title {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.card-body {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
}


/* ---- Page H1 — shared display heading --------------------- */

.page-h1 {
  margin:      0;
  font-size:   3rem;    /* 48px */
  line-height: 1.15;
  font-weight: var(--font-weight-light);
  color:       var(--foreground);
}

.page-h1__line {
  display: block;
}

@media (max-width: 767px) {
  .page-h1 { font-size: 2.25rem; }
}

@media (max-width: 479px) {
  .page-h1 { font-size: 2rem; }

  /* Opt-out of the portrait-mobile shrink: holds the ≤767 size (36px) below
     480px. Add alongside `.page-h1` when a mobile Figma frame keeps the larger
     headline (e.g. AirHeroSection). Replicate the pattern for other heading
     classes if/when the same need arises. */
  .page-h1--no-portrait-shrink { font-size: 2.25rem; }
}


/* ---- Button pair — wrap row + content-driven equal width ---
   A two-(or-more)-button CTA row that never clips or overflows: flex-wrap
   means it stacks instead of clipping when space runs out. Pair with the
   `buttonPairStyle()` helper (src/utils/buttonPair.ts), which sets
   --btn-pair-min-w from the longest label's own character count (a `ch`
   value — scales with the font) — NOT a guessed pixel breakpoint. min-width
   only ever WIDENS a button toward the longest one; it can never shrink a
   button below its own text, so there's no clipping risk either way.

   Applies the equal-ish-width treatment at every size by default. To scope
   it to one breakpoint only (e.g. mobile-only, like AirCtaSection), add a
   local override in the consuming component's CSS:
     .my-actions .btn { min-width: 0; }                          // reset
     @media (max-width: 767px) {
       .my-actions .btn { min-width: var(--btn-pair-min-w, 0); } // re-enable
     }
   Full writeup: docs/shared-css-classes.md → "Button pair". */

.btn-pair {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.75rem;   /* 12px */
}

.btn-pair .btn {
  min-width: var(--btn-pair-min-w, 0);
}

/* ============================================================
   LawPracticeIntegrationsSection — header + full-bleed logo reel

   Figma file VX9tmGCEcVnJ7Fo9Fk8gee, node 6298:4410.
   See LawPracticeIntegrationsSection.figma.md.

   The frame is `.hp-section` + `.container` + the shared section
   header, and the reel is `LogoReel`. There is no `__content`
   wrapper here (unlike the other sections on this page): the reel is
   a direct child of `.hp-section` — it has to escape the container
   to run full-bleed — so `.hp-section`'s own 64px gap already
   separates it from the header, which is the Figma value.
   ============================================================ */

.law-practice-integrations {
  background: var(--background);
}


/* ---- Logo reel ---------------------------------------------
   `LogoReel` is entirely custom-property driven; these are the
   Figma values, following the same scoping pattern
   PartnerIntegrationsSection uses. Without them the reel falls back
   to its 4rem default logo height, which is ~3× the design.

   Geometry from the final reel frame, node 2007:6173 (1701 x 64): eight
   logos, each on a 40px-tall canvas at y=12, with a uniform 96px between
   canvases, then the "+7,000 other integrations" tail.

   Every asset is exported on that same 40px canvas with its mark centred, so
   one fixed 40px logo height reproduces the design's varied optical sizes
   (Lawmatics' art is 16px, Law Ruler's 27px, and so on). That replaces the
   earlier revision's 24px cap + 196px fixed slots — with per-asset canvases
   there is nothing left for a slot to normalise.

   HEIGHT — the part the custom properties alone cannot express. The primitive
   models the 64px track (`--logo-reel-track-height`) but also wraps it in
   `padding: var(--spacing-6) 0` for its other consumers, which would lay the
   reel out at 24 + 64 + 24 = 112px. Scoped fix, this section only (LogoReel is
   shared with PartnerIntegrationsSection and must not change): drop the
   padding and pin the box to the frame's 64px. The primitive's own
   `overflow: hidden` still does the clipping. */
.law-practice-integrations .logo-reel {
  --logo-reel-edge-fade-width:  clamp(80px, calc((100vw - 1024px) / 2), 244px);
  --logo-reel-gap:              96px;
  --logo-reel-logo-height:      40px;
  --logo-reel-logo-max-height:  none;
  --logo-reel-logo-max-width:   none;
  --logo-reel-logo-slot-width:  auto;
  --logo-reel-track-height:     64px;
  --logo-reel-track-min-height: 64px;

  /* Overrides the primitive's `padding: var(--spacing-6) 0`. */
  padding:     0;
  height:      64px;
  display:     flex;
  align-items: center;
  width:       100%;
}

/* The "+7,000 other integrations" tail — 16/24 muted, per the frame. */
.law-practice-integrations .logo-reel__trailing {
  font-size:   var(--font-size-base);     /* 16px */
  line-height: var(--line-height-base);   /* 24px */
  color:       var(--muted-foreground);
}

/* The scroller is a flex item now. It must keep its `width: max-content`
   intact — if it shrank to the section width the marquee's -25% keyframe
   would no longer land flush on track 2 and the loop would visibly jump.
   The edge fades are `position: absolute`, so they stay out of flow and
   still span the full 64px (top: 0 / bottom: 0). */
.law-practice-integrations .logo-reel__scroller {
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .law-practice-integrations .logo-reel {
    --logo-reel-edge-fade-width: 60px;
  }
}

@media (max-width: 767px) {
  .law-practice-integrations .logo-reel {
    --logo-reel-edge-fade-width: 2rem;
    --logo-reel-gap:             56px;
    --logo-reel-logo-height:     32px;
  }
}

/* Matches the primitive's own reduced-motion handling in its other
   consumers: a static track sizes to its content instead of being
   pinned to the marquee's fixed height. The 64px frame above only makes
   sense for the clipped marquee — here the track wraps onto as many
   rows as it needs, so the fixed height and the zeroed padding have to
   be handed back or the extra rows would be clipped. */
@media (prefers-reduced-motion: reduce) {
  .law-practice-integrations .logo-reel {
    --logo-reel-track-height: auto;

    display: block;
    height:  auto;
    padding: var(--spacing-6) 0;
  }
}

/* ============================================================
   LogoReel — infinite-scroll logo carousel with edge fades.
   Relies on --background from the parent context for fade colour.
   Design tokens from src/styles/tokens.css.
   ============================================================ */

.logo-reel {
  --logo-reel-edge-fade-width: 200px;
  --logo-reel-gap: 3.5rem;
  --logo-reel-logo-height: 4rem;
  --logo-reel-logo-max-height: none;
  --logo-reel-logo-max-width: none;
  --logo-reel-logo-slot-width: auto;
  --logo-reel-track-height: auto;
  --logo-reel-track-min-height: 0;

  position: relative;
  width:    100%;
  padding:  var(--spacing-6) 0;   /* 24px top + bottom */
  overflow: hidden;
}

/* Left and right edge fades — colour inherits from parent section */
.logo-reel::before,
.logo-reel::after {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  width:          var(--logo-reel-edge-fade-width);
  pointer-events: none;
  z-index:        1;
}

.logo-reel::before {
  left:       0;
  background: linear-gradient(to right, var(--background) 30%, transparent);
}

.logo-reel::after {
  right:      0;
  background: linear-gradient(to left, var(--background) 30%, transparent);
}

/* Scroller — flex row of 4 identical tracks; animates to exactly -25% (= 1 track width). */
.logo-reel__scroller {
  display:   flex;
  width:     max-content;
  animation: logo-reel-scroll var(--logo-reel-duration) linear infinite;
}

/* Each track holds all logos once. padding-right = gap so the trailing space is baked in,
   making each track's width identical to (logos + n gaps). -25% lands flush on track 2. */
.logo-reel__track {
  display:       flex;
  align-items:   center;
  gap:           var(--logo-reel-gap);
  height:        var(--logo-reel-track-height);
  min-height:    var(--logo-reel-track-min-height);
  padding-right: var(--logo-reel-gap);
  flex-shrink:   0;
}

@keyframes logo-reel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .logo-reel {
    --logo-reel-track-height: auto;
  }

  .logo-reel::before,
  .logo-reel::after {
    display: none;
  }

  .logo-reel__scroller {
    animation: none;
    width: 100%;
  }

  .logo-reel__track[aria-hidden="true"] {
    display: none;
  }

  .logo-reel__track:not([aria-hidden="true"]) {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }
}

.logo-reel__wrap {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       var(--logo-reel-logo-slot-width);
  flex-shrink: 0;
}

/* Optional text item after the last logo. It is not a logo, so it opts out of
   the fixed slot width and sizes to its own copy; everything visual (font,
   colour) is the consumer's call. */
.logo-reel__trailing {
  width:       auto;
  white-space: nowrap;
}

/* Images are @2x — display at half their natural size.
   64px = half of 128px native height. width: auto preserves aspect ratio. */
.logo-reel__img {
  display:    block;
  height:     var(--logo-reel-logo-height);
  max-width:  var(--logo-reel-logo-max-width);
  max-height: var(--logo-reel-logo-max-height);
  width:      auto;
  object-fit: contain;
}

/* Dark scheme — invert monochrome logos */
.logo-reel[data-scheme="dark"] .logo-reel__img {
  filter: invert(1) brightness(0.85);
}


/* ============================================================
   Mobile landscape (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .logo-reel {
    --logo-reel-edge-fade-width: 80px;
    --logo-reel-gap: 2rem;
    --logo-reel-logo-height: 2rem;

    padding: var(--spacing-7) 0;
  }
}

/* ============================================================
   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 */
}