/*
  DMG Design System
  Shared brand tokens for Platform, auth, root staff shell and local modules.
  Keep this file token-focused; page-specific composition stays in each runtime CSS.
*/

:root {
  color-scheme: light;
  --dmg-font-family: Arial, "Helvetica Neue", "Segoe UI", sans-serif;

  --dmg-bg: #f7f4e8;
  --dmg-bg-soft: #fbf8ef;
  --dmg-bg-cool: #eef3e3;
  --dmg-surface: #fffdf8;
  --dmg-surface-strong: #ffffff;
  --dmg-surface-muted: #f2eedf;
  --dmg-ink: #1f2a1d;
  --dmg-ink-strong: #17351f;
  --dmg-muted: #64705b;
  --dmg-line: #e3dac0;
  --dmg-line-strong: #d2c7a8;

  --dmg-green: #0f5a34;
  --dmg-green-dark: #063b24;
  --dmg-green-deep: #042619;
  --dmg-olive: #7c8f3a;
  --dmg-olive-dark: #566d24;
  --dmg-gold: #f4d572;
  --dmg-gold-deep: #c89b35;
  --dmg-danger: #b42318;
  --dmg-warning: #92400e;
  --dmg-success: #137333;
  --dmg-info: #075985;

  --dmg-radius: 8px;
  --dmg-pill-radius: 999px;
  --dmg-shadow-sm: 0 1px 2px rgba(31, 42, 29, 0.04);
  --dmg-shadow: 0 1px 2px rgba(31, 42, 29, 0.05);
  --dmg-shadow-lg: 0 8px 22px rgba(31, 42, 29, 0.08);
  --dmg-focus: 0 0 0 3px rgba(15, 90, 52, 0.16);

  --dmg-control-bg: #fffef8;
  --dmg-control-border: #d9d0b3;
  --dmg-control-border-hover: #b9c98d;
  --dmg-button-primary-bg: #0f5a34;
  --dmg-button-primary-bg-hover: #063b24;
  --dmg-button-secondary-bg: #7c8f3a;
  --dmg-button-secondary-bg-hover: #566d24;
  --dmg-button-ghost-bg: #fffaf0;
  --dmg-button-ghost-bg-hover: #eef5dd;
  --dmg-chip-bg: #f3efd9;
  --dmg-chip-ink: #566d24;
  --dmg-status-success-bg: #e8f3df;
  --dmg-status-success-ink: #17663b;
  --dmg-status-warning-bg: #fff4cf;
  --dmg-status-warning-ink: #7b5a04;
  --dmg-status-danger-bg: #fff1f0;
  --dmg-status-danger-ink: #b42318;
  --dmg-status-info-bg: #e8f3df;
  --dmg-status-info-ink: #0f5a34;
  --dmg-status-muted-bg: #f0eee8;
  --dmg-status-muted-ink: #6a6254;

  --dmg-page-gradient: linear-gradient(180deg, var(--dmg-bg-soft) 0%, var(--dmg-bg) 100%);
  --dmg-sidebar-gradient: linear-gradient(180deg, rgba(6, 59, 36, 0.97), rgba(4, 38, 25, 0.98));
  --dmg-hero-gradient: linear-gradient(90deg, rgba(6, 59, 36, 0.92), rgba(15, 90, 52, 0.58) 54%, rgba(31, 42, 29, 0.12));
  --dmg-module-hero-gradient: linear-gradient(90deg, rgba(6, 59, 36, 0.92), rgba(15, 90, 52, 0.64) 52%, rgba(15, 90, 52, 0.08));
  --dmg-auth-hero-gradient: linear-gradient(90deg, rgba(6, 59, 36, 0.84), rgba(15, 90, 52, 0.42) 48%, rgba(31, 42, 29, 0.06));
  --dmg-auth-login-image: url("/assets/site/images/brand/background.png");

  --dmg-hero-image: url("/assets/site/images/hero/home-banner.png");
  --dmg-auth-hero-image: url("/assets/app/images/auth/auth-hero-banner.jpg");
  --dmg-logo-round: url("/assets/site/images/brand/logo-round.png");
}

.dmg-brand-mark {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--dmg-bg-soft);
}

.dmg-panel {
  background: var(--dmg-surface);
  border: 1px solid var(--dmg-line);
  border-radius: var(--dmg-radius);
  box-shadow: none;
}

.dmg-focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--dmg-focus);
}

.dmg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--dmg-radius);
  background: var(--dmg-button-primary-bg);
  color: #fff8df;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.dmg-button:hover {
  background: var(--dmg-button-primary-bg-hover);
  color: #fff8df;
}

.dmg-button:focus-visible {
  outline: none;
  box-shadow: var(--dmg-focus);
}

.dmg-button svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 16px;
}

.dmg-button--secondary {
  background: var(--dmg-button-secondary-bg);
  color: #fff8df;
}

.dmg-button--secondary:hover {
  background: var(--dmg-button-secondary-bg-hover);
}

.dmg-button--ghost,
.dmg-button--outline {
  border-color: var(--dmg-control-border);
  background: var(--dmg-button-ghost-bg);
  color: var(--dmg-green);
  box-shadow: none;
}

.dmg-button--ghost:hover,
.dmg-button--outline:hover {
  border-color: var(--dmg-control-border-hover);
  background: var(--dmg-button-ghost-bg-hover);
  color: var(--dmg-green-dark);
}

.dmg-button--danger {
  background: var(--dmg-danger);
  color: #fff8df;
}

.dmg-button--danger:hover {
  background: #8f1d14;
}

.dmg-icon-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: var(--dmg-radius);
}

.dmg-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.dmg-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dmg-chip,
.dmg-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  max-width: 100%;
  border-radius: var(--dmg-pill-radius);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.dmg-chip {
  border: 1px solid var(--dmg-line);
  background: var(--dmg-chip-bg);
  color: var(--dmg-chip-ink);
}

.dmg-status {
  background: var(--dmg-status-info-bg);
  color: var(--dmg-status-info-ink);
}

.dmg-status::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: var(--dmg-pill-radius);
  background: currentColor;
}

.dmg-status--success,
.dmg-status--ready,
.dmg-status--pass {
  background: var(--dmg-status-success-bg);
  color: var(--dmg-status-success-ink);
}

.dmg-status--warning,
.dmg-status--shell,
.dmg-status--warn {
  background: var(--dmg-status-warning-bg);
  color: var(--dmg-status-warning-ink);
}

.dmg-status--danger,
.dmg-status--fail {
  background: var(--dmg-status-danger-bg);
  color: var(--dmg-status-danger-ink);
}

.dmg-status--muted,
.dmg-status--planned,
.dmg-status--unknown {
  background: var(--dmg-status-muted-bg);
  color: var(--dmg-status-muted-ink);
}

.dmg-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.dmg-table {
  width: 100%;
  border-collapse: collapse;
}

.dmg-table th,
.dmg-table td {
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--dmg-line);
}

.dmg-table th {
  background: var(--dmg-surface-muted);
  color: var(--dmg-muted);
  font-size: 13px;
  font-weight: 700;
}

.dmg-empty-state {
  border: 1px dashed var(--dmg-line-strong);
  border-radius: var(--dmg-radius);
  padding: 22px;
  background: var(--dmg-surface);
  color: var(--dmg-muted);
}