/* ============================================================
   EchoWatch — standalone stylesheet
   Derived from EchoForgeStyle (DESIGN.md v2.1). Self-contained:
   EchoWatch is independent of EchoFamily and must not import
   shared bundles. Tokens are re-derived, not linked.
   ============================================================ */

:root {
  /* EchoForgeStyle core tokens — dark mode is canonical */
  --bg-primary:     #000000;
  --bg-secondary:   #0A0A0A;
  --text-primary:   #FFFFFF;
  --text-secondary: #808080;
  --border-color:   #262626;
  --card-bg:        rgba(26, 26, 26, 0.8);

  /* EchoWatch severity tokens (Development Brief §4).
     The ONLY chromatic colors in this product. Do not add more. */
  --sev-breaking:   #ef4444;  /* build/deploy breaks           */
  --sev-advisory:   #facc15;  /* deprecation / needs attention */
  --sev-info:       #808080;  /* no action required            */
  --status-ok:      #4EDE80;  /* breathing dot, clean state    */

  --font-mono: 'IBM Plex Mono', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP',
               'JetBrains Mono', 'Courier New', monospace;
  --dur-fast: 0.2s;
}

[data-theme="light"] {
  --bg-primary:     #FFFFFF;
  --bg-secondary:   #F5F5F5;
  --text-primary:   #000000;
  --text-secondary: #808080;
  --border-color:   #D9D9D9;
  --card-bg:        rgba(245, 245, 245, 0.8);
  /* severity + ok colors intentionally unchanged across themes */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

button {
  font-family: var(--font-mono);
}

button:focus-visible, a:focus-visible {
  outline: 1px solid var(--text-primary);
  outline-offset: 2px;
}

/* ---- Engineering corner markers (EchoForgeStyle) ---- */
.corner-tl, .corner-tr, .corner-bl, .corner-br {
  position: absolute; width: 12px; height: 12px; pointer-events: none;
}
.corner-tl { top: 8px; left: 8px;
  border-top: 1px solid rgba(128,128,128,0.3); border-left: 1px solid rgba(128,128,128,0.3); }
.corner-tr { top: 8px; right: 8px;
  border-top: 1px solid rgba(128,128,128,0.3); border-right: 1px solid rgba(128,128,128,0.3); }
.corner-bl { bottom: 8px; left: 8px;
  border-bottom: 1px solid rgba(128,128,128,0.3); border-left: 1px solid rgba(128,128,128,0.3); }
.corner-br { bottom: 8px; right: 8px;
  border-bottom: 1px solid rgba(128,128,128,0.3); border-right: 1px solid rgba(128,128,128,0.3); }

/* ---- Type utilities ---- */
.label-tech {
  font-family: var(--font-mono);
  font-size: 0.5625rem;               /* 9px */
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.value-tech {
  font-family: var(--font-mono);
  font-size: 0.6875rem;               /* 11px */
  color: var(--text-primary);
  opacity: 0.8;
  word-break: break-all;
}

/* ---- Containers ---- */
.ew-card {
  position: relative;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  border-radius: 16px;
}

/* ---- Motion ---- */
@keyframes breathe {
  0%, 100% { transform: scale(1);   opacity: 0.7; }
  50%      { transform: scale(1.3); opacity: 1;   }
}
.dot-breathe   { animation: breathe 2s ease-in-out infinite; }
/* BREAKING gets no extra motion — red is already enough (Brief §4). */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.fade-up { animation: fadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  .dot-breathe, .fade-up { animation: none; }
  * { transition: none !important; }
}

/* ---- Responsive header ---- */
@media (max-width: 560px) {
  .ew-header { flex-direction: column; align-items: stretch !important; }
  .ew-header-right { justify-content: center; }
}