/*
 * Supliful Brandkit — Button & Card
 * Generated from the dashboard Chakra theme by scripts/export-brandkit.mjs
 * Do not edit by hand; regenerate instead.
 *
 * Usage:
 *   <button class="sf-btn sf-btn--primary">Order products</button>
 *   <button class="sf-btn sf-btn--outline sf-btn--sm">Cancel</button>
 *   <div class="sf-card">…</div>
 *
 * Dark mode: add class "dark" to <html> (matches the dashboard convention).
 */

:root {
  /* Brand action colors */
  --sf-btn-primary-bg: #218968;
  --sf-btn-primary-bg-hover: #2AAE73;
  --sf-btn-secondary-bg: #18181b;
  --sf-btn-secondary-bg-hover: #27272a;
  --sf-btn-danger-bg: #dc2626;
  --sf-btn-danger-bg-hover: #b91c1c;
  --sf-focus-ring: #2aae73;

  /* Shadows */
  --sf-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
  --sf-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Card surface */
  --sf-card-bg: #FFFFFF;
  --sf-card-border: #e4e4e7;
  --sf-card-radius: 1rem;
}

/* ============================== Button ==============================
 * Pill-shaped button (border-radius: 9999px). Medium font weight, 0.2s all transition, emerald focus ring (2px, 2px offset). Disabled: 50% opacity, no pointer events. Default variant: primary; default size: md.
 */
.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-family: inherit;
  border: none;
  border-radius: 9999px; /* pill */
  transition: all 0.2s;
  cursor: pointer;
  user-select: none;
  outline: none;
  /* size: md (default) */
  height: 3rem;
  padding: 0 1.5rem;
  font-size: 1rem;
  gap: 0.5rem;
}
.sf-btn:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sf-focus-ring); /* 2px ring, 2px offset */
}
.sf-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.sf-btn--sm { height: 2rem; padding: 0 0.75rem; font-size: 0.875rem; gap: 0.5rem; } /* Compact contexts: table rows, cards, toolbars. */
.sf-btn--lg { height: 3.5rem; padding: 0 2rem; font-size: 1.125rem; gap: 0.75rem; } /* Hero/marketing moments and large empty states. */

/* Main call-to-action. Brand emerald (dark shade #218968), white text. Use once per view for the dominant action ("Order products", "Publish"). */
.sf-btn--primary {
  background: var(--sf-btn-primary-bg);
  color: #FFFFFF;
  box-shadow: var(--sf-shadow-soft);
}
.sf-btn--primary:hover { background: var(--sf-btn-primary-bg-hover); box-shadow: var(--sf-shadow-medium); }
.sf-btn--primary:active { background: #218968; }

/* High-emphasis alternative to primary. Near-black background, white text. Use for strong actions that are not the brand CTA. */
.sf-btn--secondary {
  background: var(--sf-btn-secondary-bg);
  color: #FFFFFF;
  box-shadow: var(--sf-shadow-soft);
}
.sf-btn--secondary:hover { background: var(--sf-btn-secondary-bg-hover); box-shadow: var(--sf-shadow-medium); }
.sf-btn--secondary:active { background: #3f3f46; }

/* Medium emphasis. Transparent with 2px gray border. Use for secondary actions alongside a primary button. */
.sf-btn--outline {
  background: transparent;
  color: #3f3f46;
  border: 2px solid #e4e4e7;
}
.sf-btn--outline:hover { background: #fafafa; border-color: #d4d4d8; }
.sf-btn--outline:active { background: #f4f4f5; }

/* Low emphasis. Transparent, no border; gray text with subtle hover fill. Use for tertiary/inline actions and icon buttons. */
.sf-btn--ghost {
  background: transparent;
  color: #3f3f46;
}
.sf-btn--ghost:hover { background: #f4f4f5; }
.sf-btn--ghost:active { background: #e4e4e7; }

/* Destructive actions (delete, remove, disconnect). Red background, white text. Pair with a confirmation step. */
.sf-btn--danger {
  background: var(--sf-btn-danger-bg);
  color: #FFFFFF;
  box-shadow: var(--sf-shadow-soft);
}
.sf-btn--danger:hover { background: var(--sf-btn-danger-bg-hover); box-shadow: var(--sf-shadow-medium); }
.sf-btn--danger:active { background: #991b1b; }

/* Dark mode */
.dark .sf-btn--primary { background: #2AAE73; }
.dark .sf-btn--primary:hover { background: #6BC78A; }
.dark .sf-btn--primary:active { background: #218968; }
.dark .sf-btn--secondary { background: #f4f4f5; color: #18181b; }
.dark .sf-btn--secondary:hover { background: #e4e4e7; }
.dark .sf-btn--secondary:active { background: #d4d4d8; }
.dark .sf-btn--outline { color: #d4d4d8; border-color: #2a2a2a; }
.dark .sf-btn--outline:hover { background: #262626; border-color: #404040; }
.dark .sf-btn--outline:active { background: #333333; }
.dark .sf-btn--ghost { color: #d4d4d8; }
.dark .sf-btn--ghost:hover { background: #262626; }
.dark .sf-btn--ghost:active { background: #333333; }
.dark .sf-btn--danger { background: #dc2626; }
.dark .sf-btn--danger:hover { background: #ef4444; }
.dark .sf-btn--danger:active { background: #b91c1c; }

/* =============================== Card ===============================
 * Content container. White surface, 1px gray border, 16px radius, small resting shadow that lifts on hover (0.2s). Dark mode: #1a1a1a surface, #2a2a2a border, no shadow — hover brightens the border instead. Cards in the dashboard are typically borderless white on the gray page background; this recipe is the bordered variant for standalone use.
 */
.sf-card {
  background: var(--sf-card-bg);
  border: 1px solid var(--sf-card-border);
  border-radius: var(--sf-card-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.sf-card:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.dark .sf-card { background: #1a1a1a; border-color: #2a2a2a; box-shadow: none; }
.dark .sf-card:hover { border-color: #404040; }