/* ============================================================
   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); }

@keyframes ew-spin { to { transform: rotate(360deg); } }
/* Payment verification spinner (MotionRing, PaymentModal.jsx) — linear, no easing. */

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

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

/* ---- Legal pages (tos.html / privacy.html / cookies.html) ----
   Static, no-React shell reusing the app's tokens. Structure mirrors the
   website's legal-page template (H1 → effective date → uppercase-tracked
   H2 sections → Contact last) but styled with EchoWatch's own CSS, per
   product. Single source of truth: all three pages share these classes,
   nothing is redefined per-page. */
.legal-topbar {
  padding: 16px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border-color);
}
.legal-brand {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-primary);
}
.legal-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.legal-nav a {
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none; transition: color var(--dur-fast);
}
.legal-nav a:hover, .legal-nav a[aria-current="page"] { color: var(--text-primary); }

.legal-main {
  width: 100%; max-width: 720px; margin: 0 auto; padding: 56px 20px 80px; flex: 1;
  font-size: 13px; line-height: 1.7; color: var(--text-primary);
}
.legal-h1 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.legal-date { margin: 0 0 40px; font-size: 11px; color: var(--text-secondary); opacity: 0.6; letter-spacing: 0.05em; }
.legal-intro { margin: 0 0 32px; color: var(--text-secondary); }
.legal-section { margin-bottom: 32px; }
.legal-section:last-of-type { margin-bottom: 0; }
.legal-h2 { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-primary); }
.legal-section p { margin: 0 0 10px; color: var(--text-secondary); }
.legal-section p:last-child { margin-bottom: 0; }
.legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.legal-list li { color: var(--text-secondary); opacity: 0.85; padding-left: 1.2em; position: relative; }
.legal-list li::before { content: "\2014"; position: absolute; left: 0; opacity: 0.5; }
.legal-list .legal-mono { font-family: var(--font-mono); color: var(--text-primary); opacity: 1; }
.legal-main a { color: var(--text-primary); text-decoration: underline; }

.legal-footer {
  padding: 20px; text-align: center; border-top: 1px solid var(--border-color);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.legal-footer-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.legal-footer-links a {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none;
}
.legal-footer-links a:hover { color: var(--text-primary); }