/* ═════════════════════════════════════════════════════════════════
   crmFEX — Shared Design Tokens
   Drop-in stylesheet used by every public surface (landing, app, admin,
   portal) so colours, radii, spacing and primitive components stay in
   sync. Variables are namespaced `--fx-*` to avoid collisions with the
   individual SPAs' existing CSS custom properties.
═════════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --fx-brand:        #e8c84a;
  --fx-brand-soft:   #f0d878;
  --fx-brand-deep:   #c9a92e;

  /* Backgrounds (dark surfaces — match the app's iOS-inspired palette) */
  --fx-bg:           #0d0f13;
  --fx-surface-1:    #15151c;
  --fx-surface-2:    #1e1e28;
  --fx-surface-3:    #2a2a36;
  --fx-surface-4:    #353548;

  /* Borders */
  --fx-border:       #2d2d3e;
  --fx-border-strong:#3a3a52;

  /* Text */
  --fx-text:         #e8e8ef;
  --fx-text-soft:    #a8a8b5;
  --fx-text-muted:   #6a6a78;

  /* Status */
  --fx-success:      #3dd68c;
  --fx-warning:      #e8c84a;
  --fx-danger:       #f05252;
  --fx-info:         #4a9ef5;

  /* Spacing scale (matches an 8px grid w/ half-step) */
  --fx-1: 4px;
  --fx-2: 8px;
  --fx-3: 12px;
  --fx-4: 16px;
  --fx-5: 24px;
  --fx-6: 32px;
  --fx-7: 48px;
  --fx-8: 64px;

  /* Radii — iOS-style, generous */
  --fx-radius-1: 6px;
  --fx-radius-2: 10px;
  --fx-radius-3: 14px;
  --fx-radius-4: 18px;
  --fx-radius-pill: 9999px;

  /* Shadows (soft, macOS-y) */
  --fx-shadow-1: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  --fx-shadow-2: 0 6px 20px rgba(0,0,0,.4),  0 20px 60px rgba(0,0,0,.5);
  --fx-shadow-brand: 0 6px 20px rgba(232,200,74,.35);

  /* Motion */
  --fx-tr-fast:   .15s ease;
  --fx-tr-medium: .25s cubic-bezier(.4,0,.2,1);

  /* Fonts */
  --fx-font-sans:  -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fx-font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* ─── Buttons (one canonical surface API across all SPAs) ──────── */

.fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fx-2);
  padding: 11px 18px;
  font-family: var(--fx-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  border-radius: var(--fx-radius-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--fx-tr-fast), box-shadow var(--fx-tr-fast), background var(--fx-tr-fast), color var(--fx-tr-fast);
  user-select: none;
  white-space: nowrap;
}
.fx-btn:active:not(:disabled) { transform: translateY(1px); }
.fx-btn:disabled              { opacity: .55; cursor: not-allowed; }

.fx-btn-primary {
  background: var(--fx-brand);
  color: #0b0d11;
}
.fx-btn-primary:hover:not(:disabled) {
  background: var(--fx-brand-soft);
  box-shadow: var(--fx-shadow-brand);
}

.fx-btn-secondary {
  background: var(--fx-surface-3);
  color: var(--fx-text);
  border-color: var(--fx-border-strong);
}
.fx-btn-secondary:hover:not(:disabled) {
  background: var(--fx-surface-4);
}

.fx-btn-ghost {
  background: transparent;
  color: var(--fx-text-soft);
}
.fx-btn-ghost:hover:not(:disabled) {
  background: var(--fx-surface-2);
  color: var(--fx-text);
}

.fx-btn-danger {
  background: rgba(240,82,82,.12);
  color: var(--fx-danger);
  border-color: rgba(240,82,82,.4);
}
.fx-btn-danger:hover:not(:disabled) {
  background: rgba(240,82,82,.2);
}

.fx-btn-sm { padding: 7px 12px; font-size: 12px; }
.fx-btn-lg { padding: 14px 22px; font-size: 14px; }
.fx-btn-block { display: flex; width: 100%; }

/* ─── Inputs ─────────────────────────────────────────────────── */

.fx-input,
.fx-textarea,
.fx-select {
  display: block;
  width: 100%;
  background: var(--fx-surface-3);
  border: 1px solid var(--fx-border-strong);
  border-radius: var(--fx-radius-2);
  padding: 11px 14px;
  color: var(--fx-text);
  font-family: var(--fx-font-sans);
  font-size: 13.5px;
  line-height: 1.4;
  outline: none;
  transition: border-color var(--fx-tr-fast), box-shadow var(--fx-tr-fast);
}
.fx-textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.fx-input:focus, .fx-textarea:focus, .fx-select:focus {
  border-color: var(--fx-brand);
  box-shadow: 0 0 0 3px rgba(232,200,74,.18);
}
.fx-input::placeholder, .fx-textarea::placeholder { color: var(--fx-text-muted); }
.fx-field { display: flex; flex-direction: column; gap: var(--fx-2); margin-bottom: var(--fx-3); }
.fx-field label { font-size: 11px; color: var(--fx-text-soft); font-weight: 500; letter-spacing: .3px; text-transform: uppercase; }

/* ─── Cards / surfaces ────────────────────────────────────────── */

.fx-card {
  background: var(--fx-surface-1);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-3);
  padding: var(--fx-5);
}
.fx-card-tight  { padding: var(--fx-4); }
.fx-card-padded { padding: var(--fx-6); }

/* ─── Pills (status badges) ───────────────────────────────────── */

.fx-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--fx-radius-pill);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .02em;
}
.fx-pill-success { background: rgba(61,214,140,.15);  color: var(--fx-success); }
.fx-pill-warning { background: rgba(232,200,74,.15);  color: var(--fx-brand);   }
.fx-pill-danger  { background: rgba(240,82,82,.15);   color: var(--fx-danger);  }
.fx-pill-info    { background: rgba(74,158,245,.15);  color: var(--fx-info);    }
.fx-pill-muted   { background: var(--fx-surface-3);   color: var(--fx-text-muted); }

/* ─── Utility helpers ─────────────────────────────────────────── */

.fx-mono { font-family: var(--fx-font-mono); }
.fx-muted { color: var(--fx-text-muted); }
.fx-hr {
  border: none;
  height: 1px;
  background: var(--fx-border);
  margin: var(--fx-4) 0;
}

/* Focus ring for buttons — keyboard a11y, not visible on mouse click */
.fx-btn:focus-visible,
.fx-input:focus-visible,
.fx-select:focus-visible,
.fx-textarea:focus-visible {
  outline: 2px solid var(--fx-brand);
  outline-offset: 2px;
}