/* ============================================================================
   Wagashi — design system da status.mochii.app
   ----------------------------------------------------------------------------
   FONTE ÚNICA da linguagem visual das 8 páginas. Servido como arquivo estático
   em https://status.mochii.app/theme.css (Caddy serve ~/logs/status/ com
   file_server), e referenciado por <link> em cada *-report.sh.

   ⚠️ NÃO copiar estes tokens para dentro de um script de página. O motivo de
   este arquivo existir é que havia ~2.340 linhas de CSS duplicadas entre os 8
   scripts; qualquer paleta redeclarada lá volta a divergir na primeira
   manutenção. CSS específico de uma página fica na página — tokens, primitivas
   e cromo compartilhado ficam aqui.

   Paleta: doçaria japonesa. Kinako (soja tostada) no fundo, matcha no que está
   saudável, sakura no que é neutro-informativo, azuki no que precisa de ação.
   ========================================================================= */

:root {
  /* superfícies */
  --ground:      #fdf6f0;
  --panel:       #ffffff;
  --panel-sunk:  #faf1ea;
  --line:        #f0e2d8;
  --line-strong: #e6d0c2;

  /* tinta */
  --ink:         #4a3b3f;
  --ink-strong:  #33272a;
  --muted:       #9a8681;

  /* sabores */
  --matcha:      #6da256;
  --matcha-soft: #eaf3e4;
  --sakura:      #dd7d9b;
  --sakura-ink:  #b95a77;
  --sakura-soft: #fbeef2;
  --kinako:      #c98a2e;
  --kinako-soft: #fdf0dc;
  --azuki:       #c2506a;
  --azuki-soft:  #fbe6ea;

  /* forma */
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --lift: 0 2px 0 var(--line);
  --lift-hi: 0 3px 0 var(--line-strong);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #241b1e;
    --panel:       #2e2327;
    --panel-sunk:  #281e21;
    --line:        #3d2f33;
    --line-strong: #4d3c41;
    --ink:         #f2e6e4;
    --ink-strong:  #ffffff;
    --muted:       #a8938e;
    --matcha:      #8fc47a;
    --matcha-soft: #2b3a28;
    --sakura-ink:  #f0a0b8;
    --sakura-soft: #3d262e;
    --kinako:      #e0a94f;
    --kinako-soft: #3a2c1c;
    --azuki:       #f2809a;
    --azuki-soft:  #3f2129;
  }
}
:root[data-theme="dark"] {
  --ground:#241b1e; --panel:#2e2327; --panel-sunk:#281e21; --line:#3d2f33;
  --line-strong:#4d3c41; --ink:#f2e6e4; --ink-strong:#ffffff; --muted:#a8938e;
  --matcha:#8fc47a; --matcha-soft:#2b3a28; --sakura-ink:#f0a0b8; --sakura-soft:#3d262e;
  --kinako:#e0a94f; --kinako-soft:#3a2c1c; --azuki:#f2809a; --azuki-soft:#3f2129;
}
:root[data-theme="light"] {
  --ground:#fdf6f0; --panel:#ffffff; --panel-sunk:#faf1ea; --line:#f0e2d8;
  --line-strong:#e6d0c2; --ink:#4a3b3f; --ink-strong:#33272a; --muted:#9a8681;
  --matcha:#6da256; --matcha-soft:#eaf3e4; --sakura-ink:#b95a77; --sakura-soft:#fbeef2;
  --kinako:#c98a2e; --kinako-soft:#fdf0dc; --azuki:#c2506a; --azuki-soft:#fbe6ea;
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sakura-ink); }

:focus-visible {
  outline: 2px solid var(--sakura-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- topo/nav */
.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 22px 0 0;
}
.topbar-inner,
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  font-size: 1.7rem;
  line-height: 1;
  flex: none;
}
.brand-name {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink-strong);
}
.brand-name em {
  font-style: normal;
  color: var(--sakura-ink);
}
.brand-sub {
  margin-top: 3px;
  font-size: .76rem;
  color: var(--muted);
}

.nav {
  display: flex;
  gap: 4px;
  margin-top: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 8px 14px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); background: var(--panel-sunk); }
.nav a.on {
  color: var(--sakura-ink);
  border-bottom-color: var(--sakura-ink);
  background: var(--sakura-soft);
}

.page { padding-top: 26px; padding-bottom: 60px; }

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  padding: 20px;
}
.card + .card { margin-top: 18px; }

.card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-strong);
}
.card-hint {
  font-weight: 500;
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .01em;
}

/* ------------------------------------------------------------- destaque */
.hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--lift);
}
.hero-blob {
  width: 54px; height: 54px; flex: none;
  border-radius: 50%;
  background: var(--matcha-soft);
  display: grid; place-items: center;
  font-size: 1.5rem;
}
.hero-blob.warn { background: var(--kinako-soft); }
.hero-blob.crit { background: var(--azuki-soft); }
.hero-eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--matcha);
}
.hero-eyebrow.warn { color: var(--kinako); }
.hero-eyebrow.crit { color: var(--azuki); }
.hero-title {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink-strong); line-height: 1.2;
}
.hero-note { font-size: .8rem; color: var(--muted); margin-top: 2px; }

/* ----------------------------------------------------------------- stats */
.stats {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 18px 0;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  padding: 16px 17px;
}
.stat.matcha { background: var(--matcha-soft); border-color: transparent; }
.stat.sakura { background: var(--sakura-soft); border-color: transparent; }
.stat.kinako { background: var(--kinako-soft); border-color: transparent; }
.stat.azuki  { background: var(--azuki-soft);  border-color: transparent; }

.stat-value {
  font-size: 1.55rem; font-weight: 800; line-height: 1.05;
  letter-spacing: -.03em; color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 5px;
  font-size: .66rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.stat-note { margin-top: 3px; font-size: .7rem; color: var(--muted); }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .01em;
  background: var(--panel-sunk); color: var(--muted);
}
.badge.ok   { background: var(--matcha-soft); color: var(--matcha); }
.badge.warn { background: var(--kinako-soft); color: var(--kinako); }
.badge.crit { background: var(--azuki-soft);  color: var(--azuki); }
.badge.info { background: var(--sakura-soft); color: var(--sakura-ink); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------------------ list */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dotted var(--line-strong);
  font-size: .84rem;
}
.row:last-child { border-bottom: none; }
.row-main { flex: 1; min-width: 0; }
.row-name { font-weight: 600; color: var(--ink-strong); }
.row-note { font-size: .74rem; color: var(--muted); }
.row-side { color: var(--muted); font-size: .76rem; white-space: nowrap; }

/* ------------------------------------------------------------------ misc */
.mono { font-family: var(--mono); font-size: .78rem; }
.tnum { font-variant-numeric: tabular-nums; }

.foot {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--muted);
}

.stale {
  margin-bottom: 18px; padding: 13px 17px;
  border-radius: var(--r-md);
  background: var(--azuki-soft); color: var(--azuki);
  font-size: .8rem; font-weight: 600;
}

@media (max-width: 640px) {
  .topbar-inner, .page { padding-left: 16px; padding-right: 16px; }
  .brand-name { font-size: 1.15rem; }
  .hero { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}