/**
 * Pulsive — Brand Design Tokens + Skeleton Loader
 *
 * Single source of truth for design system.
 * Include in every page: <link rel="stylesheet" href="/assets/css/brand.css">
 *
 * Brand palette extracted from landing.php (pulsive.local/landing.php)
 */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:       #09091a;
  --card:     #111127;
  --card2:    #161632;

  /* Borders */
  --bd:       #1a1a38;
  --bdm:      #282852;

  /* Brand — Primary purple */
  --pr:       #7c3aed;
  --prl:      #a78bfa;
  --prd:      #6d28d9;

  /* Brand — Accent cyan */
  --ac:       #06b6d4;
  --acl:      #22d3ee;

  /* Gradient (135° — purple → cyan) */
  --gd:       linear-gradient(135deg, #7c3aed, #06b6d4);
  --gd-hover: linear-gradient(135deg, #6d28d9, #0891b2);

  /* Text */
  --tx:       #f1f5f9;
  --txs:      #94a3b8;
  --txm:      #475569;

  /* Semantic */
  --ok:       #10b981;
  --warn:     #f59e0b;
  --err:      #e11d48;    /* error only — not brand */
  --err-bg:   #1f0815;
  --err-bd:   rgba(225,29,72,.35);
  --err-tx:   #fda4af;

  /* Input */
  --inp-bg:   #09091a;
  --inp-bd:   #1a1a38;
  --inp-focus:#7c3aed;

  /* Misc */
  --r:        14px;
  --r-sm:     8px;
  --r-lg:     20px;
  --shadow:   0 4px 24px rgba(0,0,0,.45);
  --shadow-pr:0 4px 20px rgba(124,58,237,.28);
}

/* ── Skeleton Loader — content-aware, shimmer left→right at 135° ───────────── */

@keyframes pulsive-shimmer {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(150%); }
}

/* Base skeleton: any element gets the muted bg, overflow hidden */
.sk,
[data-sk] {
  position: relative;
  overflow: hidden;
  background: var(--card2);
  border-radius: var(--r-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

/* The shimmer sweep — moves left to right, gradient at 135° */
.sk::after,
[data-sk]::after {
  content: '';
  position: absolute;
  inset: -50%;           /* oversized so 135° diagonal covers corners */
  background: linear-gradient(
    135deg,
    transparent          20%,
    rgba(255,255,255,.07) 50%,
    transparent          80%
  );
  animation: pulsive-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
}

/* ── Content-aware variants ────────────────────────────────────────────────── */

/* Single text line */
.sk-text {
  height: 14px;
  border-radius: 4px;
  display: block;
}
.sk-text.sm  { height: 11px; }
.sk-text.lg  { height: 18px; }

/* Heading / title */
.sk-title {
  height: 22px;
  border-radius: 5px;
  display: block;
}
.sk-title.lg { height: 30px; }

/* A paragraph block (stacked text lines) */
.sk-para {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sk-para .sk-text:last-child { width: 65%; }

/* Avatar / icon circle */
.sk-avatar {
  border-radius: 50% !important;
  flex-shrink: 0;
}
.sk-avatar.sm  { width: 28px; height: 28px; }
.sk-avatar.md  { width: 40px; height: 40px; }
.sk-avatar.lg  { width: 56px; height: 56px; }

/* Image / thumbnail */
.sk-img {
  border-radius: var(--r-sm);
  width: 100%;
}
.sk-img.sq  { aspect-ratio: 1 / 1; }
.sk-img.wr  { aspect-ratio: 16 / 9; }
.sk-img.th  { aspect-ratio: 16 / 9; height: 60px; }

/* Card */
.sk-card {
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--bd);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Inline badge / chip */
.sk-badge {
  height: 22px;
  width: 72px;
  border-radius: 99px;
  display: inline-block;
}

/* Button-shaped */
.sk-btn {
  height: 40px;
  border-radius: var(--r-sm);
  display: inline-block;
}
.sk-btn.sm { height: 32px; width: 80px; }
.sk-btn.md { height: 40px; width: 120px; }
.sk-btn.lg { height: 48px; width: 160px; }

/* Table row */
.sk-row {
  height: 48px;
  border-radius: 6px;
  margin-bottom: 4px;
}

/* Metric / stat number */
.sk-metric {
  height: 36px;
  width: 80px;
  border-radius: 6px;
  display: block;
}

/* ── Utility: hide real content during loading ─────────────────────────────── */
.loading-state .real-content { display: none; }
.loading-state .sk-content   { display: block; }
.sk-content                  { display: none; }

/* ── Brand button ──────────────────────────────────────────────────────────── */
.btn-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 24px;
  border-radius: var(--r-sm);
  background: var(--gd);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  font-family: inherit;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-pr);
  transition: opacity .2s, box-shadow .2s;
}
.btn-brand:hover  { opacity: .88; box-shadow: 0 6px 28px rgba(124,58,237,.38); }
.btn-brand:active { opacity: .75; }

/* ── Brand input ───────────────────────────────────────────────────────────── */
.inp {
  width: 100%;
  padding: 0 .85rem;
  height: 44px;
  background: var(--inp-bg);
  border: 1px solid var(--inp-bd);
  border-radius: var(--r-sm);
  color: var(--tx);
  font-size: .92rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}
.inp:focus        { border-color: var(--inp-focus); }
.inp.error        { border-color: var(--err); }