/* ── base.css — camada 2 (ITCSS): reset, bridge Bootstrap, tipografia,
 * layout de página, auth e scrollbar. Carregado em TODAS as páginas
 * (backoffice e site), a seguir ao Bootstrap e ao branding-<tenant>.css.
 *
 * Os tokens --am-* vivem no branding-<tenant>.css (per-tenant). Este
 * ficheiro nunca declara cores literais — só consome tokens. */

/* ── Bridge Bootstrap → tokens da marca ──────────────────────────
 * Redefinir as variáveis --bs-* elimina a luta de especificidade:
 * os componentes e utilitários do Bootstrap (.text-muted, .bg-body,
 * placeholders, borders…) passam a herdar a marca sem overrides
 * !important espalhados pelos componentes. */
:root {
  --bs-body-bg: var(--am-bg);
  --bs-body-color: var(--am-text);
  --bs-body-font-family: var(--am-font-body);
  --bs-heading-color: var(--am-text);
  --bs-emphasis-color: var(--am-base);
  --bs-secondary-color: var(--am-text-muted);   /* .text-muted, texto auxiliar */
  --bs-tertiary-color: var(--am-text-dim);
  --bs-secondary-bg: var(--am-bg-alt);
  --bs-tertiary-bg: var(--am-bg-alt);
  --bs-border-color: var(--am-border);
  --bs-border-color-translucent: var(--am-border);
  --bs-link-color: var(--am-text);
  --bs-link-hover-color: var(--am-base);
}

/* ── Base reset ──────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--am-bg);
  color: var(--am-text);
  font-family: var(--am-font-body);
  font-size: var(--am-fs-md);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--am-font-heading);
  font-weight: 400;
  color: var(--am-text);
  line-height: 1.2;
  letter-spacing: 0;
}

h1 {
  font-family: var(--am-font-body);
  font-size: var(--am-fs-2xl);
  font-weight: 200;
  line-height: 1.15;
}

h2 {
  font-family: var(--am-font-body);
  font-size: var(--am-fs-xl);
  font-weight: 300;
}

h3 {
  font-family: var(--am-font-sub);
  font-size: var(--am-fs-lg);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h4 {
  font-size: clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.767), 1.5rem);
}

h5 { font-size: var(--am-fs-md); }
h6 { font-size: var(--am-fs-sm); }

p { margin-bottom: 1rem; }

small, .small { font-size: var(--am-fs-sm); }

a {
  color: var(--am-text);
  text-decoration: none;
  transition: color .15s;
}
a:hover { color: var(--am-base); }

/* Label/caption style */
.am-label {
  font-family: var(--am-font-sub);
  font-size: var(--am-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--am-text-muted);
}

/* ── Page layout ─────────────────────────────────────────────── */
.am-page {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--am-sp-xs);
  padding-block: var(--am-sp-md);
}

.am-page-narrow {
  max-width: 620px;
  margin-inline: auto;
  padding-inline: var(--am-sp-xs);
  padding-block: var(--am-sp-md);
}

/* ── Auth pages ──────────────────────────────────────────────── */
.am-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--am-sp-md);
}

.am-auth-card {
  width: 100%;
  max-width: 440px;
  background-color: var(--am-bg-card);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-lg);
  padding: 2.5rem 2rem;
}

.am-auth-logo {
  font-family: var(--am-font-heading);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--am-text);
  text-align: center;
  margin-bottom: 0.25rem;
}

.am-auth-sub {
  font-family: var(--am-font-sub);
  font-size: var(--am-fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--am-text-muted);
  text-align: center;
  margin-bottom: 2rem;
}

/* ── Scrollbar (Webkit) ──────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--am-bg); }
::-webkit-scrollbar-thumb        { background: var(--am-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(203,191,176,.3); }

/* ── Responsive base ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
  body { font-size: 1rem; }

  .am-auth-card { padding: 2rem 1.25rem; }

  /* Give the main container a bit more breathing room on small screens */
  .container { padding-left: 1rem; padding-right: 1rem; }

  /* Page-header h2 scales down so long titles don't push buttons off-screen */
  .container h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
}