/* =====================================================================
   BonitaGestão — Design Tokens (fonte única de verdade visual)
   Carregar ANTES de qualquer outro CSS.

   Base: _NOTA-11-site-redesign.md + _NOTA-01-marca-identidade.md
   Posicionamento: "a agenda inteligente da beleza".

   Identidade: rosa #FF8DB5 é a cor primária; roxo #6C63FF é o acento;
   o DEGRADÊ rosa→roxo (135°) é a assinatura da marca — usar em CTAs e
   acentos, NUNCA como fundo de bloco longo de texto.

   Nunca escrever hex solto nos módulos: consumir estas variáveis.
   ===================================================================== */

:root {
    /* ---------- Marca ---------- */
    --bg-primary:        #ff8db5;  /* rosa principal */
    --bg-primary-dark:   #e3749b;  /* hover / apoio */
    --bg-primary-deep:   #c95c85;  /* texto rosa sobre fundo claro (contraste) */
    --bg-primary-light:  #ffd3e2;  /* chips, fundos de destaque */
    --bg-primary-soft:   #fdf2f7;  /* hover suave, fundos de seção */
    --bg-accent:         #6c63ff;  /* roxo — acento, o "ponto" da logo */
    --bg-accent-dark:    #574ee0;
    --bg-accent-soft:    #efeeff;

    /* Degradê de marca — a assinatura */
    --bg-gradient:       linear-gradient(135deg, #ff6fa3, #6c63ff);
    --bg-gradient-hover: linear-gradient(135deg, #f4548f, #574ee0);
    --bg-gradient-soft:  linear-gradient(135deg, #fdf2f7, #efeeff);

    --bg-primary-shadow: rgba(255, 141, 181, .35);
    --bg-accent-shadow:  rgba(108, 99, 255, .30);
    --bg-primary-ring:   rgba(255, 141, 181, .25); /* focus ring */

    /* ---------- Base clara ---------- */
    --bg-page:    #faf9fc;  /* fundo geral */
    --bg-surface: #ffffff;  /* cartões/superfície */
    --bg-ink:     #2e2e2e;  /* texto principal */
    --bg-text:    #4a4a55;  /* texto corrente */
    --bg-muted:   #6f6f6f;  /* texto secundário */
    --bg-faint:   #9b9b9b;  /* texto terciário / placeholders */
    --bg-border:  #ececec;  /* bordas/linhas */
    --bg-divider: #f1eef5;  /* divisórias internas */

    /* ---------- Seções escuras ("modo editorial") ---------- */
    --bg-dark:         #1c1a22;  /* fundo escuro */
    --bg-dark-soft:    #262330;  /* card sobre fundo escuro */
    --bg-dark-ink:     #f5f3f8;  /* texto claro sobre escuro */
    --bg-dark-muted:   #8a8595;  /* texto secundário escuro */
    --bg-dark-divider: #332f3d;  /* linha divisória escura */

    /* ---------- Status ---------- */
    --bg-success:     #16a34a;
    --bg-success-bg:  #dcfce7;
    --bg-success-ink: #166534;
    --bg-warning:     #f59e0b;
    --bg-warning-bg:  #fef3c7;
    --bg-warning-ink: #92400e;
    --bg-danger:      #dc2626;
    --bg-danger-bg:   #fee2e2;
    --bg-danger-ink:  #991b1b;
    --bg-info:        #6c63ff;
    --bg-info-bg:     #efeeff;
    --bg-info-ink:    #3f38a8;

    /* ---------- Forma ---------- */
    --radius-btn:   12px;  /* botões */
    --radius-card:  16px;  /* cards */
    --radius-selo:  18px;  /* selo/logo */
    --radius-sm:     8px;
    --radius-pill: 999px;

    /* Sombra suave e difusa (guia: 0 6px 20px, baixa opacidade) */
    --shadow-card: 0 6px 20px rgba(28, 26, 34, .06);
    --shadow-pop:  0 12px 30px rgba(28, 26, 34, .10);
    --shadow-cta:  0 8px 24px var(--bg-primary-shadow);

    /* ---------- Tipografia ---------- */
    --font-family: 'Poppins', -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-light:  300;  /* contraste editorial: leve + forte na mesma frase */
    --font-normal: 400;
    --font-medium: 500;
    --font-semi:   600;
    --font-bold:   800;
    --font-black:  900;

    /* ---------- Espaçamento (generoso, com respiro) ---------- */
    --space-section: 3.5rem;  /* padding vertical de seção no mobile */
    --space-card:    1.5rem;

    /* ---------- Compat: nomes legados ---------- */
    --shadow-sm: var(--shadow-card);
    --radius-md: var(--radius-btn);
    --radius-lg: var(--radius-card);
}

@media (min-width: 900px) {
    :root { --space-section: 5.5rem; }
}

/* =====================================================================
   Componentes base compartilhados
   ===================================================================== */

/* ---------- Logo ---------- */
.bg-logo { display: block; height: auto; }
.bg-logo--selo { border-radius: var(--radius-selo); }

/* ---------- Botões ---------- */

/* Primário: degradê da marca, texto branco, raio 12px */
.bg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .8rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--radius-btn);
    background: var(--bg-gradient);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: var(--font-semi);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-cta);
    transition: background .2s, transform .15s, box-shadow .2s, color .2s;
}
.bg-btn:hover {
    background: var(--bg-gradient-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-pop);
    text-decoration: none;
}
.bg-btn:focus-visible {
    outline: 3px solid var(--bg-primary-ring);
    outline-offset: 2px;
}

/* Secundário: contorno rosa, fundo transparente */
.bg-btn--outline {
    background: transparent;
    border-color: var(--bg-primary);
    color: var(--bg-primary-deep);
    box-shadow: none;
}
.bg-btn--outline:hover {
    background: var(--bg-primary);
    border-color: var(--bg-primary);
    color: #fff;
}

/* Neutro sobre fundo claro */
.bg-btn--ghost {
    background: var(--bg-surface);
    color: var(--bg-ink);
    box-shadow: var(--shadow-card);
}
.bg-btn--ghost:hover {
    background: var(--bg-primary-soft);
    color: var(--bg-primary-deep);
}

/* Sobre seção escura */
.bg-btn--on-dark {
    background: var(--bg-surface);
    color: var(--bg-primary-deep);
    box-shadow: none;
}
.bg-btn--on-dark:hover { background: #fff; color: var(--bg-accent); }

.bg-btn--lg { min-height: 56px; font-size: 1.08rem; padding: 1rem 2rem; }
.bg-btn--block { width: 100%; }

/* ---------- Superfícies ---------- */
.bg-card {
    background: var(--bg-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-card);
}

/* ---------- Badges de status ---------- */
.bg-badge {
    display: inline-block;
    padding: .25rem .65rem;
    border-radius: var(--radius-pill);
    font-size: .72rem;
    font-weight: var(--font-semi);
}
.bg-badge--pending   { background: var(--bg-warning-bg); color: var(--bg-warning-ink); }
.bg-badge--confirmed { background: var(--bg-success-bg); color: var(--bg-success-ink); }
.bg-badge--completed { background: var(--bg-info-bg);    color: var(--bg-info-ink); }
.bg-badge--cancelled { background: var(--bg-danger-bg);  color: var(--bg-danger-ink); }

/* ---------- Acentos tipográficos ---------- */

/* Contraste editorial: peso leve + forte na mesma frase */
.bg-light  { font-weight: var(--font-light); }
.bg-strong { font-weight: var(--font-bold); }

/* Texto com o degradê da marca (títulos curtos apenas) */
.bg-text-gradient {
    background: var(--bg-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--bg-primary);
}

/* Label espaçado, estilo "BONITA GESTÃO" */
.bg-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: var(--font-semi);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bg-primary-deep);
}

/* ---------- Seção escura ---------- */
.bg-section-dark {
    background: var(--bg-dark);
    color: var(--bg-dark-ink);
}
.bg-section-dark .bg-eyebrow { color: var(--bg-primary); }
.bg-section-dark .bg-card {
    background: var(--bg-dark-soft);
    color: var(--bg-dark-ink);
    box-shadow: none;
    border: 1px solid var(--bg-dark-divider);
}

/* ---------- Utilitários ---------- */

/* O atributo [hidden] tem que vencer sempre.
   Sem isto, qualquer regra de autor com display (flex, grid, block) supera
   o [hidden]{display:none} da folha do navegador e o elemento continua
   visível mesmo com hidden aplicado via JS. */
[hidden] { display: none !important; }

/* Visível só para leitores de tela (labels de campos com placeholder) */
.bg-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Filete com o degradê — separador de acento */
.bg-rule-gradient {
    height: 4px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-gradient);
}