/* The one shared design system for every page. */
:root {
  color-scheme: light;
  --fu-bg: #ffffff;
  --fu-fg: #111111;
  --fu-muted: #686868;
  --fu-border: color-mix(in srgb, var(--fu-fg) 30%, transparent);
  /* A slightly-lifted surface for controls that want visual separation
     from the page background without a border alone — marker/encode.html
     uses this for its topbar buttons and tap targets. base_public.html's
     own inputs don't need it (border alone is enough there), but the
     token is shared so anything that does need a raised surface has one
     definition to reach for. */
  --fu-input-bg: #ffffff;
  /* Raw hex constants for the ones below live in core/brand-colors.css,
     as a light/dark pair each — this file picks the right one of each
     pair under prefers-color-scheme/data-theme, same as the flat tokens
     above. */
  --fu-accent: var(--fu-brand-vein);
  --fu-error: var(--fu-brand-artery);
  --fu-success: var(--fu-brand-success);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fu-bg: #1a1a1a;
    --fu-fg: #f0f0f0;
    --fu-muted: #a3a3a3;
    --fu-input-bg: #262626;
    --fu-accent: var(--fu-brand-vein-dark);
    --fu-error: var(--fu-brand-artery-dark);
    --fu-success: var(--fu-brand-success-dark);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fu-bg: #1a1a1a;
  --fu-fg: #f0f0f0;
  --fu-muted: #a3a3a3;
  --fu-input-bg: #262626;
  --fu-accent: var(--fu-brand-vein-dark);
  --fu-error: var(--fu-brand-artery-dark);
  --fu-success: var(--fu-brand-success-dark);
}
/* Printed pages always use the light palette (see base_public.html's
   former comment on this, same rationale, now shared): printers render
   backgrounds as-is, and both the dark-mode blocks above out-specificity
   a plain :root selector, hence !important rather than relying on source
   order alone. */
@media print {
  :root {
    color-scheme: light !important;
    --fu-bg: #ffffff !important;
    --fu-fg: #111111 !important;
    --fu-muted: #686868 !important;
    --fu-input-bg: #ffffff !important;
    --fu-accent: var(--fu-brand-vein) !important;
    --fu-error: var(--fu-brand-artery) !important;
    --fu-success: var(--fu-brand-success) !important;
  }
}

/* Generic controls, shared everywhere. */
input[type=text], input[type=email], input[type=password] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  background: var(--fu-bg);
  border: 1px solid var(--fu-border);
  border-radius: 6px;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus {
  outline: 2px solid var(--fu-accent);
  outline-offset: 1px;
}
input:disabled {
  background: color-mix(in srgb, var(--fu-fg) 6%, var(--fu-bg));
  color: var(--fu-muted);
  cursor: not-allowed;
}
.btn-fill {
  padding: 0.65rem 1.3rem;
  font: inherit;
  color: var(--fu-bg);
  background: var(--fu-fg);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
a.btn-fill { display: inline-block; text-decoration: none; }
.btn-fill:hover { background: var(--fu-accent); color: var(--fu-bg); }
/* Icon riding along inside a button/a.btn-fill label. Sized to the
   surrounding text via 1em rather than a fixed size, so it scales if the
   button's own font-size ever changes. */
.btn-icon { display: inline-flex; vertical-align: -0.15em; }
.btn-icon svg { width: 1em; height: 1em; fill: currentColor; }
.btn-icon--before { margin-right: 0.4rem; }
.btn-icon--after { margin-left: 0.4rem; }
.btn-icon--danger { color: var(--fu-error); }

/* Small square icon-only button. */
.icon-btn {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--fu-fg);
  border: 1px solid var(--fu-border);
  border-radius: 6px;
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--fu-accent); }
.icon-btn svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }