/* Socios V2 - the blank canvas. Tokens first; everything the lanes ship builds on these. */
:root {
  --bg: #0b0b0d;
  --ink: #f4f4f5;
  --muted: #9a9aa3;
  --rule: #232328;
  --accent: #ff2d55;
  --top-h: 64px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #ffffff; --ink: #0b0b0d; --muted: #6b6b73; --rule: #e6e6ea; }
}
:root[data-theme="light"] { --bg: #ffffff; --ink: #0b0b0d; --muted: #6b6b73; --rule: #e6e6ea; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.top {
  height: var(--top-h);
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; line-height: 0; }
.logo { height: 24px; width: auto; display: none; }
.logo-dark { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-dark { display: none; }
  :root:not([data-theme="dark"]) .logo-light { display: block; }
}
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: block; }
.stage { min-height: calc(100% - var(--top-h)); }
@media (max-width: 480px) { .top { padding: 0 16px; } }
/* a surface label beside the logo (the admin) - the only text on a blank surface */
.surface { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--rule); color: var(--muted); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }