/* ============================================
   NOIR & CO. v3 — Design Tokens
   Paleta: preto profundo, dourado/champagne, bronze, marfim
   ============================================ */

:root {
  --color-black:          #0a0806;
  --color-black-soft:     #120f0b;
  --color-charcoal:       #1a1612;
  --color-charcoal-light: #241f19;

  --color-gold:           #c9a45c;
  --color-gold-bright:    #e8c878;
  --color-gold-dim:       #8a703f;
  --color-bronze:         #9c7a4a;
  --color-champagne:      #e6d4ad;

  --color-ivory:          #f3ecdd;
  --color-ivory-dim:      #cfc6b4;
  --color-muted:          #9a9286;

  --color-success:        #7a9b6e;
  --color-danger:         #b06a5a;

  --font-display: 'Cormorant', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  --border-hairline:        1px solid rgba(201,164,92,0.25);
  --border-hairline-bright: 1px solid rgba(201,164,92,0.5);

  --ease-out:      cubic-bezier(0.16,1,0.3,1);
  --duration-base: 0.4s;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--color-black);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 3px; }

/* --- Label mono compartilhado --- */
.label-mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--color-gold);
}

/* --- Brand mark --- */
.brand-mark { display:flex; align-items:center; gap:0.75rem; }

/* Logo como imagem — substitui o ícone SVG e o texto de texto */
.brand-mark__logo {
  display: block;
  height: 42px;          /* altura fixa — largura se ajusta proporcionalmente */
  width: auto;
  max-width: 180px;      /* evita que imagens muito largas quebrem o header */
  object-fit: contain;
  object-position: left center;
}

/* No sidebar do admin (fundo mais escuro) — um pouco maior */
.admin-sidebar__brand .brand-mark__logo {
  height: 38px;
  max-width: 160px;
}

/* Nos cards de login/access — centralizado e um pouco maior */
.login-card__brand .brand-mark__logo,
.admin-access-card__brand .brand-mark__logo {
  height: 52px;
  max-width: 200px;
  margin: 0 auto;
}

.brand-mark__icon {
  width:34px; height:34px;
  border: var(--border-hairline-bright);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; position:relative;
}
.brand-mark__icon::before {
  content:''; position:absolute; width:1px; height:16px; background:var(--color-gold);
}
.brand-mark__icon::after {
  content:''; position:absolute; width:16px; height:1px; background:var(--color-gold);
}
.brand-mark__text {
  font-family: var(--font-display);
  font-size:1.15rem; letter-spacing:0.06em; font-weight:500;
  color:var(--color-ivory); white-space:nowrap;
}
.brand-mark__text em { font-style:normal; color:var(--color-gold); font-weight:600; }

/* --- Botões --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.95rem 2rem;
  font-family:var(--font-mono); font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.1em;
  border:var(--border-hairline-bright); background:transparent; color:var(--color-ivory);
  transition:all var(--duration-base) var(--ease-out); white-space:nowrap;
}
.btn:hover { border-color:var(--color-gold-bright); background:rgba(201,164,92,0.08); }
.btn--solid {
  background:linear-gradient(135deg, var(--color-gold) 0%, var(--color-bronze) 100%);
  color:var(--color-black); border-color:transparent;
}
.btn--solid:hover {
  background:linear-gradient(135deg, var(--color-gold-bright) 0%, var(--color-gold) 100%);
}
.btn--ghost { border-color:rgba(201,164,92,0.25); color:var(--color-ivory-dim); }
.btn--ghost:hover { color:var(--color-ivory); }
.btn:disabled { opacity:0.4; cursor:not-allowed; }

/* --- Status badge --- */
.status-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.55rem 1.1rem; border:var(--border-hairline);
  font-family:var(--font-mono); font-size:0.68rem;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--color-ivory-dim);
}
.status-badge__dot { width:7px; height:7px; border-radius:50%; background:var(--color-muted); flex-shrink:0; }
.status-badge[data-status="disponivel"]   .status-badge__dot { background:var(--color-success); box-shadow:0 0 8px rgba(122,155,110,0.7); }
.status-badge[data-status="indisponivel"] .status-badge__dot { background:var(--color-danger); }

/* --- Form fields (compartilhado) --- */
.form-field { display:flex; flex-direction:column; gap:0.5rem; }
.form-field label {
  font-family:var(--font-mono); font-size:0.68rem;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--color-ivory-dim);
}
.form-field input,
.form-field textarea,
.form-field select {
  background:var(--color-charcoal); border:var(--border-hairline);
  color:var(--color-ivory); padding:0.85rem 1rem;
  font-family:var(--font-body); font-size:0.95rem; width:100%;
  transition:border-color var(--duration-base) var(--ease-out);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-color:var(--color-gold-bright); }
.form-field textarea { resize:vertical; min-height:100px; }

/* --- Toast --- */
.toast {
  position:fixed; bottom:2rem; right:2rem;
  background:var(--color-charcoal); border:var(--border-hairline-bright);
  color:var(--color-ivory); padding:0.9rem 1.4rem;
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.03em;
  z-index:999; opacity:0; transform:translateY(12px);
  transition:all var(--duration-base) var(--ease-out);
  pointer-events:none; max-width:320px;
}
.toast.is-visible { opacity:1; transform:translateY(0); }

/* --- Scrollbar --- */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--color-black); }
::-webkit-scrollbar-thumb { background:var(--color-charcoal-light); border:1px solid rgba(201,164,92,0.15); }
::-webkit-scrollbar-thumb:hover { background:var(--color-gold-dim); }