/* ============================================================
   MATAL — DESP / CRM · Design Tokens
   ============================================================ */

:root {
  /* ---------- Color: surface ---------- */
  --bg:           oklch(98.5% 0.003 240);
  --surface:      #ffffff;
  --surface-2:    oklch(97% 0.004 240);
  --surface-3:    oklch(94.5% 0.006 240);

  /* ---------- Color: lines & ink ---------- */
  --border:       oklch(91% 0.006 240);
  --border-strong:oklch(86% 0.008 240);
  --ink:          oklch(18% 0.02 250);
  --ink-2:        oklch(34% 0.02 250);
  --ink-mute:     oklch(54% 0.015 250);
  --ink-faint:    oklch(70% 0.012 250);

  /* ---------- Color: brand & signal ---------- */
  --brand:        oklch(62% 0.18 55);      /* ambre — actions, focus */
  --brand-2:      oklch(56% 0.16 55);
  --brand-tint:   oklch(97% 0.04 55);

  /* ---------- Color: semantic (DESP urgency scale) ---------- */
  --danger:       oklch(56% 0.22 28);      /* IP/VI dépassée */
  --danger-tint:  oklch(96.5% 0.025 28);
  --warn:         oklch(72% 0.15 70);      /* à surveiller <30j */
  --warn-tint:    oklch(97% 0.03 70);
  --watch:        oklch(80% 0.13 95);      /* veille <90j */
  --watch-tint:   oklch(98% 0.03 95);
  --ok:           oklch(58% 0.14 155);     /* conforme */
  --ok-tint:      oklch(96% 0.03 155);

  /* ---------- Color: industrial dark (sidebar) ---------- */
  --steel-900:    oklch(18% 0.010 40);
  --steel-800:    oklch(22% 0.012 40);
  --steel-700:    oklch(28% 0.015 40);
  --steel-500:    oklch(48% 0.018 40);
  --steel-400:    oklch(60% 0.015 40);
  --steel-300:    oklch(72% 0.013 40);

  /* ---------- Type ---------- */
  --ff-sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono:  "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
  --ff-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  --t-xs:  11px;
  --t-sm:  12px;
  --t-md:  13px;
  --t-base:14px;
  --t-lg:  16px;
  --t-xl:  20px;
  --t-2xl: 28px;
  --t-3xl: 40px;
  --t-4xl: 56px;
  --t-5xl: 80px;

  /* ---------- Spacing (4-base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---------- Radius ---------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 0 rgba(15, 23, 42, 0.02);
  --shadow-md: 0 4px 14px -4px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 18px 42px -16px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.05);
}

/* ============================================================
   Resets / base helpers — scoped to artboards
   ============================================================ */

.m-app, .m-app * { box-sizing: border-box; }
.m-app {
  font-family: var(--ff-sans);
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -0.005em;
}
.m-app .mono { font-family: var(--ff-mono); letter-spacing: 0; }
.m-app h1, .m-app h2, .m-app h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
.m-app p { margin: 0; }
.m-app button { font: inherit; cursor: pointer; }
.m-app a { color: inherit; text-decoration: none; }

/* "label-cap" — uppercase tiny labels */
.m-app .lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* number display */
.m-app .num {
  font-family: var(--ff-sans);
  font-feature-settings: "tnum", "ss01";
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Reusable component classes
   ============================================================ */

/* Card */
.m-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

/* Chip */
.m-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  background: var(--surface-3); color: var(--ink-2);
  border: 1px solid var(--border);
}
.m-chip.is-danger { background: var(--danger-tint); color: var(--danger); border-color: oklch(88% 0.08 28); }
.m-chip.is-warn   { background: var(--warn-tint);   color: oklch(45% 0.12 65); border-color: oklch(88% 0.07 70); }
.m-chip.is-ok     { background: var(--ok-tint);     color: oklch(40% 0.12 155); border-color: oklch(86% 0.06 155); }
.m-chip.is-brand  { background: var(--brand-tint);  color: var(--brand); border-color: oklch(88% 0.06 250); }

/* Button */
.m-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 500;
  transition: background 120ms ease, border-color 120ms ease;
}
.m-btn:hover { background: var(--surface-2); }
.m-btn.is-primary {
  background: var(--ink); color: white; border-color: var(--ink);
}
.m-btn.is-primary:hover { background: var(--steel-800); }
.m-btn.is-brand {
  background: var(--brand); color: white; border-color: var(--brand);
}
.m-btn.is-danger {
  background: var(--danger); color: white; border-color: var(--danger);
}
.m-btn.is-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.m-btn.is-ghost:hover { background: var(--surface-3); }
.m-btn.is-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.m-btn.is-lg { height: 44px; padding: 0 18px; font-size: 14px; }
.m-btn .ic { width: 14px; height: 14px; }

/* Divider */
.m-div { height: 1px; background: var(--border); width: 100%; }

/* Tab */
.m-tabs { display: inline-flex; gap: 2px; background: var(--surface-3); border-radius: var(--r-md); padding: 3px; }
.m-tabs button {
  height: 28px; padding: 0 12px;
  border: 0; border-radius: 4px; background: transparent;
  font-size: 12.5px; font-weight: 500; color: var(--ink-mute);
}
.m-tabs button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* Scrollbar pacification inside artboards */
.m-app ::-webkit-scrollbar { width: 8px; height: 8px; }
.m-app ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
.m-app ::-webkit-scrollbar-track { background: transparent; }