/* =====================================================================
   Blog Automation – BUTTON SYSTEM (the one place for buttons; loaded right after app.css, so page styles can still fine-tune)
   Look of the website blog-automation.com: pill shape, 600 weight, navy primary, outlined secondary, the logo gradient only for
   the one "Demo" call to action. Colours only from theme.css tokens – every accent preset, own colour and dark mode follow.

   Kinds (class names are stable – use them, do not invent new ones per page):
     .btn                  secondary (outlined, the default)
     .btn-primary          main action of a form / dialog (accent, solid)
     .btn-gradient         main action of a page (historic name – solid like .btn-primary, no gradient)
     .btn-soft             quiet accent (e.g. "Neu" in the top bar)
     .btn-ghost            no frame (toolbars, table rows, menus)
     .btn-danger           destructive (red text; with .btn-primary: solid red)
     .btn-coral            buy / tokens (brand orange, navy text)
     .btn-brand            logo gradient – at most ONE per screen (sign-in "Demo testen")
   Sizes: .btn-sm (32 px) · default (--ctrl-h, 44 px) · .btn-lg (50 px) · .btn-block (full width) · .btn-icon (square, icon only – needs aria-label)
   States: :hover, :active (pressed 1 px), :focus-visible (2 px ring --ring), :disabled / [aria-disabled="true"] / .is-busy
   Corners: --btn-radius (pill; "Ecken: eckig" in Darstellung gives the normal corner radius)
   ===================================================================== */
:root { --btn-radius: 999px; --btn-border: 1.5px; --btn-pad: 18px; --err-contrast: #ffffff; }
[data-shape="sharp"] { --btn-radius: var(--radius); }
[data-mode="dark"] { --err-contrast: #1b0606; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ctrl-h); padding: 0 var(--btn-pad);
  border-radius: var(--btn-radius); border: var(--btn-border) solid var(--border-strong); background: var(--surface); color: var(--text);
  font: 600 var(--fs-sm)/1 var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; white-space: nowrap; user-select: none;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s, filter .15s; }
.btn:hover { text-decoration: none; }
.btn:not(:disabled):not([aria-disabled="true"]):hover { background: var(--surface-3); border-color: color-mix(in srgb, var(--text) 28%, var(--border-strong)); }
.btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 2px; }
.btn svg, .btn .ico { width: 18px; height: 18px; flex: none; }

/* primary + page main action */
.btn-primary, .btn-gradient { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.btn-primary:not(:disabled):not([aria-disabled="true"]):hover, .btn-gradient:not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--accent-600); border-color: var(--accent-600); color: var(--accent-contrast); filter: none; }

/* soft accent */
.btn-soft { background: var(--accent-50); border-color: transparent; color: var(--accent-700); }
.btn-soft:not(:disabled):not([aria-disabled="true"]):hover { background: var(--accent-100); border-color: transparent; }
[data-mode="dark"] .btn-soft { color: var(--text); }

/* ghost */
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:not(:disabled):not([aria-disabled="true"]):hover { background: var(--surface-3); border-color: transparent; color: var(--text); }

/* danger */
.btn-danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--border)); }
.btn-ghost.btn-danger { border-color: transparent; }
.btn-danger:not(:disabled):not([aria-disabled="true"]):hover { background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 55%, var(--border)); color: var(--err); }
.btn-ghost.btn-danger:not(:disabled):not([aria-disabled="true"]):hover { border-color: transparent; }
.btn-primary.btn-danger { background: var(--err); border-color: var(--err); color: var(--err-contrast); }
.btn-primary.btn-danger:not(:disabled):not([aria-disabled="true"]):hover { background: color-mix(in srgb, var(--err) 86%, black); border-color: transparent; color: var(--err-contrast); }

/* buy / tokens: brand orange with navy text (6:1), in light and dark mode */
.btn-coral { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--brand-navy); }
.btn-coral:not(:disabled):not([aria-disabled="true"]):hover { background: #fd7a2f; border-color: #fd7a2f; color: var(--brand-navy); }

/* logo gradient – one per screen at most (the website's "Demo testen") */
.btn-brand { background: var(--brand-mark-gradient) border-box; border-color: transparent; color: var(--brand-navy);
  box-shadow: 0 14px 30px -16px rgba(232, 24, 12, .55); }
.btn-brand:not(:disabled):not([aria-disabled="true"]):hover { background: var(--brand-mark-gradient) border-box; border-color: transparent; color: var(--brand-navy);
  filter: saturate(1.08) brightness(1.03); box-shadow: 0 18px 34px -16px rgba(232, 24, 12, .6); }

/* sizes */
.btn-sm { height: 32px; padding: 0 12px; gap: 6px; font-size: var(--fs-sm); }
.btn-sm svg, .btn-sm .ico { width: 16px; height: 16px; }
.btn-lg { height: 50px; padding: 0 24px; font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn-icon { width: var(--ctrl-h); padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 50px; }

/* disabled / busy */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; filter: saturate(.6); }
.btn.is-busy { cursor: progress; }

/* links that look like buttons keep the button colour (beats the generic link colours in light + dark mode) */
a.btn, html[data-mode] a.btn { color: var(--text); }
a.btn-primary, a.btn-primary:hover, html[data-mode] a.btn-primary, a.btn-gradient, a.btn-gradient:hover, html[data-mode] a.btn-gradient { color: var(--accent-contrast); }
a.btn-soft, html[data-mode] a.btn-soft { color: var(--accent-700); }
html[data-mode="dark"] a.btn-soft { color: var(--text); }
a.btn-ghost, html[data-mode] a.btn-ghost { color: var(--text-2); }
a.btn-coral, a.btn-coral:hover, html[data-mode] a.btn-coral, a.btn-brand, html[data-mode] a.btn-brand { color: var(--brand-navy); }
a.btn-danger, html[data-mode] a.btn-danger { color: var(--err); }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }