@xenosystem/agent-interface-ui 0.1.3

package/src/foundation.css

@@ -0,0 +1,62 @@
+:root {
+  color-scheme: dark;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #080808;
+  color: #f4f4f4;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; min-height: 100vh; background: #080808; }
+button, input, textarea { font: inherit; }
+
+.agent-foundation {
+  width: min(760px, calc(100vw - 48px));
+  margin: 0 auto;
+  padding: 56px 0 80px;
+}
+
+.agent-foundation__eyebrow {
+  margin: 0 0 10px;
+  color: #a7ffbe;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .18em;
+}
+
+.agent-foundation__title { margin: 0; font-size: clamp(28px, 5vw, 48px); letter-spacing: -.04em; }
+.agent-foundation__status { margin: 14px 0 0; color: rgba(255,255,255,.48); }
+.agent-foundation__status--ready { color: #a7ffbe; }
+.agent-foundation__status--error { color: #ff9d9d; }
+
+.agent-foundation__metadata {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 18px;
+  margin: 34px 0;
+  padding: 18px;
+  border: 1px solid rgba(255,255,255,.08);
+  border-radius: 12px;
+  background: rgba(255,255,255,.025);
+}
+
+.agent-foundation__term { color: rgba(255,255,255,.35); }
+.agent-foundation__value { margin: 0; color: rgba(255,255,255,.78); overflow-wrap: anywhere; }
+.agent-foundation__section-title { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
+.agent-foundation__providers { display: grid; gap: 8px; }
+.agent-foundation__provider {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 14px 16px;
+  border: 1px solid rgba(255,255,255,.07);
+  border-radius: 9px;
+  background: #0d0d0d;
+}
+.agent-foundation__provider-name { font-size: 13px; }
+.agent-foundation__provider-detail, .agent-foundation__empty { color: rgba(255,255,255,.38); font-size: 12px; }
+
+@media (max-width: 560px) {
+  .agent-foundation { width: calc(100vw - 28px); padding-top: 32px; }
+  .agent-foundation__provider { align-items: flex-start; flex-direction: column; gap: 5px; }
+}