/* ============================================================
   ArtMoment — shared design system
   The canonical style for all ArtMoment web surfaces (dashboards,
   reports, internal tools). Link this file, then use the classes
   (.header .card .kpi .pill .btn .grid …) and the --tokens.
   Derived from artmoment-brand-guide.md. Light, minimal, data-first.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');

:root {
  /* core */
  --brand: #253848;
  --brand-light: #34536b;
  --bg: #eef2f5;
  --card: #ffffff;
  /* text */
  --ink: #333333;
  --ink-alt: #1a1a2e;
  --muted: #64748b;
  --on-brand: #ffffff;
  /* chrome */
  --line: #e2e8f0;
  --pill: #e9eef3;
  --row-alt: #f7f9fb;
  --hover: #f0f4f7;
  /* semantic */
  --danger: #e74c3c;
  --danger-hover: #dc2626;
  --success: #27ae60;
  --success-alt: #22c55e;
  --warning: #e0a458;
  /* radius / shadow / space */
  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-full: 999px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.04);
  --max: 1280px;
}

/* chart palette (use via getComputedStyle or copy in JS) */
:root {
  --c1: #253848; --c2: #34536b; --c3: #5a7794; --c4: #27ae60;
  --c5: #e0a458; --c6: #b0413e; --c7: #8aa0b5; --c8: #c2ced9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 16px; }

/* ---- header ---- */
.header {
  background: var(--brand);
  color: var(--on-brand);
  padding: 14px 20px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.header img.logo { height: 34px; width: auto; filter: brightness(0) invert(1); }
.header h1 { font-size: 1.4rem; font-weight: 700; margin: 0; letter-spacing: .2px; }
.header .sub { color: rgba(255,255,255,.72); font-size: 13px; }
.header .spacer { margin-left: auto; }

/* ---- cards & grid ---- */
.card {
  background: var(--card);
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.card h2 {
  font-size: 13px; font-weight: 600; color: var(--muted);
  margin: 0 0 12px; text-transform: uppercase; letter-spacing: .6px;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }

/* ---- KPI ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; }
.kpi {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-card);
}
.kpi .n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--brand); }
.kpi .l { color: var(--muted); font-size: 12px; font-weight: 600; margin-top: 3px;
          text-transform: uppercase; letter-spacing: .5px; }

/* ---- pills / badges ---- */
.pill {
  display: inline-block; padding: 6px 12px; border-radius: var(--r-full);
  background: var(--pill); border: 1px solid var(--line); font-size: 13px;
}

/* ---- buttons ---- */
.btn {
  background: var(--brand); color: #fff; padding: 9px 16px; border: none;
  border-radius: var(--r-sm); font-weight: 700; cursor: pointer; font: inherit;
}
.btn:hover { opacity: .9; }
.ghost {
  background: #fff; color: var(--brand); border: 1px solid var(--brand);
  padding: 9px 16px; border-radius: var(--r-sm); cursor: pointer; font: inherit;
}
.ghost:hover { background: var(--hover); }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 600;
  text-align: left; padding: 10px 12px; position: sticky; top: 0;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr:hover { background: var(--pill); }

.muted { color: var(--muted); }
footer { color: var(--muted); font-size: 12px; text-align: center; padding: 18px; }

@media (max-width: 600px) {
  .header h1 { font-size: 1.1rem; }
  body { font-size: 13px; }
}