/**
 * Mochilab Design Tokens（3 SaaS 共通 — Listoria / StoreSync / Buzzvid）
 *
 * 使い方:
 *   <link rel="stylesheet" href="https://static.hub-sys.com/css/mochilab-tokens.css">
 *   各 SaaS は :root { --ml-accent: ... } を override してブランド色を変える。
 */

/* ── Inter（self-host） ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://static.hub-sys.com/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://static.hub-sys.com/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://static.hub-sys.com/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://static.hub-sys.com/fonts/inter-700.woff2') format('woff2');
}

:root {
  /* ── brand（SaaS 側で override） ── */
  --ml-accent: #4dabf7;
  --ml-accent-soft: rgba(77, 171, 247, 0.12);
  --ml-accent-fg: #fff;          /* accent 上の文字色 */

  /* ── neutrals（slate scale） ── */
  --ml-bg: #f8fafc;
  --ml-surface: #ffffff;
  --ml-surface-2: #f1f5f9;
  --ml-border: #e2e8f0;
  --ml-border-strong: #cbd5e1;
  --ml-text: #0f172a;
  --ml-text-2: #475569;
  --ml-muted: #94a3b8;

  /* ── semantic ── */
  --ml-success: #16a34a;
  --ml-success-soft: #dcfce7;
  --ml-warning: #d97706;
  --ml-warning-soft: #fef3c7;
  --ml-danger: #dc2626;
  --ml-danger-soft: #fee2e2;
  --ml-info: #2563eb;
  --ml-info-soft: #dbeafe;

  /* ── typography ── */
  --ml-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --ml-fs-xs: 11px;
  --ml-fs-sm: 12.5px;
  --ml-fs-base: 14px;
  --ml-fs-md: 16px;
  --ml-fs-lg: 20px;
  --ml-fs-xl: 28px;
  --ml-fs-2xl: 36px;

  /* ── spacing（8px grid） ── */
  --ml-sp-1: 4px;
  --ml-sp-2: 8px;
  --ml-sp-3: 12px;
  --ml-sp-4: 16px;
  --ml-sp-5: 24px;
  --ml-sp-6: 32px;
  --ml-sp-7: 48px;

  /* ── radius / shadow ── */
  --ml-radius-sm: 8px;
  --ml-radius: 12px;
  --ml-radius-lg: 16px;
  --ml-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --ml-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06);
  --ml-shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.10);

  /* ── transition ── */
  --ml-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ml-t-fast: 120ms var(--ml-ease);
  --ml-t: 200ms var(--ml-ease);
}

/* ── base components（opt-in クラス） ── */

.ml-card {
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  box-shadow: var(--ml-shadow-sm);
  padding: var(--ml-sp-5);
  transition: box-shadow var(--ml-t), transform var(--ml-t);
}
.ml-card-hover:hover {
  box-shadow: var(--ml-shadow);
  transform: translateY(-1px);
}

.ml-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-sp-2);
  padding: 9px 18px;
  border-radius: var(--ml-radius-sm);
  font-family: var(--ml-font);
  font-size: var(--ml-fs-base);
  font-weight: 600;
  line-height: 1.2;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ml-t-fast), box-shadow var(--ml-t-fast), transform var(--ml-t-fast);
}
.ml-btn:active { transform: translateY(1px); }
.ml-btn-primary {
  background: var(--ml-accent);
  color: var(--ml-accent-fg);
  box-shadow: var(--ml-shadow-sm);
}
.ml-btn-primary:hover { filter: brightness(0.94); box-shadow: var(--ml-shadow); }
.ml-btn-ghost {
  background: var(--ml-surface);
  color: var(--ml-text-2);
  border: 1px solid var(--ml-border);
}
.ml-btn-ghost:hover { background: var(--ml-surface-2); }

.ml-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--ml-fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ml-badge-success { background: var(--ml-success-soft); color: var(--ml-success); }
.ml-badge-warning { background: var(--ml-warning-soft); color: var(--ml-warning); }
.ml-badge-danger  { background: var(--ml-danger-soft);  color: var(--ml-danger); }
.ml-badge-info    { background: var(--ml-info-soft);    color: var(--ml-info); }
.ml-badge-neutral { background: var(--ml-surface-2);    color: var(--ml-text-2); }
.ml-badge-accent  { background: var(--ml-accent-soft);  color: var(--ml-accent); }

.ml-stat {
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  box-shadow: var(--ml-shadow-sm);
  padding: var(--ml-sp-4) var(--ml-sp-5);
}
.ml-stat .ml-stat-label {
  color: var(--ml-muted);
  font-size: var(--ml-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--ml-sp-1);
}
.ml-stat .ml-stat-value {
  color: var(--ml-text);
  font-size: var(--ml-fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.ml-stat .ml-stat-delta {
  font-size: var(--ml-fs-sm);
  font-weight: 600;
  margin-top: var(--ml-sp-1);
}
.ml-stat .ml-stat-delta.up   { color: var(--ml-success); }
.ml-stat .ml-stat-delta.down { color: var(--ml-danger); }

.ml-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ml-fs-base);
}
.ml-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: var(--ml-fs-xs);
  font-weight: 600;
  color: var(--ml-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--ml-border);
  background: transparent;
}
.ml-table td {
  padding: 12px;
  border-bottom: 1px solid var(--ml-surface-2);
  color: var(--ml-text-2);
}
.ml-table tbody tr { transition: background var(--ml-t-fast); }
.ml-table tbody tr:hover td { background: var(--ml-bg); }

.ml-empty {
  text-align: center;
  padding: var(--ml-sp-7) var(--ml-sp-5);
  color: var(--ml-muted);
}
.ml-empty .ml-empty-icon { font-size: 36px; margin-bottom: var(--ml-sp-3); opacity: 0.5; }
.ml-empty .ml-empty-title { font-size: var(--ml-fs-md); font-weight: 600; color: var(--ml-text-2); margin-bottom: var(--ml-sp-1); }

.ml-progress {
  background: var(--ml-surface-2);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}
.ml-progress > div {
  background: var(--ml-accent);
  height: 100%;
  border-radius: 999px;
  transition: width 400ms var(--ml-ease);
}

.ml-chart { width: 100%; min-height: 260px; }
.ml-chart-sm { width: 100%; height: 120px; }
.ml-sparkline { width: 110px; height: 32px; display: inline-block; vertical-align: middle; }