/* ============================================================================
   LINKDSYS BRAND SYSTEM — v2 (2026 revamp)
   Modern light SaaS design tokens shared across public site, dashboard, admin.
   Palette: Indigo #4F46E5 → Cyan #06B6D4 gradient on white/slate surfaces.
   Fonts: Plus Jakarta Sans (display) + Inter (body).
   ============================================================================ */

:root {
  /* Core palette */
  --bs-primary: #4F46E5;
  --bs-primary-600: #4338CA;
  --bs-primary-soft: #EEF2FF;
  --bs-accent: #06B6D4;
  --bs-accent-soft: #ECFEFF;
  --bs-gradient: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
  --bs-gradient-text: linear-gradient(110deg, #4F46E5 10%, #0891B2 90%);

  /* Surfaces */
  --bs-bg: #FFFFFF;
  --bs-bg-alt: #F8FAFC;
  --bs-bg-deep: #F1F5F9;
  --bs-surface: #FFFFFF;
  --bs-border: #E2E8F0;
  --bs-border-soft: #EEF2F7;

  /* Text */
  --bs-text: #0F172A;
  --bs-text-2: #475569;
  --bs-text-3: #94A3B8;

  /* Status */
  --bs-success: #10B981;
  --bs-success-soft: #ECFDF5;
  --bs-warning: #F59E0B;
  --bs-warning-soft: #FFFBEB;
  --bs-danger: #E11D48;
  --bs-danger-soft: #FFF1F2;

  /* Dark panel (sidebar / footer) */
  --bs-ink: #0F1226;
  --bs-ink-2: #161A38;
  --bs-ink-border: rgba(255, 255, 255, 0.08);
  --bs-ink-text: #C7CCE8;

  /* Shape & depth */
  --bs-radius-lg: 20px;
  --bs-radius: 14px;
  --bs-radius-sm: 10px;
  --bs-radius-xs: 8px;
  --bs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --bs-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
  --bs-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
  --bs-shadow-brand: 0 8px 24px rgba(79, 70, 229, 0.28);

  /* Type */
  --bs-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bs-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---- Shared atoms (prefix bs-) -------------------------------------- */

.bs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--bs-font-body); font-size: 15px; font-weight: 600;
  line-height: 1; cursor: pointer; text-decoration: none;
  transition: all .18s ease;
}
.bs-btn--primary { background: var(--bs-gradient); color: #fff; box-shadow: var(--bs-shadow-brand); }
.bs-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.bs-btn--ghost { background: transparent; color: var(--bs-text-2); }
.bs-btn--ghost:hover { color: var(--bs-text); background: var(--bs-bg-deep); }
.bs-btn--outline { background: #fff; color: var(--bs-text); border-color: var(--bs-border); box-shadow: var(--bs-shadow-sm); }
.bs-btn--outline:hover { border-color: var(--bs-primary); color: var(--bs-primary); }

.bs-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.4;
}
.bs-badge--free { background: var(--bs-success-soft); color: #047857; border: 1px solid #A7F3D0; }
.bs-badge--soon { background: var(--bs-warning-soft); color: #B45309; border: 1px solid #FDE68A; }
.bs-badge--new  { background: var(--bs-primary-soft); color: var(--bs-primary); border: 1px solid #C7D2FE; }

.bs-gradient-text {
  background: var(--bs-gradient-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.bs-card {
  background: var(--bs-surface); border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius); box-shadow: var(--bs-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.bs-card:hover { box-shadow: var(--bs-shadow); border-color: #C7D2FE; }