/* ========================================================================
   button.css -- ScribeHold button component

   Layer 4 (component) of the modular CSS bundle. Consumes tokens from
   tokens.css and inherits the global :focus-visible ring from base.css.

   Provides:
     - .btn         base (inline-flex, unconditional 44x44 tap target, transition)
     - .btn-primary filled accent button (primary action)
     - .btn-secondary outlined button on neutral surface (secondary action)
     - .btn-ghost   text-style button with no fill or border (tertiary action)

   Accessibility:
     - Minimum 44x44 tap target on all buttons regardless of size variant or
       viewport (WCAG 2.5.5).
     - All interactive states (default, hover, active, disabled) use
       :focus-visible -- not :focus -- so the keyboard ring never appears on
       mouse click. The keyboard ring uses --color-focus-ring with
       outline-offset for AA contrast against any button surface.
     - Disabled buttons are not focusable from the keyboard and remove the
       hover transition.

   All color, type, spacing, radius, shadow, and motion values come from
   tokens.css via var(...). No hard-coded hex, px, or ms values in this
   file.

   No @import directives -- bundle assembly is Task 20's concern.

   Bundle order: tokens -> base -> layout -> components/* -> pages/*
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. Base -- .btn
   ------------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    /* Unconditional 44x44 tap target (WCAG 2.5.5). Padding sets the visual
       size; min-height + min-width guarantee the hit area even when text
       content is small or the button contains only an icon. */
    min-height: var(--space-12);  /* 48px -- exceeds 44px floor */
    min-width: var(--space-12);
    padding: var(--space-2) var(--space-5);

    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-normal);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-ink);

    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;

    transition:
        background-color var(--duration-fast) var(--easing-standard),
        color var(--duration-fast) var(--easing-standard),
        border-color var(--duration-fast) var(--easing-standard),
        box-shadow var(--duration-fast) var(--easing-standard);
}

/* Keyboard-only focus ring. Buttons get an explicit rule (in addition to
   the global :focus-visible in base.css) so the outline-offset reads
   correctly against the button's border-radius. */
.btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.btn[disabled],
.btn:disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
    transition: none;
}

/* ------------------------------------------------------------------------
   2. Variant -- .btn-primary (filled accent)
   ------------------------------------------------------------------------ */

/* WCAG 1.4.3 — cream text on navy (--color-cta #1b2a4e) reaches ~10:1
   (AAA). Navy provides true figure-ground separation against the warm-cream
   page, reading as institutional authority — the right register for
   legal-evidence buyers. Hover lightens to --color-cta-hover (#2a3d63)
   while keeping cream text. Active deepens back to full navy. */
/* :visited is included so anchor CTAs keep cream text after their target has
   been visited. base.css `a:visited` (specificity 0,1,1) otherwise outranks
   `.btn-primary` (0,1,0) on the color property, flipping the label to brown
   accent-ink over the navy fill. */
.btn-primary,
.btn-primary:visited {
    background: var(--color-cta);
    color: var(--color-bg-cream);
    border-color: var(--color-cta);
}

.btn-primary:hover {
    background: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
    color: var(--color-bg-cream);
    text-decoration: none;
}

.btn-primary:active {
    background: var(--color-ink-navy);
    border-color: var(--color-ink-navy);
    color: var(--color-bg-cream);
    box-shadow: var(--shadow-sm);
}

.btn-primary:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}

/* ------------------------------------------------------------------------
   3. Variant -- .btn-secondary (outlined)
   ------------------------------------------------------------------------ */

.btn-secondary,
.btn-secondary:visited {
    background: var(--color-surface);
    color: var(--color-ink);
    border-color: var(--color-border-strong);
}

.btn-secondary:hover {
    background: var(--color-bg-manila);
    border-color: var(--color-accent);
    color: var(--color-ink);
    text-decoration: none;
}

.btn-secondary:active {
    background: var(--color-bg-parchment);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}

/* ------------------------------------------------------------------------
   4. Variant -- .btn-ghost (no fill, no border)
   ------------------------------------------------------------------------ */

.btn-ghost,
.btn-ghost:visited {
    background: transparent;
    color: var(--color-link);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--color-accent-wash-06);
    color: var(--color-link-hover);
    border-color: transparent;
    text-decoration: none;
}

.btn-ghost:active {
    background: var(--color-accent-wash-10);
    color: var(--color-link-hover);
}

.btn-ghost:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------------
   5. Modifier -- .btn--stacked (two-line label: action + secondary note)

   Used by price CTAs that carry a discounted-price note on a second line,
   e.g. "Legal Export Pack -- $44.99" over "($34.99 for Pro subscribers)".
   Stacks the two lines vertically and lets the label wrap so the button
   never overflows on narrow viewports. The secondary line uses .btn__note.

   Markup:
     <a class="btn btn-primary btn--stacked" href="...">
       Legal Export Pack &mdash; $44.99
       <span class="btn__note">$34.99 for Pro subscribers</span>
     </a>
   ------------------------------------------------------------------------ */

.btn--stacked {
    flex-direction: column;
    gap: var(--space-1);
    white-space: normal;
    line-height: var(--line-height-snug);
    padding-block: var(--space-4);
}

/* Secondary note line on a stacked button. On the navy CTA fill the note
   must stay legible, so it inherits the button's cream text at full
   opacity and leans on a smaller, regular weight (not a dimmed opacity)
   to read as secondary. ~7:1 cream-on-navy keeps it AA at this size. */
.btn__note {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: inherit;
}