/* ==========================================================================
   Free to Build — Design System Primitives
   --------------------------------------------------------------------------
   Transcribed one-to-one from the Claude Design export
   (design/free-to-build/, Sep 2026 export) — components/core, components/forms,
   components/feedback, components/surfaces.

   The export ships React components with INLINE STYLE OBJECTS, not CSS. Every
   value below is lifted verbatim from those .jsx files; the only translation is
   mechanical: React hover/focus/active state becomes :hover / :focus-visible /
   :active, and the surface/variant props become modifier classes.

   Naming: .ftb-<component>[--<variant>]. Surface is carried by a parent
   .ftb-on-ink / .ftb-on-paper, defaulting to INK — dark is primary, not a mode.

   Tokens come from tokens.css. Nothing here defines a colour value.

   NOTE: the 15 SCF section layouts in global.css are still on the inherited
   FlowCraft CSS and do NOT use these primitives. They only pick up the tokens.
   Converting them is a separate job — see memory `project_ftb_site_css_layers`.
   ========================================================================== */


/* ─── SURFACE CONTEXT ─────────────────────────────────────────────────────
   Components resolve their colours from the surface they sit on. Ink is the
   default; wrap a Paper region in .ftb-on-paper to flip the whole subtree.
   These mirror the `surface`/`tone` prop in every export component.          */

.ftb-on-ink,
:root {
  --ftb-fg:            var(--ink-text);
  --ftb-fg-secondary:  var(--ink-text-secondary);
  --ftb-fg-muted:      var(--ink-text-muted);
  --ftb-surface-base:  var(--ink-base);
  --ftb-surface-sunken:var(--ink-sunken);
  --ftb-surface-raised:var(--ink-raised);
  --ftb-surface-overlay:var(--ink-overlay);
  --ftb-bd-hairline:   var(--ink-border-hairline, #2A2823);
  --ftb-bd:            var(--ink-border, #37342E);
  --ftb-bd-strong:     var(--ink-border-strong, #4B463E);
  --ftb-brass-fg:      var(--brass-light);
  --ftb-field-bg:      var(--ink-sunken);
}

.ftb-on-paper {
  --ftb-fg:            var(--paper-text, #1B1A17);
  --ftb-fg-secondary:  var(--paper-text-secondary, #4A463F);
  --ftb-fg-muted:      var(--paper-text-muted, #6B665C);
  --ftb-surface-base:  var(--paper-base);
  --ftb-surface-sunken:var(--paper-sunken);
  --ftb-surface-raised:var(--paper-raised);
  --ftb-surface-overlay:var(--paper-panel);
  --ftb-bd-hairline:   var(--paper-border-hairline, #E6E1D6);
  --ftb-bd:            var(--paper-border, #D8D3C8);
  --ftb-bd-strong:     var(--paper-border-strong, #C4BDAE);
  --ftb-brass-fg:      var(--brass);
  --ftb-field-bg:      #FFFFFF;
}


/* ─── ICON ────────────────────────────────────────────────────────────────
   Icon.jsx — 2px stroke, round caps/joins, currentColor, 24-unit viewBox.
   Inline the SVG in markup; this only sizes and aligns it.                   */

.ftb-icon {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ftb-icon--sm { width: 16px; height: 16px; }
.ftb-icon--md { width: 22px; height: 22px; }
.ftb-icon--lg { width: 24px; height: 24px; }

/* `play` is the one solid glyph in the set */
.ftb-icon--filled { fill: currentColor; stroke: none; }


/* ─── BUTTON ──────────────────────────────────────────────────────────────
   Button.jsx. Sizes: sm 48 / md 54 / lg 62 — all ≥48px tap target.
   Variants resolve against surface. Brass is the precious CTA: one per
   viewport. Active state translates down 1px — a settle, never a bounce.     */

.ftb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  box-sizing: border-box;

  font-family: var(--font-primary);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;

  transition:
    background var(--transition-base),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.ftb-btn:active            { transform: translateY(1px); }
.ftb-btn:focus-visible     { box-shadow: var(--shadow-focus); }

.ftb-btn[disabled],
.ftb-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Sizes */
.ftb-btn--sm { min-height: 48px; padding: 0 18px; font-size: 16px; gap: 8px; }
.ftb-btn--sm .ftb-icon { width: 18px; height: 18px; }

.ftb-btn--md { min-height: 54px; padding: 0 24px; font-size: 17px; gap: 10px; }
.ftb-btn--md .ftb-icon { width: 20px; height: 20px; }

.ftb-btn--lg { min-height: 62px; padding: 0 32px; font-size: 19px; gap: 12px; }
.ftb-btn--lg .ftb-icon { width: 22px; height: 22px; }

.ftb-btn--full { display: flex; width: 100%; }

/* Variant: primary — solid workhorse, inverts against the surface */
.ftb-btn--primary {
  background: var(--paper);
  color: var(--ink);
  border-color: transparent;
}
.ftb-btn--primary:hover:not([disabled])  { background: #FFFDF8; }
.ftb-btn--primary:active:not([disabled]) { background: var(--paper-sunken); }

.ftb-on-paper .ftb-btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.ftb-on-paper .ftb-btn--primary:hover:not([disabled])  { background: var(--ink-raised); }
.ftb-on-paper .ftb-btn--primary:active:not([disabled]) { background: var(--ink-overlay); }

/* Variant: brass — the accent CTA. One per viewport. */
.ftb-btn--brass {
  background: var(--brass);
  color: var(--ink);
  border-color: transparent;
}
.ftb-btn--brass:hover:not([disabled])  { background: var(--brass-light); }
.ftb-btn--brass:active:not([disabled]) { background: var(--brass-deep); }

/* Variant: secondary — outline */
.ftb-btn--secondary {
  background: transparent;
  color: var(--ftb-fg);
  border-color: var(--ftb-bd-strong);
}
.ftb-btn--secondary:hover:not([disabled])  { background: var(--ftb-surface-raised); }
.ftb-btn--secondary:active:not([disabled]) { background: var(--ftb-surface-overlay); }

/* Variant: ghost — text only */
.ftb-btn--ghost {
  background: transparent;
  color: var(--ftb-fg-secondary);
  border-color: transparent;
}
.ftb-btn--ghost:hover:not([disabled])  { background: var(--ftb-surface-raised); }
.ftb-btn--ghost:active:not([disabled]) { background: var(--ftb-surface-overlay); }


/* ─── BADGE ───────────────────────────────────────────────────────────────
   Badge.jsx — tracked mono status pill. Tones map to the muted semantics.    */

.ftb-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
}

.ftb-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ftb-badge--neutral {
  background: var(--ftb-surface-overlay);
  color: var(--ftb-fg-secondary);
  border-color: var(--ftb-bd);
}

.ftb-badge--brass {
  background: transparent;
  color: var(--brass-light);
  border-color: var(--brass-deep);
}
.ftb-on-paper .ftb-badge--brass {
  color: var(--brass);
  border-color: var(--brass);
}

.ftb-badge--success { background: var(--success-surface-ink, #212a1c); color: var(--success-on-ink); border-color: transparent; }
.ftb-badge--error   { background: var(--error-surface-ink,   #2b1c19); color: var(--error-on-ink);   border-color: transparent; }
.ftb-badge--warning { background: var(--warning-surface-ink, #2a2417); color: var(--warning-on-ink); border-color: transparent; }
.ftb-badge--info    { background: var(--info-surface-ink,    #1c242a); color: var(--info-on-ink);    border-color: transparent; }

.ftb-on-paper .ftb-badge--success { background: var(--success-surface-paper, #E9ECDD); color: var(--success); }
.ftb-on-paper .ftb-badge--error   { background: var(--error-surface-paper,   #F1E1DC); color: var(--error); }
.ftb-on-paper .ftb-badge--warning { background: var(--warning-surface-paper, #EFE7D2); color: var(--warning); }
.ftb-on-paper .ftb-badge--info    { background: var(--info-surface-paper,    #E1E8ED); color: var(--info); }


/* ─── TAG ─────────────────────────────────────────────────────────────────
   Tag.jsx — sentence-case chip. Softer register than Badge.                  */

.ftb-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--ftb-surface-raised);
  color: var(--ftb-fg-secondary);
  border: 1px solid var(--ftb-bd);
}

.ftb-tag--removable { padding: 8px 8px 8px 14px; }

.ftb-tag--selected {
  background: var(--brass-deep);
  color: var(--paper);
  border-color: transparent;
}
.ftb-on-paper .ftb-tag--selected { background: var(--brass); }

.ftb-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
}
.ftb-tag__remove .ftb-icon { width: 14px; height: 14px; }


/* ─── CARD ────────────────────────────────────────────────────────────────
   Card.jsx — separated from the base by LIGHTNESS, never by border alone.
   Shadow only on hover, and only when interactive.                           */

.ftb-card {
  background: var(--ftb-surface-raised);
  border: 1px solid var(--ftb-bd);
  border-radius: var(--radius-md);
  padding: 32px;
  color: var(--ftb-fg);
  box-shadow: none;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.ftb-card--base    { background: var(--ftb-surface-base); }
.ftb-card--overlay { background: var(--ftb-surface-overlay); }
.ftb-card--panel   { background: var(--paper-panel); }

.ftb-card--interactive { cursor: pointer; }
.ftb-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.ftb-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--ftb-brass-fg);
}

.ftb-card__title {
  font-family: var(--font-primary);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 12px;
}


/* ─── SECTION LABEL ───────────────────────────────────────────────────────
   SectionLabel.jsx — tracked mono marker with an optional brass number.
   Seasoning, not the meal.                                                   */

.ftb-section-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  justify-content: flex-start;
}

.ftb-section-label--center { justify-content: center; }

.ftb-section-label__number {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ftb-brass-fg);
}

.ftb-section-label__text {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ftb-fg-secondary);
}


/* ─── PLUMB RULE ──────────────────────────────────────────────────────────
   PlumbRule.jsx — THE signature device. A vertical hairline as structure:
   brass knob at the head, faceted bob at the foot. Never ornament.           */

.ftb-plumb-rule {
  position: relative;
  width: 1px;
  flex: none;
  height: 120px;
  background: var(--ftb-bd-strong);
}

.ftb-plumb-rule--stretch { height: auto; align-self: stretch; }

.ftb-plumb-rule__knob {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brass-light);
}

.ftb-plumb-rule__bob {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) rotate(45deg);
  width: 11px;
  height: 11px;
  background: var(--brass);
}


/* ─── CALLOUT ─────────────────────────────────────────────────────────────
   Callout.jsx — pull quote with a brass left rule. This is the panel you move
   text INTO when it would otherwise sit on imagery.                          */

.ftb-callout {
  margin: 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--brass);
  background: transparent;
}

.ftb-callout__body {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ftb-fg);
}

.ftb-callout__cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-light);
}
.ftb-on-paper .ftb-callout__cite { color: var(--brass-deep); }


/* ─── FIELD SHELL ─────────────────────────────────────────────────────────
   FieldShell.jsx — chrome shared by Input, Textarea, Select.
   Dark-first, 19px text, ≥52px tall, high-contrast borders, brass focus.     */

.ftb-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ftb-field__label {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ftb-fg);
}

.ftb-field__hint {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ftb-fg-muted);
}

.ftb-field__error {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.5;
  color: var(--error-on-ink);
}
.ftb-on-paper .ftb-field__error { color: var(--error); }


/* ─── INPUT / TEXTAREA / SELECT ───────────────────────────────────────── */

.ftb-input,
.ftb-textarea,
.ftb-select {
  font-family: var(--font-primary);
  font-size: 19px;
  line-height: 1.4;
  padding: 13px 16px;
  width: 100%;
  box-sizing: border-box;
  color: var(--ftb-fg);
  background: var(--ftb-field-bg);
  border: 1px solid var(--ftb-bd-strong);
  border-radius: var(--radius-sm);
  outline: none;
  box-shadow: none;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-fast);
}

.ftb-input,
.ftb-select { min-height: 52px; }

.ftb-textarea {
  line-height: 1.6;
  resize: vertical;
}

.ftb-input::placeholder,
.ftb-textarea::placeholder { color: var(--ftb-fg-muted); }

.ftb-input:focus,
.ftb-textarea:focus,
.ftb-select:focus {
  border-color: var(--brass-light);
  box-shadow: var(--shadow-focus);
}

.ftb-input[disabled],
.ftb-textarea[disabled],
.ftb-select[disabled] { opacity: 0.5; }

.ftb-input[disabled]    { cursor: not-allowed; }
.ftb-textarea[disabled] { cursor: not-allowed; }

.ftb-input--error,
.ftb-textarea--error,
.ftb-select--error {
  border-color: var(--error-on-ink);
}
.ftb-input--error:focus,
.ftb-textarea--error:focus,
.ftb-select--error:focus { border-color: var(--error-on-ink); }
.ftb-on-paper .ftb-input--error,
.ftb-on-paper .ftb-textarea--error,
.ftb-on-paper .ftb-select--error { border-color: var(--error); }

/* Select needs room for the chevron + a custom affordance */
.ftb-select-wrap { position: relative; }

.ftb-select {
  padding: 13px 44px 13px 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ftb-select[disabled] { cursor: not-allowed; }

.ftb-select-wrap__chevron {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ftb-fg-muted);
  display: flex;
}


/* ─── CHECKBOX ────────────────────────────────────────────────────────────
   Checkbox.jsx — visually-hidden native input, 24px brass box.               */

.ftb-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  min-height: 48px;
  padding-top: 2px;
  position: relative;
}

.ftb-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ftb-checkbox__box {
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 2px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ftb-field-bg);
  border: 1px solid var(--ftb-bd-strong);
  transition:
    background var(--transition-base),
    border-color var(--transition-base);
}

.ftb-checkbox__box .ftb-icon {
  width: 16px;
  height: 16px;
  stroke: var(--ink);
  stroke-width: 2.5;
  opacity: 0;
}

.ftb-checkbox__input:checked + .ftb-checkbox__box {
  background: var(--brass);
  border-color: var(--brass);
}
.ftb-checkbox__input:checked + .ftb-checkbox__box .ftb-icon { opacity: 1; }

.ftb-checkbox__input:focus-visible + .ftb-checkbox__box { box-shadow: var(--shadow-focus); }

.ftb-checkbox__label {
  font-family: var(--font-primary);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ftb-fg);
}

.ftb-checkbox--disabled { opacity: 0.5; cursor: not-allowed; }


/* ─── RADIO ───────────────────────────────────────────────────────────── */

.ftb-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ftb-radio-group__label {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ftb-fg);
}

.ftb-radio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
  position: relative;
}

.ftb-radio__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ftb-radio__mark {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ftb-field-bg);
  border: 1px solid var(--ftb-bd-strong);
  transition: border-color var(--transition-base);
}

.ftb-radio__mark::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brass);
  opacity: 0;
}

.ftb-radio__input:checked + .ftb-radio__mark { border-color: var(--brass); }
.ftb-radio__input:checked + .ftb-radio__mark::after { opacity: 1; }
.ftb-radio__input:focus-visible + .ftb-radio__mark { box-shadow: var(--shadow-focus); }

.ftb-radio__label {
  font-family: var(--font-primary);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ftb-fg);
}

.ftb-radio--disabled { opacity: 0.5; cursor: not-allowed; }


/* ─── SWITCH ──────────────────────────────────────────────────────────── */

.ftb-switch {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  cursor: pointer;
  position: relative;
}

.ftb-switch__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ftb-switch__track {
  width: 52px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-full);
  position: relative;
  background: var(--ftb-surface-overlay);
  border: 1px solid var(--ftb-bd-strong);
  transition: background var(--transition-base);
}

.ftb-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ftb-fg-secondary);
  transition: left var(--transition-base);
}

.ftb-switch__input:checked + .ftb-switch__track {
  background: var(--brass);
  border-color: var(--brass);
}
.ftb-switch__input:checked + .ftb-switch__track::after {
  left: 25px;
  background: var(--ink);
}

.ftb-switch__input:focus-visible + .ftb-switch__track { box-shadow: var(--shadow-focus); }

.ftb-switch__label {
  font-family: var(--font-primary);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ftb-fg);
}

.ftb-switch--disabled { opacity: 0.5; cursor: not-allowed; }


/* ─── ACCORDION ───────────────────────────────────────────────────────────
   Accordion.jsx — FAQ. Brass plus/minus affordance, plumb-settle open.
   Progressive enhancement: works as <details>, JS may swap in max-height.    */

.ftb-accordion { border-top: 1px solid var(--ftb-bd); }

.ftb-accordion__item { border-bottom: 1px solid var(--ftb-bd); }

.ftb-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 64px;
  padding: 18px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-primary);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ftb-fg);
}

.ftb-accordion__trigger::-webkit-details-marker { display: none; }
.ftb-accordion__trigger:focus-visible { box-shadow: var(--shadow-focus); }

.ftb-accordion__affordance {
  color: var(--ftb-brass-fg);
  display: flex;
  flex: none;
}
.ftb-accordion__affordance .ftb-icon { width: 22px; height: 22px; }

/* plus → minus: the vertical bar collapses when open */
.ftb-accordion__affordance .ftb-icon__bar-v {
  transform-origin: center;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.ftb-accordion__item[open] .ftb-icon__bar-v,
.ftb-accordion__trigger[aria-expanded="true"] .ftb-icon__bar-v {
  opacity: 0;
  transform: rotate(90deg);
}

.ftb-accordion__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--transition-slow),
    opacity var(--transition-base);
}

.ftb-accordion__item[open] .ftb-accordion__panel,
.ftb-accordion__trigger[aria-expanded="true"] + .ftb-accordion__panel {
  max-height: 480px;
  opacity: 1;
}

.ftb-accordion__body {
  padding: 0 4px 24px;
  font-size: 19px;
  line-height: 1.7;
  max-width: 62ch;
  color: var(--ftb-fg-secondary);
}


/* ─── ALERT ───────────────────────────────────────────────────────────────
   Alert.jsx — inline status banner on the muted semantic palette.            */

.ftb-alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid;
}

.ftb-alert__icon { display: flex; flex: none; margin-top: 1px; }
.ftb-alert__icon .ftb-icon { width: 22px; height: 22px; }

.ftb-alert__content { flex: 1; }

.ftb-alert__title {
  font-family: var(--font-primary);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}

.ftb-alert__body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ftb-fg-secondary);
}

.ftb-alert__close {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex: none;
  padding: 2px;
  color: inherit;
}
.ftb-alert__close .ftb-icon { width: 18px; height: 18px; }

.ftb-alert--success { background: var(--success-surface-ink, #212a1c); border-color: var(--success-on-ink); }
.ftb-alert--success .ftb-alert__icon,
.ftb-alert--success .ftb-alert__title,
.ftb-alert--success .ftb-alert__close { color: var(--success-on-ink); }

.ftb-alert--error { background: var(--error-surface-ink, #2b1c19); border-color: var(--error-on-ink); }
.ftb-alert--error .ftb-alert__icon,
.ftb-alert--error .ftb-alert__title,
.ftb-alert--error .ftb-alert__close { color: var(--error-on-ink); }

.ftb-alert--warning { background: var(--warning-surface-ink, #2a2417); border-color: var(--warning-on-ink); }
.ftb-alert--warning .ftb-alert__icon,
.ftb-alert--warning .ftb-alert__title,
.ftb-alert--warning .ftb-alert__close { color: var(--warning-on-ink); }

.ftb-alert--info { background: var(--info-surface-ink, #1c242a); border-color: var(--info-on-ink); }
.ftb-alert--info .ftb-alert__icon,
.ftb-alert--info .ftb-alert__title,
.ftb-alert--info .ftb-alert__close { color: var(--info-on-ink); }

.ftb-on-paper .ftb-alert--success { background: var(--success-surface-paper, #E9ECDD); border-color: var(--success); }
.ftb-on-paper .ftb-alert--success .ftb-alert__icon,
.ftb-on-paper .ftb-alert--success .ftb-alert__title,
.ftb-on-paper .ftb-alert--success .ftb-alert__close { color: var(--success); }

.ftb-on-paper .ftb-alert--error { background: var(--error-surface-paper, #F1E1DC); border-color: var(--error); }
.ftb-on-paper .ftb-alert--error .ftb-alert__icon,
.ftb-on-paper .ftb-alert--error .ftb-alert__title,
.ftb-on-paper .ftb-alert--error .ftb-alert__close { color: var(--error); }

.ftb-on-paper .ftb-alert--warning { background: var(--warning-surface-paper, #EFE7D2); border-color: var(--warning); }
.ftb-on-paper .ftb-alert--warning .ftb-alert__icon,
.ftb-on-paper .ftb-alert--warning .ftb-alert__title,
.ftb-on-paper .ftb-alert--warning .ftb-alert__close { color: var(--warning); }

.ftb-on-paper .ftb-alert--info { background: var(--info-surface-paper, #E1E8ED); border-color: var(--info); }
.ftb-on-paper .ftb-alert--info .ftb-alert__icon,
.ftb-on-paper .ftb-alert--info .ftb-alert__title,
.ftb-on-paper .ftb-alert--info .ftb-alert__close { color: var(--info); }


/* ─── MOTION ──────────────────────────────────────────────────────────────
   A plumb bob settles, it does not bounce. Respect reduced-motion.           */

@media (prefers-reduced-motion: reduce) {
  .ftb-btn,
  .ftb-card,
  .ftb-input,
  .ftb-textarea,
  .ftb-select,
  .ftb-checkbox__box,
  .ftb-radio__mark,
  .ftb-switch__track,
  .ftb-switch__track::after,
  .ftb-accordion__panel {
    transition: none;
  }
  .ftb-btn:active,
  .ftb-card--interactive:hover { transform: none; }
}