/* ============================================================
 * Moara Design System — Component primitives for Deki2
 *
 * Layered on top of moara-tokens.css + Tailwind CDN. Provides class-based
 * primitives that map to the Moara visual language. All names are
 * prefixed `m-` so they never collide with Tailwind utilities.
 *
 * Pattern:
 *   <button class="m-btn m-btn-primary">…</button>
 *   <div class="m-card">…</div>
 *   <span class="m-status-pill m-status-pill--done">Done</span>
 *
 * Existing markup using Tailwind utilities keeps working unchanged.
 * ============================================================ */

/* -------- Page chrome -------- */
html, body { font-family: var(--moara-font-sans); }
body { background: var(--moara-background); color: var(--moara-foreground); }

/* -------- Type primitives -------- */
.m-display    { font-size: var(--moara-text-5xl);  font-weight: 800; letter-spacing: var(--moara-tracking-tight); line-height: var(--moara-leading-tight); }
.m-page-title { font-size: var(--moara-text-xl);   font-weight: 700; letter-spacing: var(--moara-tracking-tight); line-height: var(--moara-leading-snug); }
.m-section-title { font-size: var(--moara-text-lg); font-weight: 700; letter-spacing: var(--moara-tracking-tight); line-height: var(--moara-leading-snug); }
.m-card-title { font-size: var(--moara-text-md); font-weight: 500; line-height: var(--moara-leading-snug); }
.m-kpi-number { font-size: var(--moara-text-3xl); font-weight: 700; letter-spacing: var(--moara-tracking-tight); line-height: 1; color: var(--moara-foreground); }
.m-kpi-denom  { font-size: var(--moara-text-sm); font-weight: 600; color: var(--moara-gray-400); }
.m-body       { font-size: var(--moara-text-base); line-height: var(--moara-leading-normal); }
.m-caption    { font-size: var(--moara-text-xs); font-weight: 500; color: var(--moara-gray-500); }
.m-eyebrow    { font-size: var(--moara-text-sm); font-weight: 600; color: var(--moara-gray-500); text-transform: uppercase; letter-spacing: var(--moara-tracking-wide); }
.m-micro-label{ font-size: var(--moara-text-mini); font-weight: 700; text-transform: uppercase; letter-spacing: var(--moara-tracking-widest); color: var(--moara-gray-500); }
.m-tag-text   { font-size: var(--moara-text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--moara-tracking-wider); line-height: 1; }
.m-mono       { font-family: var(--moara-font-mono); font-feature-settings: "tnum" 1; }

/* -------- Wordmark "Deki·2" — two-tone -------- */
.m-wordmark {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--moara-font-sans);
  font-size: var(--moara-text-lg);
  font-weight: 800;
  letter-spacing: var(--moara-tracking-tight);
}
.m-wordmark__primary  { color: var(--moara-brand-600); }
.m-wordmark__suffix   { color: var(--moara-gray-900); }
.m-wordmark__mark {  /* collapsed-sidebar single-letter glyph */
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--moara-radius-lg);
  background: var(--moara-brand-50); color: var(--moara-brand-600);
  font-weight: 800; font-size: var(--moara-text-md);
}

/* -------- Buttons -------- */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--moara-radius-lg);
  border: 1px solid transparent;
  background: var(--moara-surface); color: var(--moara-foreground);
  font-family: inherit; font-size: var(--moara-text-base); font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease,
              transform .15s ease;
  outline: none;
  white-space: nowrap;
}
.m-btn:active:not(:disabled) { transform: translateY(1px); }
.m-btn:focus-visible { box-shadow: 0 0 0 3px rgb(156 163 175 / 0.35); }
.m-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.m-btn-primary  { background: var(--moara-brand-500); color: var(--moara-primary-fg); }
.m-btn-primary:hover  { background: var(--moara-brand-600); }
.m-btn-primary:focus-visible { box-shadow: 0 0 0 3px rgb(249 115 22 / 0.25); }

.m-btn-outline  { border-color: var(--moara-border); background: var(--moara-surface); }
.m-btn-outline:hover { background: var(--moara-gray-50); }

.m-btn-secondary { background: var(--moara-gray-100); }
.m-btn-secondary:hover { background: #ebebeb; }

.m-btn-ghost    { background: transparent; }
.m-btn-ghost:hover { background: var(--moara-gray-100); }

.m-btn-destructive { background: rgb(203 42 42 / 0.10); color: #cb2a2a; }
.m-btn-destructive:hover { background: rgb(203 42 42 / 0.18); }

.m-btn-sm { height: 28px; padding: 0 10px; font-size: var(--moara-text-sm); border-radius: var(--moara-radius-md); }
.m-btn-lg { height: 40px; padding: 0 16px; font-size: var(--moara-text-base); border-radius: var(--moara-radius-xl); }
.m-btn-icon    { width: 32px; padding: 0; }
.m-btn-icon-sm { width: 28px; height: 28px; padding: 0; border-radius: var(--moara-radius-md); }

/* -------- Card -------- */
.m-card {
  background: var(--moara-surface);
  border: 1px solid var(--moara-border);
  border-radius: var(--moara-radius-xl);
  box-shadow: var(--moara-shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.m-card--hover:hover { box-shadow: var(--moara-shadow-md); }
.m-card--soft { background: var(--moara-gray-50); }
.m-card__header { padding: 16px 16px 8px; }
.m-card__body { padding: 16px; }
.m-card__footer { padding: 12px 16px; border-top: 1px solid var(--moara-border-soft); }

/* -------- Inputs / fields -------- */
.m-field {
  display: block; width: 100%;
  height: 36px; padding: 0 12px;
  border-radius: var(--moara-radius-lg);
  border: 1px solid var(--moara-border);
  background: var(--moara-surface);
  font-family: inherit; font-size: var(--moara-text-base);
  color: var(--moara-foreground);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.m-field:focus, .m-field:focus-visible {
  border-color: var(--moara-gray-400);
  box-shadow: 0 0 0 3px rgb(156 163 175 / 0.30);
}
textarea.m-field { height: auto; padding: 10px 12px; line-height: var(--moara-leading-snug); }
.m-field-lg {
  height: 48px; padding: 0 16px; border-radius: var(--moara-radius-xl);
  background: var(--moara-gray-50);
}
.m-field-lg:focus, .m-field-lg:focus-visible {
  background: var(--moara-surface);
  border-color: var(--moara-brand-500);
  box-shadow: 0 0 0 3px rgb(249 115 22 / 0.20);
}
.m-field-label {
  display: block; font-size: var(--moara-text-xs); font-weight: 600;
  color: var(--moara-gray-700); margin-bottom: 6px;
}

/* -------- Chip / pill -------- */
.m-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  border-radius: var(--moara-radius-pill);
  font-size: var(--moara-text-xs); font-weight: 500;
}
.m-pill-outline { border: 1px solid var(--moara-border); background: transparent; }
.m-pill-accent  { background: var(--moara-brand-50); color: var(--moara-brand-700); }

/* Tag pill (the signature 10px uppercase taxonomy chip) */
.m-tag {
  display: inline-flex; align-items: center;
  height: 16px; padding: 0 6px;
  border-radius: 4px;
  font-size: var(--moara-text-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--moara-tracking-wider);
  background: var(--moara-gray-100); color: var(--moara-gray-700);
}

/* -------- Status pill (semantic dot + label) -------- */
.m-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: var(--moara-radius-pill);
  font-size: var(--moara-text-eyebrow); font-weight: 600;
  background: var(--moara-gray-100); color: var(--moara-gray-700);
}
.m-status-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--moara-surface);
  background: var(--moara-status-pending);
}
.m-status-pill--pending::before { background: var(--moara-status-pending); }
.m-status-pill--build::before   { background: var(--moara-status-build); }
.m-status-pill--queue::before   { background: var(--moara-status-queue); }
.m-status-pill--upload::before  { background: var(--moara-status-upload); }
.m-status-pill--warn::before    { background: var(--moara-status-warn); }
.m-status-pill--done::before    { background: var(--moara-status-done); }
.m-status-pill--error::before   { background: var(--moara-status-error); }
.m-status-pill--archive::before { background: var(--moara-status-archive); }

.m-status-pill--build  { background: #eff6ff; color: #1d4ed8; }
.m-status-pill--done   { background: #f0fdf4; color: #15803d; }
.m-status-pill--error  { background: #fef2f2; color: #b91c1c; }
.m-status-pill--queue  { background: #faf5ff; color: #7e22ce; }
.m-status-pill--warn   { background: #fef2f2; color: #b91c1c; }
.m-status-pill--archive{ background: #f1f5f9; color: #334155; }

/* -------- Icon tile (signature decorative pattern) -------- */
.m-icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--moara-radius-md);
  flex-shrink: 0;
}
.m-icon-tile--lg { width: 40px; height: 40px; border-radius: var(--moara-radius-xl); }
.m-icon-tile--orange { background: var(--moara-wash-orange-bg); color: var(--moara-wash-orange-fg); }
.m-icon-tile--blue   { background: var(--moara-wash-blue-bg);   color: var(--moara-wash-blue-fg); }
.m-icon-tile--red    { background: var(--moara-wash-red-bg);    color: var(--moara-wash-red-fg); }
.m-icon-tile--pink   { background: var(--moara-wash-pink-bg);   color: var(--moara-wash-pink-fg); }
.m-icon-tile--purple { background: var(--moara-wash-purple-bg); color: var(--moara-wash-purple-fg); }
.m-icon-tile--teal   { background: var(--moara-wash-teal-bg);   color: var(--moara-wash-teal-fg); }
.m-icon-tile--green  { background: var(--moara-wash-green-bg);  color: var(--moara-wash-green-fg); }

/* -------- KPI card (Moara canonical recipe) -------- */
.m-kpi {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--moara-surface);
  border: 1px solid var(--moara-border);
  border-radius: var(--moara-radius-xl);
  box-shadow: var(--moara-shadow-sm);
  padding: 16px;
  transition: box-shadow .15s ease;
}
.m-kpi:hover { box-shadow: var(--moara-shadow-md); }
.m-kpi__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.m-kpi__title {
  font-size: var(--moara-text-sm); font-weight: 600;
  color: var(--moara-gray-500); text-transform: uppercase;
  letter-spacing: var(--moara-tracking-wide);
}
.m-kpi__number { display: flex; align-items: baseline; gap: 6px; }
.m-kpi__caption { font-size: var(--moara-text-xs); font-weight: 500; color: var(--moara-gray-500); }

/* -------- Sidebar nav (Moara active-item recipe) -------- */
.m-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: var(--moara-radius-md);
  font-size: var(--moara-text-base); font-weight: 500;
  color: var(--moara-gray-700);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.m-nav-item:hover {
  background: var(--moara-gray-100);
  color: var(--moara-gray-900);
}
.m-nav-item--active {
  background: var(--moara-brand-50);
  color: var(--moara-brand-600);
  font-weight: 600;
  border-left: 2px solid var(--moara-brand-500);
  padding-left: 10px;  /* compensate for the 2px border */
}
.m-nav-item--active:hover {
  background: var(--moara-brand-50);
  color: var(--moara-brand-600);
}

/* -------- Header bar -------- */
.m-header {
  height: var(--moara-header-h);
  background: var(--moara-surface);
  border-bottom: 1px solid var(--moara-border);
  display: flex; align-items: center;
  padding: 0 20px;
  gap: 16px;
}

/* -------- Sidebar shell -------- */
.m-sidebar {
  width: var(--moara-sidebar-w);
  background: var(--moara-gray-50);
  border-right: 1px solid var(--moara-border);
  display: flex; flex-direction: column;
  flex-shrink: 0;
}

/* -------- Light hover for table rows -------- */
.m-table-row:hover { background: var(--moara-gray-50); }

/* -------- Misc helpers -------- */
.m-divider { height: 1px; background: var(--moara-border-soft); }
.m-skeleton { background: linear-gradient(90deg, var(--moara-gray-100), var(--moara-gray-200), var(--moara-gray-100)); background-size: 200% 100%; animation: m-skel 1.5s ease-in-out infinite; border-radius: var(--moara-radius-md); }
@keyframes m-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }