/* Shared x0 customer theme — clean white / black with amber ruru-eye accent.
   Used by marketing chrome and the authenticated app shell. */

:root {
  --x0-ink: #111111;
  --x0-ink-soft: #2a2a2a;
  --x0-muted: #6b6b6b;
  --x0-border: #e6e6e6;
  --x0-border-strong: #111111;
  --x0-bg: #ffffff;
  --x0-bg-soft: #f7f7f7;
  --x0-surface: #ffffff;
  --x0-brand: #111111;
  --x0-brand-soft: #2a2a2a;
  --x0-accent: #e5a00d;
  --x0-accent-soft: #f7e7bf;
  --x0-ok: #1a7a32;
  --x0-ok-bg: #e8f6eb;
  --x0-warn: #8a6d00;
  --x0-warn-bg: #fff3c4;
  --x0-bad: #9b1c1c;
  --x0-bad-bg: #ffe3e3;
  --x0-off: #bdbdbd;
  --x0-font: "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
  font-family: var(--x0-font);
  line-height: 1.5;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --x0-ink: #f2f2f2;
  --x0-ink-soft: #e0e0e0;
  --x0-muted: #a3a3a3;
  --x0-border: #333333;
  --x0-border-strong: #f2f2f2;
  --x0-bg: #0f0f0f;
  --x0-bg-soft: #1a1a1a;
  --x0-surface: #161616;
  --x0-brand: #f2f2f2;
  --x0-brand-soft: #e0e0e0;
  --x0-accent: #e5a00d;
  --x0-accent-soft: #3d3010;
  --x0-ok: #5bd67a;
  --x0-ok-bg: #14331c;
  --x0-warn: #f0c14a;
  --x0-warn-bg: #3d3010;
  --x0-bad: #f07171;
  --x0-bad-bg: #3a1515;
  --x0-off: #555555;
}

/* Pictogram helpers */
.x0-ico {
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  vertical-align: -0.25em;
  background: currentColor;
  mask: var(--x0-ico) center / contain no-repeat;
  -webkit-mask: var(--x0-ico) center / contain no-repeat;
}
.x0-ico-lg {
  width: 1.75rem;
  height: 1.75rem;
}
.x0-ico-xl {
  width: 2.5rem;
  height: 2.5rem;
}
.card-title-with-ico {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.65rem;
}
.card-title-with-ico h1,
.card-title-with-ico h2 {
  margin: 0;
}
.card-title-with-ico .x0-ico {
  color: var(--x0-ink);
  flex-shrink: 0;
}
.card-title-with-ico .x0-ico.accent {
  color: var(--x0-accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--x0-ink);
  color: var(--x0-bg);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid var(--x0-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.25;
  white-space: nowrap;
  vertical-align: middle;
}
.btn:hover {
  background: var(--x0-ink-soft);
  border-color: var(--x0-ink-soft);
}
.btn.secondary,
.btn.btn-cancel {
  background: #faf6f1;
  color: #7a4a18;
  border-color: #e0c4a0;
}
.btn.secondary:hover,
.btn.btn-cancel:hover {
  background: #f3e6d4;
  border-color: #c98a3e;
  color: #5c3510;
}
.btn.btn-go {
  background: #eef6f0;
  color: #1a5c2e;
  border-color: #a8d4b4;
}
.btn.btn-go:hover {
  background: #dcefe2;
  border-color: #6bb582;
  color: #0f3d1c;
}
.btn .x0-ico,
.btn .x0-picto {
  width: 1.05rem;
  height: 1.05rem;
  color: inherit;
  background: currentColor;
}

.row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.row-with-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}
.row-with-actions > .row-main {
  flex: 1 1 12rem;
  min-width: 0;
}

.muted { color: var(--x0-muted); }

/* Glossary term links */
a.gloss {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--x0-accent);
}
a.gloss:hover {
  color: var(--x0-ink);
  text-decoration-style: solid;
}