/* ==========================================================================
   FestEngine Design System — static CSS
   Extracted from ds-components.jsx (previously injected at runtime by React).
   .fe-eyebrow and .fe-display are defined in tokens/base.css — not duplicated here.
   ========================================================================== */

/* ---- Button ------------------------------------------------------------ */
.fe-btn {
  --_bg: var(--accent); --_fg: var(--text-on-accent); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-sans); font-weight: var(--fw-bold); letter-spacing: -0.01em;
  border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  text-decoration: none; line-height: 1; position: relative; isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}
.fe-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.fe-btn:hover { color: var(--_fg); }
.fe-btn:active { transform: translateY(1px) scale(.985); }
.fe-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.fe-btn--sm  { height: var(--control-sm); padding: 0 var(--space-4); font-size: var(--fs-body-sm); }
.fe-btn--md  { height: var(--control-md); padding: 0 var(--space-6); font-size: var(--fs-body); }
.fe-btn--lg  { height: var(--control-lg); padding: 0 var(--space-8); font-size: var(--fs-body-lg); }
.fe-btn--primary { --_bg: var(--accent); --_fg: var(--text-on-accent); box-shadow: var(--glow-teal); }
.fe-btn--primary:hover:not([disabled]) { --_bg: var(--accent-hover); }
.fe-btn--warm    { --_bg: var(--accent-warm); --_fg: var(--text-on-warm); box-shadow: var(--glow-coral); }
.fe-btn--warm:hover:not([disabled])    { --_bg: var(--accent-warm-hover); }
.fe-btn--secondary { --_bg: var(--surface-raised); --_fg: var(--text-primary); --_bd: var(--line-strong); }
.fe-btn--secondary:hover:not([disabled]) { --_bg: var(--surface-active); border-color: var(--teal-tint-40); }
.fe-btn--ghost   { --_bg: transparent; --_fg: var(--text-body); }
.fe-btn--ghost:hover:not([disabled])   { --_bg: var(--glass-light); --_fg: var(--text-primary); }
.fe-btn--outline { --_bg: transparent; --_fg: var(--accent); --_bd: var(--teal-tint-40); }
.fe-btn--outline:hover:not([disabled]) { --_bg: var(--accent-tint); }
.fe-btn--danger  { --_bg: var(--danger-500); --_fg: #2a0606; }
.fe-btn--danger:hover:not([disabled])  { filter: brightness(1.08); }
.fe-btn--block   { width: 100%; }
.fe-btn__icon    { display: inline-flex; line-height: 0; flex: none; }

/* ---- Badge ------------------------------------------------------------- */
.fe-badge {
  --_fg: var(--text-body); --_bg: var(--glass-light); --_dot: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
  font-weight: var(--fw-semibold); font-size: var(--fs-caption); line-height: 1;
  padding: 5px 10px; border-radius: var(--radius-pill); color: var(--_fg); background: var(--_bg);
  border: 1px solid transparent; white-space: nowrap;
}
.fe-badge--sm  { font-size: var(--fs-micro); padding: 3px 8px; }
.fe-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--_dot); flex: none; }
.fe-badge--neutral { --_fg: var(--text-body);     --_bg: var(--glass-light);      --_dot: var(--text-secondary); }
.fe-badge--accent  { --_fg: var(--teal-300);      --_bg: var(--teal-tint-12);     --_dot: var(--teal-400); }
.fe-badge--warm    { --_fg: var(--coral-300);     --_bg: var(--coral-tint-12);    --_dot: var(--coral-400); }
.fe-badge--success { --_fg: var(--success-500);   --_bg: var(--success-tint);     --_dot: var(--success-500); }
.fe-badge--warning { --_fg: var(--warning-500);   --_bg: var(--warning-tint);     --_dot: var(--warning-500); }
.fe-badge--danger  { --_fg: var(--danger-500);    --_bg: var(--danger-tint);      --_dot: var(--danger-500); }
.fe-badge--info    { --_fg: var(--info-500);       --_bg: var(--info-tint);        --_dot: var(--info-500); }
.fe-badge--solid   { --_fg: var(--text-on-accent); --_bg: var(--accent); border-color: transparent; }

/* ---- Card -------------------------------------------------------------- */
.fe-card {
  --_bg: var(--surface-card); --_bd: var(--border-card);
  background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--edge-highlight); color: var(--text-body);
  font-family: var(--font-sans); overflow: hidden; position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.fe-card--pad-sm  { padding: var(--space-4); }
.fe-card--pad-md  { padding: var(--space-6); }
.fe-card--pad-lg  { padding: var(--space-8); }
.fe-card--pad-none { padding: 0; }

/* ---- ModeSwitch -------------------------------------------------------- */
.fe-mode {
  display: inline-grid; grid-auto-flow: column; gap: 0; position: relative;
  padding: 5px; background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--radius-pill); font-family: var(--font-sans);
  backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md));
  box-shadow: var(--shadow-md), var(--edge-highlight); isolation: isolate;
}
.fe-mode__thumb {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
  border-radius: var(--radius-pill); z-index: 0;
  background: var(--accent); box-shadow: var(--glow-teal);
  transition: transform var(--dur-slow) var(--ease-spring), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.fe-mode__opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; background: none; cursor: pointer; padding: 0 22px; height: var(--control-md);
  font-size: var(--fs-body-sm); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text-secondary);
  transition: color var(--dur-base) var(--ease-out); white-space: nowrap;
  text-decoration: none;
}
.fe-mode__opt:hover { color: var(--text-primary); }
.fe-mode__ico { display: inline-flex; line-height: 0; font-size: 17px; }