/* =============================================================
   Tikistats — Design System: Button component (P4)

   Canonical family: .tk-btn / .tk-btn-primary / .tk-btn-secondary /
   .tk-btn-danger / .tk-btn-ghost.

   .mm-btn* (was static/css/validator/match_management.css) and
   .av-btn* (was static/css/validator/annotations_validation.css) are
   preserved here as back-compat aliases, grouped into the same
   selectors wherever their declarations were identical, so existing
   templates keep rendering with ZERO markup changes. This file is
   loaded unconditionally by all base templates — no template can
   render an unstyled button again (see docs/AGENTS.md §23, §24, §37).

   Two INTENTIONAL, user-approved visual changes vs. pre-P4:
     1. .mm-btn-create gains a hover state (previously invisible hover
        feedback) — unified with the already-shipped .av-btn-primary
        lime hover.
     2. .av-btn-danger's raw #b94040 is remapped to var(--danger)
        (#FF6B5B) — no matching token existed for the old raw hex.

   New templates: use .tk-btn* only. .mm-btn*/.av-btn* are legacy
   aliases, kept for back-compat, not to be used in new markup.
   ============================================================= */

/* ── Base / shared structure ──────────────────────────────────────
   Union of .mm-btn + .av-btn structural properties. justify-content
   is deliberately NOT here (see next block) — .mm-btn never had it
   and must not gain it. Transition is a fresh, purely additive
   smoothing (no prior transitions existed on either legacy family;
   does not change any resting/hover end-state). */

.tk-btn,
.mm-btn,
.av-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-13);
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--r-md);
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--line-dark-1);
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-base) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

/* .av-btn had justify-content:center; .mm-btn never did. Keep the
   scope narrow so .mm-btn's layout (e.g. bare buttons, mm-btn-icon
   which sets its own justify-content) does not shift. .tk-btn (fresh,
   no legacy instances to protect) opts in too — centered content in
   a fixed-padding button is the more correct default for new markup.
   [Fresh-component decision, not a preservation requirement.] */
.tk-btn,
.av-btn {
    justify-content: center;
}

/* .mm-btn's own "bare secondary" look — still rendered directly by
   templates that use plain class="mm-btn" with no modifier. NOT
   added to .av-btn: that class is never used bare in templates and
   previously had no default background/color of its own, so
   extending it here would be an unrequested change. */
.tk-btn,
.mm-btn {
    background: var(--surface-dark-2);
    color: var(--ink-invert-1);
}

/* Shared hover: .mm-btn:hover and .av-btn-secondary:hover were
   byte-identical in the source files — pure consolidation, zero
   behavior change. Does NOT include bare .av-btn:hover (never used
   without a modifier, so that combination doesn't occur). */
.tk-btn:hover,
.mm-btn:hover,
.av-btn-secondary:hover {
    border-color: var(--brand-emerald);
}

/* ── Primary ─────────────────────────────────────────────────────
   Merges .mm-btn-create + .av-btn-primary. Explicit spec (user-
   provided): borderless solid emerald fill, --surface-dark-0 text,
   --fs-14, opacity-only transition — overrides the shared base's
   border/font-size/transition for this variant only. */
.tk-btn-primary,
.mm-btn-create,
.av-btn-primary {
    background: var(--brand-emerald);
    color: var(--surface-dark-0);
    border: none;
    font-size: var(--fs-14);
    transition: opacity var(--dur-fast);
}

/* INTENTIONAL CHANGE #1 (user-approved): .mm-btn-create previously had
   no visible hover of its own (only the generic .mm-btn:hover
   border-color change, imperceptible against its own matching emerald
   background). Adopting the already-shipped .av-btn-primary lime
   hover here gives .mm-btn-create real, consistent hover feedback for
   the first time. */
.tk-btn-primary:hover,
.mm-btn-create:hover,
.av-btn-primary:hover {
    background: var(--brand-lime);
}

/* ── Secondary ───────────────────────────────────────────────────
   .tk-btn-secondary aliases .av-btn-secondary exactly. Note the ink
   color is intentionally different from the bare .tk-btn/.mm-btn
   default above (--ink-invert-2 here vs --ink-invert-1 there) — this
   preserves two historically slightly-different "neutral button"
   looks. Not a bug. Hover is already covered by the shared
   .tk-btn:hover / .av-btn-secondary:hover rule above. */
.tk-btn-secondary,
.av-btn-secondary {
    background: var(--surface-dark-2);
    color: var(--ink-invert-2);
}

/* ── Danger ──────────────────────────────────────────────────────
   INTENTIONAL CHANGE #2 (user-approved): old raw #b94040 remapped to
   var(--danger) (#FF6B5B) — muted brick-red -> brighter coral. No
   token existed for the old raw hex; remapped to the closest existing
   semantic token instead of inventing a new palette entry. Affects
   the 3 existing .av-btn-danger buttons visibly. */
.tk-btn-danger,
.av-btn-danger {
    background: var(--danger);
    color: var(--ink-invert-1);
}

/* NOTE: .mm-btn-block is a DIFFERENT, outline-style "destructive"
   button (no fill, coral border+text only) with no current canonical
   equivalent — deliberately NOT aliased into .tk-btn-danger's filled
   treatment. See "Legacy-only mm-btn variants" section below. Two
   similar-sounding classes, visually different, preserved separately
   rather than silently redesigned. */

/* ── Ghost ───────────────────────────────────────────────────────
   No legacy precedent — fresh design, derived from the hover pattern
   already established for .mm-btn-edit/.mm-btn-continue/.mm-btn-block
   (background: var(--surface-dark-1) on hover) for visual consistency
   with the rest of the family. Contrast: --ink-invert-2 (#B8CFC8) on
   --surface-dark-1 (#0F2A23) ~= 9.1:1; on --surface-dark-2 (#1A3A32)
   ~= 7.4:1 — both clear AAA for normal text. */
.tk-btn-ghost {
    background: transparent;
    border-color: var(--line-dark-1);
    color: var(--ink-invert-2);
}

.tk-btn-ghost:hover {
    background: var(--surface-dark-1);
}

/* ── Focus-visible ───────────────────────────────────────────────
   Applied across the whole alias group, including legacy mm-btn/
   av-btn names — an accessibility improvement that only affects
   keyboard-focus state, never mouse-clicked appearance, so it does
   not violate "renders identically" for mouse users. Reuses
   var(--shadow-focus) as-is. */
.tk-btn:focus-visible,
.mm-btn:focus-visible,
.av-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ── Disabled ────────────────────────────────────────────────────
   Neither legacy family had a disabled state before. opacity 0.5
   (distinct from the separate, out-of-scope .mm-page-btn:disabled
   pagination pattern, which keeps its own 0.4 value untouched) plus
   pointer-events:none per the accessibility requirement. */
.tk-btn:disabled,
.mm-btn:disabled,
.av-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── Legacy-only mm-btn variants (no canonical .tk-btn equivalent) ─
   Moved verbatim from match_management.css. Not mapped to any of the
   5 canonical .tk-btn-* variants: mm-btn-filter/-icon are layout-only
   modifiers with no requested equivalent; mm-btn-edit/-continue/
   -block are contextual amber/coral OUTLINE variants specific to the
   mm module — mm-btn-block in particular looks like a "danger" button
   by name but is visually an outline style, not filled, so it is
   deliberately NOT unified with .tk-btn-danger (see note above). */

.mm-btn-filter {
    font-size: var(--fs-12);
}

.mm-btn-icon {
    padding: var(--s-2);
    width: 32px;
    height: 32px;
    justify-content: center;
}

/* No existe un token "naranja" dedicado en el Design System — se usa
   --accent-amber para Edit y --accent-amber-2 (más claro) para Continuar,
   manteniendo la distinción visual sin introducir un color nuevo. */
.mm-btn-edit,
.mm-btn-continue,
.mm-btn-block {
    background: transparent;
}

.mm-btn-edit {
    border-color: var(--accent-amber);
    color: var(--accent-amber);
}

.mm-btn-continue {
    border-color: var(--accent-amber-2);
    color: var(--accent-amber-2);
}

.mm-btn-block {
    border-color: var(--accent-coral);
    color: var(--accent-coral);
}

.mm-btn-edit:hover,
.mm-btn-continue:hover,
.mm-btn-block:hover {
    background: var(--surface-dark-1);
}

/* ── Subtle-text token ───────────────────────────────────────────
   Defined for future use (P5 applies it repo-wide). Not referenced
   by any template or rule in this file today. */
.tk-text-muted {
    color: var(--ink-invert-3);
}

/* ── Token text-color utilities ─────────────────────────────────
   Replace inline style="color: var(--...)" on icons/labels across the
   admin pages. Sibling of .tk-text-muted; loaded with the design layer. */
.tk-text-emerald { color: var(--brand-emerald); }
.tk-text-lime    { color: var(--brand-lime); }
.tk-text-mint    { color: var(--brand-mint); }
.tk-text-danger  { color: var(--danger); }
.tk-text-warning { color: var(--warning); }
.tk-text-info    { color: var(--info); }
.tk-text-ink1    { color: var(--ink-invert-1); }
.tk-text-ink2    { color: var(--ink-invert-2); }

/* ── Visibility utility ──────────────────────────────────────────
   Global replacement for inline style="display:none" / JS-toggled
   display:block|none. Toggle via classList.add/remove('is-hidden').
   Loaded with the rest of the design layer on all base templates. */
.is-hidden {
    display: none;
}