/* ===========================================================================
   SlimPass Odysseus — branding overlay (single CSS layer).
   Loaded after upstream style.css via a <link> injected before </head>.
   Upgrade-safe: rides upstream cascade vars/classes; verify-branding.sh asserts
   every anchor still exists on each `make prepare`.
   =========================================================================== */

/* --- DM Sans (self-hosted; CSP font-src 'self'; NO Google CDN, LGPD-safe) --- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;            /* variable weight axis */
  font-display: swap;
  src: url('/static/fonts/custom/DMSans-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/static/fonts/custom/DMSans-Italic-Variable.woff2') format('woff2');
}

/* UI font -> DM Sans by overriding the upstream cascade var
   (style.css: `body{ font-family: var(--font-family, 'Fira Code', monospace) }`).
   Single hook, no markup patch. Per-user font picker still wins (theme.js sets
   --font-family inline only when a user actively picks one). */
/* !important beats theme.js's INLINE `--font-family` (it sets the upstream
   default 'Fira Code' on documentElement; a stylesheet !important custom-prop
   wins over an inline non-important one). */
:root { --font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif !important; }

/* A few upstream controls hardcode a sans font (Inter) instead of the var —
   route them through DM Sans too. */
button, input, textarea, select, optgroup,
.list-item, .grow, .sidebar-brand-title, h1, h2, h3, h4, label {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif !important;
}

/* Keep code/pre monospace (Fira Code). Placed AFTER the DM Sans rules so it
   wins for code elements; upstream `code{font-family:inherit}` would otherwise
   inherit DM Sans. */
code, kbd, samp, pre, pre *, .hljs, [class*="language-"] {
  font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* ===========================================================================
   Logo / wordmark — "SlimPass Odysseus": logo dominante, "Odysseus" rótulo
   pequeno (login + welcome interno). Depende das classes injetadas (sp-*) e das
   upstream (.logo / .welcome-name) — cobertas pelo verify canary.
   =========================================================================== */
.sp-logo { width: auto; }

.logo .sp-logo,
.welcome-name .sp-logo {
  display: block;
  margin: 0 auto 0.2rem;
  height: 4rem;              /* marca compacta (SP) -> maior + mais legível */
}
.logo .sp-logo-full { height: 2.6rem; }          /* login: wordmark completo (largo) */
.welcome-name .sp-logo-full { height: 3.4rem; }  /* welcome (hero central): wordmark completo */

.logo .sp-sub,
.welcome-name .sp-sub {
  display: block;
  margin: 0.15rem auto 0;
  text-align: center;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  opacity: 0.5 !important;
  letter-spacing: 0.06em;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--fg) !important;
}
.welcome-name .sp-sub { font-size: 1.1rem !important; }

/* sidebar brand — lockup compacto: logo + "Odysseus" pequeno (estilo marketing) */
/* agrupa a marca perto do hamburger (o upstream right-aligns e deixa um gap estranho) */
.sidebar:not(.right-side) .sidebar-header { justify-content: flex-start !important; }
.sidebar:not(.right-side) .sidebar-brand { margin-left: 0.6rem; }  /* respiro hamburger <-> logo */
.sidebar-brand-title .sp-logo-side {
  height: 1.7rem; width: auto; vertical-align: middle; display: inline-block;
}
.sidebar-brand-title .sp-sub-side {
  font-size: 0.8rem !important; font-weight: 500 !important; opacity: 0.55 !important;
  margin-left: 0.35rem; vertical-align: middle; letter-spacing: 0.03em;
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--fg) !important;
}

/* --- AGPL §13 source link (injected after </footer> on login) --- */
/* fixo no rodapé, centralizado — decoupla do ponto de injeção (o </footer>
   version-label do upstream tem posição própria e deixava o link flutuando). */
.sp-agpl {
  position: fixed; left: 0; right: 0; bottom: 0.7rem;
  text-align: center; font-size: 0.72rem; opacity: 0.45; line-height: 1.4;
  pointer-events: none;   /* não bloqueia cliques; só os links são clicáveis */
}
.sp-agpl a { color: inherit; text-decoration: underline; pointer-events: auto; }

/* ===========================================================================
   Login pré-auth — paleta CLARA por padrão (segue o interior).
   O login.html traz um :root fallback DARK (#282c34) do upstream; um browser
   sem `odysseus-theme` no localStorage (ex.: usuário novo) via o login escuro
   enquanto o interior é claro. Espelhamos aqui a paleta do tema "light".
   Escopo: `html:has(main.card)` — só o login tem <main class="card"> (o interior
   usa .admin-card), então o interior NÃO é afetado. SEM !important de propósito:
   este <link> carrega DEPOIS do <style> inline (vence o fallback dark), mas o
   script que aplica o tema salvo usa style inline no <html> (vence este bloco)
   -> quem escolheu outro tema é respeitado no login também.
   =========================================================================== */
html:has(main.card) {
  --bg: #f0ebe3;
  --fg: #5a5248;
  --panel: #faf6f0;
  --border: #d4cdc2;
  --red: #c47d5a;
}