feat(ui-kit): design tokens + StatCard + button variants (foundation)

Add accent (orange) + pastel stat-card tokens (light/dark), button
accent/outline/lg/block variants, and a pastel StatCard primitive,
aligning the admin design system with the clinic-pro-tauri reference.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

assets/admin/components/ui/StatCard.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+type StatTone = 'amber' | 'violet' | 'green' | 'pink';
+
+const TONE: Record<StatTone, { bg: string; fg: string }> = {
+  amber:  { bg: 'var(--stat-amber-bg)',  fg: 'var(--stat-amber-fg)' },
+  violet: { bg: 'var(--stat-violet-bg)', fg: 'var(--stat-violet-fg)' },
+  green:  { bg: 'var(--stat-green-bg)',  fg: 'var(--stat-green-fg)' },
+  pink:   { bg: 'var(--stat-pink-bg)',   fg: 'var(--stat-pink-fg)' },
+};
+
+interface Props {
+  tone: StatTone;
+  label: string;
+  value: React.ReactNode;
+  icon?: React.ReactNode;
+}
+
+export default function StatCard({ tone, label, value, icon }: Props) {
+  const c = TONE[tone];
+  return (
+    <div
+      style={{
+        background: c.bg,
+        borderRadius: 'var(--r-lg)',
+        padding: '18px 20px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 14,
+      }}
+    >
+      {icon && (
+        <div
+          style={{
+            width: 44, height: 44, borderRadius: 12, flexShrink: 0,
+            background: c.fg, color: '#fff',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}
+        >
+          {icon}
+        </div>
+      )}
+      <div style={{ flex: 1, minWidth: 0, textAlign: 'right' }}>
+        <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--text)' }}>{value}</div>
+        <div style={{ fontSize: 12.5, color: 'var(--text-2)', marginTop: 3 }}>{label}</div>
+      </div>
+    </div>
+  );
+}

assets/admin/styles.css

@@ -43,6 +43,15 @@
   --info-bg:       #e7f1fb;
   --violet:        #7c5cf0;
   --violet-bg:     #efeafe;
+  /* accent (نارنجی tauri) برای CTAهای ثانویه و آواتارها */
+  --accent:        #f0682a;
+  --accent-600:    #db5a1f;
+  --accent-bg:     #fdeee4;
+  /* رنگ‌های پاستلی stat-cards داشبورد (هم‌خوان با tauri) */
+  --stat-amber-bg:  #fdf0e3;  --stat-amber-fg:  #e08a1e;
+  --stat-violet-bg: #efeefb;  --stat-violet-fg: #6d5cf0;
+  --stat-green-bg:  #e7f6ef;  --stat-green-fg:  #16a35a;
+  --stat-pink-bg:   #fdeee9;  --stat-pink-fg:   #f0682a;
   --ring:          color-mix(in oklch, var(--primary) 32%, transparent);
   --shadow-sm:  0 1px 2px rgba(15,27,46,.06), 0 1px 3px rgba(15,27,46,.05);
   --shadow:     0 2px 6px rgba(15,27,46,.06), 0 8px 24px rgba(15,27,46,.06);
@@ -84,6 +93,13 @@
   --danger-bg:     color-mix(in oklch, var(--danger) 18%, var(--surface));
   --info-bg:       color-mix(in oklch, var(--info) 18%, var(--surface));
   --violet-bg:     color-mix(in oklch, var(--violet) 20%, var(--surface));
+  --accent:        #f0763d;
+  --accent-600:    #e0651f;
+  --accent-bg:     color-mix(in oklch, var(--accent) 18%, var(--surface));
+  --stat-amber-bg:  color-mix(in oklch, var(--warning) 16%, var(--surface)); --stat-amber-fg:  var(--warning);
+  --stat-violet-bg: color-mix(in oklch, var(--violet)  18%, var(--surface)); --stat-violet-fg: var(--violet);
+  --stat-green-bg:  color-mix(in oklch, var(--success) 16%, var(--surface)); --stat-green-fg:  var(--success);
+  --stat-pink-bg:   color-mix(in oklch, var(--accent)  16%, var(--surface)); --stat-pink-fg:   var(--accent);
   --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
   --shadow:     0 2px 8px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.35);
   --shadow-lg:  0 18px 44px rgba(0,0,0,.55);
@@ -467,7 +483,13 @@ body {
 .btn.soft:hover { background: var(--primary-soft2); }
 .btn.danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
 .btn.danger:hover { filter: brightness(.97); }
+.btn.accent { background: var(--accent); color: #fff; box-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 35%, transparent); }
+.btn.accent:hover { background: var(--accent-600); }
+.btn.outline { background: transparent; border-color: var(--primary); color: var(--primary); }
+.btn.outline:hover { background: var(--primary-soft); }
 .btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }
+.btn.lg { height: 48px; padding: 0 24px; font-size: 15px; }
+.btn.block { width: 100%; }
 .btn:disabled { opacity: .5; cursor: not-allowed; }
 
 /* ── Tables ──────────────────────────────────────────────────── */