/*
 * SalvageFlow Design System — CSS Custom Properties
 * --------------------------------------------------
 * Single source of truth for all design tokens.
 * Loaded in base.html before Tailwind's compiled output.
 *
 * Marketing site uses dark tokens (sf-bg, sf-panel, etc.).
 * App UI uses light workspace tokens defined here.
 * Accent teal is shared between both surfaces.
 */

:root {

  /* ── Typography ─────────────────────────────────────────────── */
  --sf-font-ui:   "Inter", system-ui, -apple-system, sans-serif;
  --sf-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ── Accent (shared with marketing site) ────────────────────── */
  --sf-accent:        #27E0D7;
  --sf-accent-hover:  #1ED6CE;
  --sf-accent-active: #12A8A1;
  --sf-accent-dim:    rgba(39, 224, 215, 0.10);
  --sf-accent-ring:   rgba(39, 224, 215, 0.20);

  /* ── Light workspace palette ────────────────────────────────── */
  --sf-bg-app:         #F6F8FA;   /* page background             */
  --sf-bg-card:        #FFFFFF;   /* card / panel surface        */
  --sf-bg-subtle:      #F0F3F6;   /* table header, chip bg       */

  --sf-text-primary:   #0B1216;   /* primary text                */
  --sf-text-muted:     #6B7680;   /* secondary / helper text     */
  --sf-text-faint:     #9BA6AF;   /* placeholder, disabled       */

  --sf-border-subtle:  #E3E8EC;   /* default border              */
  --sf-border-medium:  #CBD2D9;   /* stronger divider            */

  /* ── Spacing scale ──────────────────────────────────────────── */
  --sf-space-xs:  6px;
  --sf-space-sm:  10px;
  --sf-space-md:  16px;
  --sf-space-lg:  24px;
  --sf-space-xl:  32px;
  --sf-space-2xl: 48px;

  /* ── Radii ──────────────────────────────────────────────────── */
  --sf-radius-sm:  4px;
  --sf-radius:     6px;
  --sf-radius-md:  8px;
  --sf-radius-lg:  10px;
  --sf-radius-xl:  14px;

  /* ── Motion (app UI stays calm) ─────────────────────────────── */
  --sf-ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --sf-duration-fast: 120ms;
  --sf-duration:      180ms;

  /* ── Shadows ────────────────────────────────────────────────── */
  --sf-shadow-sm:  0 1px 2px 0 rgba(11, 18, 22, 0.06);
  --sf-shadow:     0 2px 8px 0 rgba(11, 18, 22, 0.08);
  --sf-shadow-md:  0 4px 16px 0 rgba(11, 18, 22, 0.10);

  /* ── Semantic status colors ─────────────────────────────────── */
  --sf-success:       #10B981;
  --sf-success-bg:    #ECFDF5;
  --sf-success-border:#A7F3D0;

  --sf-warning:       #F59E0B;
  --sf-warning-bg:    #FFFBEB;
  --sf-warning-border:#FDE68A;

  --sf-danger:        #EF4444;
  --sf-danger-bg:     #FEF2F2;
  --sf-danger-border: #FECACA;

  --sf-info:          #3B82F6;
  --sf-info-bg:       #EFF6FF;
  --sf-info-border:   #BFDBFE;
}

/* =============================================================
 * COMPATIBILITY SHIMS
 * Maps legacy class names → design-system tokens.
 * Lets existing templates work without a rewrite.
 * Migrate templates to sf-* classes over time.
 * ============================================================= */

/* ── Color utilities ─────────────────────────────────────────── */
.text-surface-800  { color: var(--sf-text-primary) !important; }
.text-surface-700  { color: #2D3B45 !important; }
.text-surface-600  { color: #404D57 !important; }
.text-surface-500  { color: var(--sf-text-muted) !important; }
.text-surface-400  { color: var(--sf-text-faint) !important; }
.text-surface-300  { color: #B8C4CC !important; }
.text-brand-600    { color: var(--sf-accent-active) !important; }
.text-brand-700    { color: var(--sf-accent-active) !important; }
.text-brand-800    { color: var(--sf-accent-active) !important; }
.bg-surface-50     { background-color: var(--sf-bg-app) !important; }
.bg-surface-100    { background-color: var(--sf-bg-subtle) !important; }
.bg-surface-200    { background-color: #E3E8EC !important; }
.border-surface-100 { border-color: var(--sf-border-subtle) !important; }
.border-surface-200 { border-color: var(--sf-border-subtle) !important; }
.border-surface-300 { border-color: var(--sf-border-medium) !important; }
.bg-brand-50       { background-color: var(--sf-accent-dim) !important; }
.bg-brand-100      { background-color: rgba(39,224,215,0.15) !important; }
.border-brand-200  { border-color: rgba(39,224,215,0.30) !important; }
.border-brand-300  { border-color: rgba(39,224,215,0.50) !important; }
.bg-brand-500, .bg-brand-600 { background-color: #0B1216 !important; }
.hover\:border-brand-300:hover { border-color: rgba(39,224,215,0.50) !important; }
.hover\:bg-brand-50\/50:hover  { background-color: rgba(39,224,215,0.08) !important; }
.hover\:bg-brand-100:hover     { background-color: rgba(39,224,215,0.15) !important; }
.group:hover .group-hover\:text-brand-500 { color: var(--sf-accent-active) !important; }
.group:hover .group-hover\:text-brand-700 { color: var(--sf-accent-active) !important; }
.divide-surface-100 > * + * { border-color: var(--sf-border-subtle) !important; }

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: var(--sf-bg-card);
  border: 1px solid var(--sf-border-subtle);
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-shadow-sm);
}
.card-body {
  padding: 1.25rem;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.4;
  border-radius: var(--sf-radius);
  background: #0B1216; color: #ffffff;
  border: 1px solid #0B1216;
  cursor: pointer; text-decoration: none;
  transition: background var(--sf-duration-fast), border-color var(--sf-duration-fast);
  white-space: nowrap;
}
.btn-primary:hover  { background: #1a2832; border-color: #1a2832; }
.btn-primary:active { background: #0f1e26; }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-size: 0.8125rem; font-weight: 500;
  border-radius: var(--sf-radius);
  background: white; color: var(--sf-text-primary);
  border: 1px solid var(--sf-border-medium);
  cursor: pointer; text-decoration: none;
  transition: border-color var(--sf-duration-fast);
}
.btn-secondary:hover { border-color: var(--sf-accent); }
.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-size: 0.8125rem; font-weight: 500;
  border-radius: var(--sf-radius);
  background: var(--sf-danger-bg); color: #b91c1c;
  border: 1px solid var(--sf-danger-border);
  cursor: pointer; text-decoration: none;
}
.btn-sm { padding: 5px 10px; font-size: 0.75rem; }
.btn-lg { padding: 10px 20px; font-size: 0.9375rem; }

/* ── Form controls ───────────────────────────────────────────── */
.form-label, label.form-label {
  display: block;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--sf-text-primary);
  margin-bottom: 4px;
}
.form-input, .form-select, .form-textarea,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
select.form-control, textarea.form-control {
  display: block; width: 100%;
  padding: 7px 10px;
  font-size: 0.875rem;
  background: white;
  border: 1px solid var(--sf-border-medium);
  border-radius: var(--sf-radius);
  color: var(--sf-text-primary);
  transition: border-color var(--sf-duration-fast), box-shadow var(--sf-duration-fast);
  appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
input[type="text"].form-control:focus,
select.form-control:focus {
  outline: none;
  border-color: var(--sf-accent);
  box-shadow: 0 0 0 3px var(--sf-accent-ring);
}
.form-hint, .form-help { font-size: 0.75rem; color: var(--sf-text-muted); margin-top: 3px; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 0.6875rem; font-weight: 500; line-height: 1.4;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-draft     { background: #F0F3F6; color: #6B7680; border-color: #E3E8EC; }
.badge-published { background: #ECFDF5; color: #059669; border-color: #A7F3D0; }
.badge-sold      { background: #EFF6FF; color: #3B82F6; border-color: #BFDBFE; }
.badge-archived  { background: #F0F3F6; color: #9BA6AF; border-color: #E3E8EC; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert-success, .alert-info, .alert-error, .alert-warning {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  border-radius: var(--sf-radius);
  border: 1px solid transparent;
  font-size: 0.875rem;
}
.alert-success { background: var(--sf-success-bg); border-color: var(--sf-success-border); color: #065f46; }
.alert-warning { background: var(--sf-warning-bg); border-color: var(--sf-warning-border); color: #78350f; }
.alert-error   { background: var(--sf-danger-bg);  border-color: var(--sf-danger-border);  color: #991b1b; }
.alert-info    { background: var(--sf-info-bg);    border-color: var(--sf-info-border);    color: #1e40af; }

/* ── Page background ─────────────────────────────────────────── */
body { background-color: var(--sf-bg-app); }