/* ============================================================
   Button presentation
   ============================================================

   One button shape and a scale of sizes. Nothing here paints a button.

   This came out of an application where six button families had grown up
   separately and each repeated the same eight structural declarations:
   inline-flex, centred, pointer, no underline, semibold, a transition and a
   border reset. That structure is what this file owns.

   What it deliberately does NOT own is the part that legitimately differs.
   Each surface has its own size, and each has its own palette: a card's button
   is smaller than a drawer's footer button, and which blue a "solid" button is
   on a given surface is a product decision, not a system one. So .ds-btn
   carries the shape, .ds-btn--<size> the metrics, and intent - solid, outline,
   ghost - stays with the consuming component.

   The intents take their colours from --ds-btn-bg and --ds-btn-fg, which the
   component sets, so a family keeps its own --solid/--outline/--ghost rules and
   those rules end up containing nothing but colour.
   ============================================================ */

/* justify-content is deliberately NOT in the base: a drawer footer button that can
   stretch should not centre its content. The sizes that centre, centre. */
.ds-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    font-weight: var(--ds-weight-semibold);
    border: none;
    transition: all 0.15s ease;
}

/* ── Sizes ──────────────────────────────────────────────────
   Named for their scale, not for the page that first used them. The values are
   the ones those surfaces already rendered. */

/* The most compact size: dense cards and table rows. */
.ds-btn--xs {
    justify-content: center;
    padding: 0.4rem 0.85rem;
    font-size: var(--ds-text-12);
    border-radius: 4px;
    line-height: 1;
    transition: all 0.12s ease;
}

/* Small: secondary actions on a profile or detail header. */
.ds-btn--sm {
    justify-content: center;
    padding: 0.5rem 1.15rem;
    font-size: 0.775rem;
    border-radius: 5px;
}

/* Medium: the default for a detail page action. */
.ds-btn--md {
    justify-content: center;
    padding: 0.55rem 1.35rem;
    font-size: var(--ds-text-13);
    border-radius: 6px;
}

/* Large: a prominent standalone action. */
.ds-btn--lg {
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: var(--ds-text-14);
    border-radius: 6px;
    transition: all 0.2s;
}

/* Drawer footers: a fixed-height action bar, so this one sets height rather than
   vertical padding, and keeps its label on one line beside an icon. */
.ds-btn--bar {
    height: 42px;
    padding: 0 22px;
    font-size: var(--ds-text-14);
    border-radius: var(--ds-radius-md);
    gap: 8px;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* Intent - solid, outline, ghost - deliberately stays with the component. The same
   intent is a different colour on the drawer, the header and the public pages, and
   which blue a "solid" button is on a given surface is a product decision, not a
   system one. The families keep their own --solid/--outline/--ghost rules for that,
   and they are now the only thing those rules contain. */