/*
 * Supliful Brandkit — Button & Card (SCSS)
 * Generated from the dashboard Chakra theme by scripts/export-brandkit.mjs
 * Do not edit by hand; regenerate instead.
 *
 * Usage:
 *   .my-cta    { @include sf-button(primary, lg); }
 *   .my-cancel { @include sf-button(outline); }
 *   .my-panel  { @include sf-card; }
 */

// ----- Action colors ---------------------------------------------------
$sf-btn-primary-bg: #218968;          // Brand emerald — primary CTA
$sf-btn-primary-bg-hover: #2AAE73;
$sf-btn-primary-bg-active: #218968;
$sf-btn-secondary-bg: #18181b;        // Near-black — strong secondary
$sf-btn-secondary-bg-hover: #27272a;
$sf-btn-secondary-bg-active: #3f3f46;
$sf-btn-outline-color: #3f3f46;
$sf-btn-outline-border: #e4e4e7;
$sf-btn-danger-bg: #dc2626;          // Destructive actions
$sf-btn-danger-bg-hover: #b91c1c;
$sf-btn-danger-bg-active: #991b1b;
$sf-focus-ring: #2aae73;          // Emerald focus ring

// ----- 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 -------------------------------------------------------------
$sf-card-bg: #FFFFFF;
$sf-card-border: #e4e4e7;
$sf-card-radius: 1rem; // 16px
$sf-card-bg-dark: #1a1a1a;
$sf-card-border-dark: #2a2a2a;

// ----- Button sizes: (height, padding-x, font-size, gap) ----------------
$sf-btn-sizes: (
  sm: (2rem, 0.75rem, 0.875rem, 0.5rem),  // Compact contexts: table rows, cards, toolbars.
  md: (3rem, 1.5rem, 1rem, 0.5rem),        // Default. Page-level actions and forms.
  lg: (3.5rem, 2rem, 1.125rem, 0.75rem),    // Hero/marketing moments and large empty states.
);

// Pill-shaped button. Variants: primary | secondary | outline | ghost | danger
@mixin sf-button($variant: primary, $size: md) {
  $sz: map-get($sf-btn-sizes, $size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-family: inherit;
  border: none;
  border-radius: 9999px;
  transition: all 0.2s;
  cursor: pointer;
  user-select: none;
  outline: none;
  height: nth($sz, 1);
  padding: 0 nth($sz, 2);
  font-size: nth($sz, 3);
  gap: nth($sz, 4);

  &:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px $sf-focus-ring;
  }
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  @if $variant == primary {
    background: $sf-btn-primary-bg;
    color: #fff;
    box-shadow: $sf-shadow-soft;
    &:hover { background: $sf-btn-primary-bg-hover; box-shadow: $sf-shadow-medium; }
    &:active { background: $sf-btn-primary-bg-active; }
  } @else if $variant == secondary {
    background: $sf-btn-secondary-bg;
    color: #fff;
    box-shadow: $sf-shadow-soft;
    &:hover { background: $sf-btn-secondary-bg-hover; box-shadow: $sf-shadow-medium; }
    &:active { background: $sf-btn-secondary-bg-active; }
  } @else if $variant == outline {
    background: transparent;
    color: $sf-btn-outline-color;
    border: 2px solid $sf-btn-outline-border;
    &:hover { background: #fafafa; border-color: #d4d4d8; }
    &:active { background: #f4f4f5; }
  } @else if $variant == ghost {
    background: transparent;
    color: #3f3f46;
    &:hover { background: #f4f4f5; }
    &:active { background: #e4e4e7; }
  } @else if $variant == danger {
    background: $sf-btn-danger-bg;
    color: #fff;
    box-shadow: $sf-shadow-soft;
    &:hover { background: $sf-btn-danger-bg-hover; box-shadow: $sf-shadow-medium; }
    &:active { background: $sf-btn-danger-bg-active; }
  }
}

// Content container: white surface, 1px border, 16px radius, hover lift.
@mixin sf-card {
  background: $sf-card-bg;
  border: 1px solid $sf-card-border;
  border-radius: $sf-card-radius;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s, border-color 0.2s;
  &:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
}