/* ─────────────────────────────────────────────────────────────
   MWorkflow design tokens — one source for the website, the
   Fusion 360 add-in (palette HTML) and the Manager (Tauri).

   Usage
   - Link this file before your own CSS.
   - Apps: dark is the default (matches Fusion's dark theme).
   - Website / light surfaces: add  data-theme="light"  on <html>
     (or on any container).
   - Status colours follow a machine status lamp:
     green = ready / go, amber = attention, red = error.
   ───────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  /* surfaces */
  --mw-bg:            #111416;  /* graphite */
  --mw-panel:         #1a1f22;
  --mw-panel-2:       #22282c;  /* raised / hover */
  --mw-line:          #2c3338;
  --mw-line-strong:   #3a4248;

  /* text */
  --mw-text:          #e8ecea;
  --mw-text-muted:    #9aa5a0;
  --mw-text-faint:    #6f7a75;

  /* brand */
  --mw-brand:         #3fae72;  /* primary buttons, active states, links */
  --mw-brand-strong:  #2e8a58;  /* hover / pressed */
  --mw-brand-soft:    rgba(63, 174, 114, .14); /* selected rows, tags */
  --mw-on-brand:      #0b1a12;  /* text on brand fill */

  /* status */
  --mw-attention:     #f2a73b;  /* amber: warnings, running timers */
  --mw-attention-soft: rgba(242, 167, 59, .14);
  --mw-error:         #e5534b;
  --mw-error-soft:    rgba(229, 83, 75, .14);
  --mw-success:       var(--mw-brand);

  /* focus */
  --mw-focus:         0 0 0 3px rgba(63, 174, 114, .45);
}

[data-theme="light"] {
  --mw-bg:            #f6f7f5;
  --mw-panel:         #ffffff;
  --mw-panel-2:       #eef1ef;
  --mw-line:          #dce2de;
  --mw-line-strong:   #c3ccc6;

  --mw-text:          #15201b;
  --mw-text-muted:    #55635c;
  --mw-text-faint:    #7a867f;

  --mw-brand:         #1f6b47;
  --mw-brand-strong:  #17402f;
  --mw-brand-soft:    #dff3e7;
  --mw-on-brand:      #ffffff;

  --mw-attention:     #b8741a;
  --mw-attention-soft: #fbefdc;
  --mw-error:         #c23b34;
  --mw-error-soft:    #fbe4e2;

  --mw-focus:         0 0 0 3px rgba(31, 107, 71, .35);
}

:root {
  /* type */
  --mw-font:        "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mw-font-mono:   "JetBrains Mono", "Cascadia Mono", Consolas, monospace; /* file names, NC paths, dimensions */
  --mw-text-xs:     11px;
  --mw-text-sm:     13px;
  --mw-text-md:     15px;
  --mw-text-lg:     18px;

  /* shape: tight and technical */
  --mw-radius-sm:   4px;   /* inputs, tags */
  --mw-radius:      6px;   /* buttons, cards */
  --mw-radius-lg:   10px;  /* dialogs, large panels */

  /* spacing (4px grid) */
  --mw-space-1: 4px;
  --mw-space-2: 8px;
  --mw-space-3: 12px;
  --mw-space-4: 16px;
  --mw-space-6: 24px;
  --mw-space-8: 32px;

  --mw-shadow:      0 12px 32px rgba(0, 0, 0, .28);
  --mw-ease:        cubic-bezier(.16, 1, .3, 1);
}

/* ── Reference components (optional; copy what you need) ── */
.mw-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mw-space-2);
  min-height: 36px;
  padding: 0 var(--mw-space-4);
  border: 1px solid var(--mw-line-strong);
  border-radius: var(--mw-radius);
  background: var(--mw-panel);
  color: var(--mw-text);
  font: 600 var(--mw-text-sm) / 1 var(--mw-font);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.mw-btn:hover { background: var(--mw-panel-2); }
.mw-btn:focus-visible { outline: none; box-shadow: var(--mw-focus); }
.mw-btn--primary { background: var(--mw-brand); border-color: var(--mw-brand); color: var(--mw-on-brand); }
.mw-btn--primary:hover { background: var(--mw-brand-strong); border-color: var(--mw-brand-strong); }

.mw-input {
  width: 100%;
  min-height: 34px;
  padding: 0 var(--mw-space-3);
  border: 1px solid var(--mw-line-strong);
  border-radius: var(--mw-radius-sm);
  background: var(--mw-bg);
  color: var(--mw-text);
  font: var(--mw-text-sm) var(--mw-font);
}
.mw-input:focus { outline: none; border-color: var(--mw-brand); box-shadow: var(--mw-focus); }
.mw-input--mono { font-family: var(--mw-font-mono); }

.mw-card {
  padding: var(--mw-space-4);
  border: 1px solid var(--mw-line);
  border-radius: var(--mw-radius);
  background: var(--mw-panel);
}

.mw-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--mw-radius-sm);
  background: var(--mw-brand-soft);
  color: var(--mw-brand);
  font: 700 var(--mw-text-xs) / 1.6 var(--mw-font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mw-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mw-tag--attention { background: var(--mw-attention-soft); color: var(--mw-attention); }
.mw-tag--error { background: var(--mw-error-soft); color: var(--mw-error); }