/* ============================================================
   CHIKA-MATCH Design System — shared design tokens & components
   Philosophy: unify what already exists, don't redesign.
   All pages link this first so colors / radius / spacing / type match.
   ============================================================ */
:root {
  /* Brand (keeps the existing blue) */
  --ds-primary: #2563eb;
  --ds-primary-dark: #1d4ed8;
  --ds-primary-soft: #eff6ff;
  --ds-success: #16a34a;
  --ds-success-soft: #ecfdf5;
  --ds-warning: #ea580c;
  --ds-warning-soft: #fff7ed;
  --ds-danger: #dc2626;
  --ds-danger-soft: #fef2f2;

  /* Neutrals */
  --ds-text: #1e293b;
  --ds-muted: #64748b;
  --ds-border: #e2e8f0;
  --ds-bg: #f6f8fb;
  --ds-surface: #ffffff;

  /* Radius scale */
  --ds-radius-sm: 8px;
  --ds-radius: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-pill: 999px;

  /* Elevation */
  --ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
  --ds-shadow: 0 4px 14px rgba(15, 23, 42, .08);
  --ds-shadow-lg: 0 12px 32px rgba(15, 23, 42, .14);

  /* Spacing step */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-6: 24px;

  /* Typography */
  --ds-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
             'Hiragino Sans', 'Noto Sans JP', Meiryo, sans-serif;

  /* Align the standalone pages' legacy variable names to the tokens
     (contacts.html / subcommittees.html use --primary / --border / etc.) */
  --primary: var(--ds-primary);
  --primary-h: var(--ds-primary-dark);
  --danger: var(--ds-danger);
  --danger-h: #b91c1c;
  --bg: var(--ds-bg);
  --card: var(--ds-surface);
  --border: var(--ds-border);
  --text: var(--ds-text);
  --muted: var(--ds-muted);
  --tag-bg: var(--ds-primary-soft);
  --tag-text: var(--ds-primary-dark);

  /* Align Shoelace (index.html) to the same tokens */
  --sl-color-primary-50:  #eff6ff;
  --sl-color-primary-100: #dbeafe;
  --sl-color-primary-500: #3b82f6;
  --sl-color-primary-600: var(--ds-primary);
  --sl-color-primary-700: var(--ds-primary-dark);
  --sl-font-sans: var(--ds-font);
  --sl-border-radius-medium: var(--ds-radius-sm);
  --sl-border-radius-large: var(--ds-radius);
}

/* ---- Shared opt-in components (use these in new UI) ---- */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-4) 1.2rem;
}

/* Friendly empty state with an icon + hint + optional action */
.ds-empty {
  text-align: center;
  padding: 1.8rem 1rem;
  color: var(--ds-muted);
  font-size: .9rem;
  line-height: 1.7;
}
.ds-empty .ds-empty-icon { font-size: 1.7rem; display: block; margin-bottom: .35rem; opacity: .65; }

/* Pill badge */
.ds-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 700;
  padding: 2px 9px; border-radius: var(--ds-radius-pill);
}
.ds-badge.is-primary { background: var(--ds-primary-soft); color: var(--ds-primary-dark); }
.ds-badge.is-success { background: var(--ds-success-soft); color: var(--ds-success); }
.ds-badge.is-warning { background: var(--ds-warning-soft); color: var(--ds-warning); }
.ds-badge.is-danger  { background: var(--ds-danger-soft);  color: var(--ds-danger); }

/* Toast (right-top) for the standalone pages that only have inline toasts */
.ds-toast-host { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 3000;
                 display: flex; flex-direction: column; gap: 8px; }
.ds-toast { background: var(--ds-text); color: #fff; padding: .6rem 1rem;
            border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-lg);
            font-size: .85rem; }
.ds-toast.is-error { background: var(--ds-danger); }
.ds-toast.is-success { background: var(--ds-success); }