/* ============================================================================
   Secret Life - identidade visual
   Paleta, tipografia e fundamentos globais. Os componentes especificos (botoes,
   cards, chat, formularios etc.) sao ajustados em app.css usando estas variaveis;
   o shell da aplicacao (sidebar/navbar) e ajustado em MainLayout.razor.css e
   NavMenu.razor.css.
   ============================================================================ */

:root {
    /* Paleta oficial - ver "Identidade visual atual.png" (guia de marca). */
    --sl-black: #0E0709;      /* preto-ameixa: mais quente que o preto puro */
    --sl-maroon: #7A1F2B;
    --sl-red: #B3213F;        /* bordô/vinho de acento (icones, estados ativos, botoes) */
    --sl-wine-deep: #5E1426;
    --sl-alert: #E0242B;      /* vermelho vivo, so para contadores e avisos */
    --sl-gold: #D4A05A;
    --sl-cream: #F5F3EF;

    /* Superficies escuras derivadas do preto/vinho da marca, para dar profundidade
       sem recorrer a cinza neutro (mantem o clima "quente" da identidade).
       Com um pouco de transparencia (em vez de solidas) para dar leveza a
       cards e formularios. */
    /* Fundo dos cards: totalmente transparente (deixa a imagem de fundo aparecer). */
    --sl-card: transparent;
    --sl-surface: rgba(18, 9, 13, 0.9);
    --sl-surface-2: rgba(27, 13, 19, 0.9);
    --sl-surface-3: rgba(40, 19, 28, 0.9);

    --sl-border: rgba(212, 160, 90, 0.35);
    --sl-border-strong: rgba(212, 160, 90, 0.65);
    /* Borda neutra (sem dourado) para chrome de UI - nav, cards de listagem, filtros. */
    --sl-border-neutro: rgba(212, 160, 90, 0.14);
    --sl-shadow-glow: 0 4px 20px rgba(179, 33, 63, 0.3);
    /* Brilho de vela ao passar o mouse nos cards. */
    --sl-shadow-vela: 0 10px 30px rgba(179, 33, 63, 0.22), 0 0 0 1px rgba(212, 160, 90, 0.28);
    --sl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --sl-texto-suave: #c4b0b5;

    --sl-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sl-font-script: 'Allura', cursive;
    --sl-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body {
    background-color: var(--sl-black);
    color: var(--sl-cream);
    font-family: var(--sl-font-sans);
}

/* Atmosfera: luz de vinho vinda do topo e um brilho dourado discreto no canto, como um ambiente a meia-luz. */
body {
    background-image:
        radial-gradient(ellipse 80% 55% at 50% -8%, rgba(122, 31, 43, 0.38), transparent 70%),
        radial-gradient(ellipse 45% 40% at 100% 100%, rgba(212, 160, 90, 0.07), transparent 70%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, .navbar-brand {
    font-family: var(--sl-font-serif);
    color: var(--sl-cream);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Titulos de secao/cards em serifa, com um tom de ouro claro. */
h2, h3 {
    color: #f3e6d3;
}

/* Frases curtas de apoio em italico serifado: tom mais intimo. */
.sl-intimo {
    font-family: var(--sl-font-serif);
    font-style: italic;
    color: var(--sl-gold);
}

a {
    color: var(--sl-gold);
}

a:hover {
    color: var(--sl-cream);
}

::selection {
    background: var(--sl-red);
    color: #fff;
}

/* Acento em script vermelho, usado no nome da marca ("Secret <span class=brand-script>Life</span>")
   e em pontos de destaque editorial (ex.: headline da landing). */
.brand-script {
    font-family: var(--sl-font-script);
    color: var(--sl-red);
    font-size: 1.15em;
    line-height: 1;
}

.brand-gold {
    color: var(--sl-gold);
}

/* Cabecalho de marca reutilizavel (logo + subtitulo) usado nas telas de auth e
   no fallback de "nao autenticado". */
.brand-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.brand-header img {
    max-width: 320px;
    width: 100%;
    height: auto;
}

.brand-header p {
    color: var(--sl-gold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    margin: 0;
}

.auth-shell {
    max-width: 460px;
    margin: 2rem auto;
    padding: 2rem 1.75rem;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 1rem;
    box-shadow: var(--sl-shadow-glow);
}

.auth-submit {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}

.auth-switch {
    margin-top: 1.5rem;
    text-align: center;
    color: #b8a89a;
}

.btn-sm-inline {
    padding: 0.35rem 1.1rem;
    font-size: 0.9rem;
    text-decoration: none !important;
}

/* Scrollbar discreta no tema escuro (Chromium/Edge). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sl-black); }
::-webkit-scrollbar-thumb { background: var(--sl-wine-deep); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--sl-gold); }