/*
 * Designloop button. Single source for the landing page and the portal:
 * - the landing loads it from public/index.html,
 * - the portal imports it in src/app/globals.css (components layer) and uses it through src/components/ui/button.tsx.
 * Only uses tokens defined on both surfaces (--ink, --paper, --line…). Documented in the design system: Components › Button.
 */
.button {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-border: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--btn-border); border-radius: 12px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease, transform 180ms cubic-bezier(.16, 1, .3, 1);
}
.button:hover { --btn-bg: var(--ink-hover); --btn-border: var(--ink-hover); }
.button:active { transform: scale(.98); }
.button:disabled, .button[aria-disabled='true'] { opacity: .5; pointer-events: none; }
.button svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Variants. Each :hover comes after .button:hover so it wins. */
.button-outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--line-strong); }
.button-outline:hover { --btn-bg: var(--paper-2); --btn-border: var(--line-strong); }
.button-ghost { --btn-bg: transparent; --btn-fg: var(--ink-2); --btn-border: transparent; }
.button-ghost:hover { --btn-bg: var(--paper-2); --btn-fg: var(--ink); --btn-border: transparent; }
.button-subtle { --btn-bg: var(--card); --btn-fg: var(--ink); --btn-border: var(--line); }
.button-subtle:hover { --btn-bg: var(--paper-2); --btn-border: var(--line-strong); }
.button-danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-border: var(--danger); }
.button-danger:hover { --btn-bg: var(--danger); --btn-border: var(--danger); opacity: .9; }
.button-light { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-border: var(--paper); }
.button-light:hover { --btn-bg: #fff; --btn-border: #fff; }

/* Size and width. */
.button-small { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.button-block { width: 100%; }