/* ══════════════════════════════════════════════════════════════
   runi-buttons.css — the one button set (#852 §4), on the base system.

   This file is the ONLY place the set is defined: four variants
   (.btn-primary, .btn-secondary, .btn-ghost, .btn-icon) × two sizes
   (.size-public, .size-operator). A button takes one of each:
   <button class="btn-primary size-operator">. Pages add layout
   (margins, position) under their own hook class, never colour,
   font, padding or radius. scripts/buttons.test.mjs pins the values
   and fails if another stylesheet under assets/, agents/ or dashboard/
   defines a class of the set. It does not see page-local <style> blocks:
   the Kenneth draft pages (dashboard/kenneth-*.html,
   skraeddersyet-agent.html) still carry their own .btn-primary/.btn-ghost
   until they move to the set (#852 phase 2, later work).

   Base system (Runi, 29 Sep 2026; design.md "Public site: move it onto the
   base system"; Runi, 31 Oct 2026: one canonical target): the public set is
   the console set's values (agents/console.css .ds-btn-*, @runi-services/
   design-system controls.css): square (--rc-radius, 0), a 1px border, weight
   600, the primary the one red action on its on-accent text, the secondary
   outlined on the rule and ink on hover, the ghost and the icon text that
   fill on hover, disabled legible in --rc-text-disabled with no fade, and
   focus the 2px navy outline at offset 2. Before, the set was round
   (12 and 6), weight 500, with a red focus ring.

   Public pages load runi-tokens.css, not assets/base.css, so every
   --rc-* token here carries its public fallback: the --rs-* alias where
   runi-tokens has one, else the base system's light value.
   ══════════════════════════════════════════════════════════════ */

/* The shared box. Every variant keeps a 1px border (transparent unless it
   shows) so a primary and a secondary side by side are the same height. */
/* Square outright, not var(--rc-radius): runi-public-content.css re-declares --rc-radius as 12px inside eight public page
   scopes (the public content's own, older look, its own lane), and the set must be square on those pages too. */
.btn-primary,.btn-secondary,.btn-ghost,.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;margin:0;border:1px solid transparent;border-radius:0;font-family:var(--rc-font-sans, var(--rs-sans));text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--rc-motion-fast, 120ms) var(--rc-ease, cubic-bezier(.2,.65,.2,1)),color var(--rc-motion-fast, 120ms) var(--rc-ease, cubic-bezier(.2,.65,.2,1)),border-color var(--rc-motion-fast, 120ms) var(--rc-ease, cubic-bezier(.2,.65,.2,1))}

/* Primary: the one red action, its on-accent text (white in light, navy on the dark #E8897F);
   hover is the named §5.3 accent hover. */
.btn-primary{background:var(--rc-red, var(--rs-red));border-color:var(--rc-red, var(--rs-red));color:var(--rc-on-accent, #fff)}
.btn-primary:hover{background:var(--rc-accent-hover, #621611);border-color:var(--rc-accent-hover, #621611)}

/* Secondary: outlined on the rule; the border turns ink on hover, no fill. */
.btn-secondary{background:transparent;border:1px solid var(--rc-rule, var(--rs-line));color:var(--rc-ink, var(--rs-ink))}
.btn-secondary:hover{border-color:var(--rc-ink, var(--rs-ink))}

/* Ghost: text only until hovered. */
.btn-ghost{background:transparent;border-color:transparent;color:var(--rc-text-2, var(--rs-ink))}
.btn-ghost:hover{background:var(--rc-bg-sub, var(--rs-paper-deep));color:var(--rc-ink, var(--rs-ink))}

/* Icon: a square that holds one glyph. */
.btn-icon{background:transparent;color:var(--rc-text-2, var(--rs-ink))}
.btn-icon:hover{background:var(--rc-bg-sub, var(--rs-paper-deep));color:var(--rc-ink, var(--rs-ink))}

/* Sizes: public 48 (marketing pages) and operator 40 (console, tools), as the console set's. */
.size-public{height:48px;font:600 16px/24px var(--rc-font-sans, var(--rs-sans));padding:0 24px}
.size-operator{height:40px;font:600 14px/20px var(--rc-font-sans, var(--rs-sans));padding:0 16px}
.btn-icon.size-operator{width:40px;padding:0}
.btn-icon.size-public{width:48px;padding:0}

/* Disabled: legible, not faded (#852 §4). Last, so it wins over hover. The primary and the icon keep a sub fill;
   a disabled secondary is its hair border alone, a disabled ghost its text alone (SysControls; Runi, 30 Sep). */
:is(.btn-primary,.btn-secondary,.btn-ghost,.btn-icon):is(:disabled,[aria-disabled="true"]){opacity:1;color:var(--rc-text-disabled, #8E9094);background:var(--rc-bg-sub, var(--rs-paper-deep));border-color:transparent;cursor:not-allowed}
.btn-secondary:is(:disabled,[aria-disabled="true"]){background:transparent;border-color:var(--rc-hair, rgba(21,19,17,.10))}
.btn-ghost:is(:disabled,[aria-disabled="true"]){background:transparent}

/* Focus: the 2px navy outline at offset 2, the base system's one focus ring (navy in light, paper in dark). */
:is(.btn-primary,.btn-secondary,.btn-ghost,.btn-icon):focus-visible{outline:var(--rc-focus-outline, 2px solid var(--rc-focus, #0B1320));outline-offset:var(--rc-focus-offset, 2px);box-shadow:none}