/* Brand */
--violet: #9B5DE5;
--cyan:   #06D6E0;
--green:  #06D664;
--pink:   #F15BB5;
--amber:  #FFB347;

/* Semantic */
--success: var(--green);
--warning: var(--amber);
--danger:  var(--pink);
--info:    var(--cyan);Copy

--text-xs:   0.72rem;   /* 11.5px */
--text-sm:   0.82rem;   /* 13px   */
--text-base: 0.92rem;   /* 14.7px */
--text-md:   1.02rem;   /* 16.3px */
--text-lg:   1.18rem;   /* 18.9px */
--text-xl:   1.5rem;    /* 24px   */
--text-2xl:  2rem;      /* 32px   */
--text-3xl:  2.6rem;    /* 41.6px */

--fw-regular:   400;
--fw-medium:    500;
--fw-semibold:  600;
--fw-bold:      700;
--fw-extrabold: 800;Copy

--space-1:  4px;
--space-2:  8px;
--space-3:  12px;
--space-4:  16px;
--space-5:  20px;
--space-6:  24px;
--space-8:  32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;Copy

--r-xs:   4px;
--r-sm:   8px;
--r-md:   12px;
--r-lg:   20px;
--r-xl:   24px;
--r-pill: 999px;Copy

--shadow:   0 2px 8px rgba(15,23,42,0.08), 0 8px 40px rgba(15,23,42,0.10);
--shadow-h: 0 4px 16px rgba(15,23,42,0.12), 0 16px 56px rgba(15,23,42,0.13);Copy

--blur: blur(20px);

/* Usage */
.glass-panel {
  background: rgba(238,242,255,0.55);
  backdrop-filter: var(--blur);
  border: 1.5px solid rgba(255,255,255,0.4);
}Copy

<button class="btn-primary">Primary</button>
<button class="btn-ghost">Ghost</button>
<button class="btn-danger">Danger</button>
<button class="icon-btn" aria-label="Settings">
  <i data-lucide="settings"></i>
</button>Copy

<input class="form-input" type="text" placeholder="Enter value...">
<input class="form-input error" type="text">
<select class="form-input">...</select>
<textarea class="form-input" rows="3"></textarea>Copy

<span class="badge badge-violet">Учитель</span>
<span class="badge badge-cyan">Активен</span>
<span class="badge badge-green">Завершено</span>
<span class="badge badge-pink">Новый</span>
<span class="badge badge-amber">Ученик</span>Copy

<button class="chip active">All subjects</button>
<button class="chip">Mathematics
  <span class="chip-x" aria-label="Remove">...</span>
</button>Copy

<div class="ds-surface-card">...</div>

<!-- glass: wrap in gradient div, then -->
<div style="backdrop-filter:var(--blur);background:rgba(255,255,255,0.35)">...</div>

<!-- top-bar: ::before height:3px; background: gradient -->Copy

const m = LS.modal({
  title: 'Modal title',
  content: '<p>Body content here</p>',
  size: 'md',   // 'sm' | 'md' | 'lg'
  actions: [
    { label: 'Cancel',  onClick: () => m.close() },
    { label: 'Confirm', primary: true, onClick: async () => { ... } },
  ],
});Copy

LS.toast('Action completed!', 'success');
LS.toast('Review your input.',  'warn');
LS.toast('An error occurred.',  'error');
LS.toast('Session saved.',      'info');Copy

<!-- Neutral shimmer -->
<div class="ls-skeleton ls-skeleton-line"></div>

<!-- Violet shimmer (existing) -->
<div class="ls-sk" style="height:36px"></div>Copy

<div class="rich-empty">
  <div class="rich-empty-svg"><!-- Lucide icon --></div>
  <div class="rich-empty-title">No data yet</div>
  <div class="rich-empty-sub">Description text</div>
  <button class="rich-empty-btn">Action</button>
</div>Copy

function avatarColor(name) {
  let h = 0;
  for (const c of name) h = (h * 31 + c.charCodeAt(0)) % 360;
  return `hsl(${h}, 60%, 48%)`;
}
// initials
const initials = name.split(' ').slice(0,2).map(w=>w[0]).join('').toUpperCase();Copy

<div class="stat-card vc">
  <div class="stat-label">Total sessions</div>
  <div class="stat-val">1,248</div>
  <div class="stat-delta">+12% this week</div>
</div>
/* .vc = violet-cyan bar, .gc = green-cyan, .ac = amber-pink */Copy

<div class="ds-table-wrap">
  <table class="ds-table">
    <thead><tr><th>Name</th>...</tr></thead>
    <tbody>
      <tr>
        <td>Anna K.</td>...
        <td><div class="row-actions">...</div></td>
      </tr>
    </tbody>
  </table>
</div>Copy

<div class="search-bar">
  <div class="search-wrap">
    <!-- Lucide search icon -->
    <input class="form-input" type="search" placeholder="Search...">
  </div>
  <button class="chip active">All</button>
  <button class="chip">Active</button>
</div>Copy

<a class="sb-link active" href="/dashboard">
  <span class="sb-icon"><i data-lucide="layout-dashboard"></i></span>
  <span class="sb-lbl">Dashboard</span>
</a>
<a class="sb-link" href="/students">
  <span class="sb-icon"><i data-lucide="users"></i></span>
  <span class="sb-lbl">Students</span>
  <span class="sb-badge">3</span>
</a>Copy

<div class="ds-tabs">
  <button class="ds-tab active">Overview</button>
  <button class="ds-tab">Sessions</button>
  <button class="ds-tab">Students</button>
</div>Copy

<div class="bento">
  <div class="bento-cell wide">Span 2 cols</div>
  <div class="bento-cell tall">Span 2 rows</div>
  <div class="bento-cell">Normal</div>
  <div class="bento-cell">Normal</div>
</div>Copy

--ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 0.12s;
--duration-base: 0.22s;
--duration-slow: 0.40s;

/* Usage */
.card { transition: transform var(--duration-base) var(--ease-spring); }
.card:hover { transform: translateY(-6px) scale(1.02); }

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}Copy

<!-- Include once in <head> -->
<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>

<!-- Use icon -->
<i data-lucide="users" style="width:18px;height:18px"></i>

<!-- Initialize (call once after DOM) -->
<script>lucide.createIcons();</script>Copy