/* shared-ui 0.2.0-preview.1 — opt-in foundations, no fonts or external assets. */
:where(.shared-ui) {
  --su-canvas: #08090a;
  --su-surface: #111315;
  --su-raised: #1b1e21;
  --su-field: #0c0e10;
  --su-ink: #f1f3f5;
  --su-muted: #b2bac2;
  --su-line: #2b2e32;
  --su-control-line: #777e86;
  --su-accent: #d9ef50;
  --su-on-accent: #10150b;
  --su-focus: #73deff;
  --su-good: #8ce6b1;
  --su-good-bg: #142e25;
  --su-warn: #f4d283;
  --su-warn-bg: #332a17;
  --su-danger: #ffadb3;
  --su-danger-bg: #351c24;
  --su-radius: 0;
  --su-space-1: .25rem;
  --su-space-2: .5rem;
  --su-space-3: .75rem;
  --su-space-4: 1rem;
  --su-space-5: 1.5rem;
  --su-space-6: 2rem;
  --su-font-label: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --su-font-display: "Montserrat", "Arial", sans-serif;
  --su-font-body: "Open Sans", "Segoe UI", sans-serif;
  --su-font-editorial: "PT Serif", Georgia, serif;
  --su-paper: #eaf0f2;
  --su-on-paper: #101518;
  --su-secondary: #b79aff;
  --su-tertiary: #39dfbd;
  --su-text-label: .75rem;
}

.shared-ui :where(.su-display) {
  font-family: var(--su-font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.04em; line-height: 1.06;
  overflow-wrap: anywhere;
}
.shared-ui :where(.su-editorial) {
  font-family: var(--su-font-editorial); font-weight: 700;
  text-transform: uppercase; letter-spacing: -.035em; line-height: 1.1;
}
.shared-ui :where(.su-action) {
  font: 700 .75rem/1.4 var(--su-font-label); text-transform: uppercase;
  letter-spacing: .045em; border-radius: 0;
}

/* Adapters own the app palette and typography. Patterns are deliberately opt-in. */
.shared-ui :where(.su-panel) {
  border: 1px solid var(--su-line);
  border-radius: var(--su-radius);
  background: var(--su-surface);
  color: var(--su-ink);
  padding: var(--su-space-4);
}
.shared-ui :where(.su-label) {
  font-family: var(--su-font-label);
  font-size: var(--su-text-label);
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
}
@media screen {
  .shared-ui :focus-visible {
    outline: 2px solid var(--su-focus);
    outline-offset: 3px;
  }
}
@media print {
  :where(.shared-ui) {
    --su-canvas: #fff;
    --su-surface: #fff;
    --su-raised: #fff;
    --su-field: #fff;
    --su-ink: #111;
    --su-muted: #444;
    --su-line: #999;
    --su-control-line: #555;
    --su-accent: #222;
    --su-on-accent: #fff;
    --su-good: #174d2e;
    --su-good-bg: #fff;
    --su-warn: #684200;
    --su-warn-bg: #fff;
    --su-danger: #7c1722;
    --su-danger-bg: #fff;
    --su-paper: #fff;
    --su-on-paper: #111;
  }
}