/* =========================================================
   THEME.CSS — Design System único do Barber SaaS
   Fonte da verdade para cores, tipografia, espaçamento, raio,
   sombra e foco. Carregado ANTES do CSS de cada página.

   ⭐ White-label: --accent / --accent-alt têm dourado como padrão,
   mas o script.js os sobrescreve com a cor escolhida pela barbearia
   (plano Profissional). Não troque esses nomes sem ajustar o JS.
   ========================================================= */

:root {
    /* ---- Marca / Accent (sobrescrevível por barbearia) ---- */
    --accent: #f59e0b;              /* dourado padrão */
    --accent-2: #fbbf24;            /* dourado claro p/ gradientes/hover */
    --accent-contrast: #1a1206;     /* texto sobre o accent */
    --accent-glow: rgba(245, 158, 11, 0.35);
    --accent-alt: var(--accent);    /* alias: mata o conflito verde×dourado */

    /* ---- Superfícies ---- */
    --bg-main: #09090b;             /* fundo base (zinc-950) */
    --bg-color: var(--bg-main);     /* alias usado na página de agendamento */
    --bg-elev: #121214;             /* fundo elevado */
    --bg-card: rgba(24, 24, 27, 0.65); /* card translúcido (glass) */
    --card-bg: #18181b;             /* card sólido (alias agendamento) */
    --surface: #18181b;

    /* ---- Texto ---- */
    --text-light: #fafafa;
    --primary: var(--text-light);   /* alias agendamento (texto principal) */
    --text-muted: #a1a1aa;
    --secondary: var(--text-muted); /* alias agendamento (texto secundário) */

    /* ---- Linhas & estados semânticos ---- */
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;

    /* ---- Tipografia ---- */
    --font-display: 'Oswald', 'Poppins', sans-serif;
    --font-body: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
    --fs-xs: 0.78rem;
    --fs-sm: 0.9rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.6rem;
    --fs-2xl: 2.2rem;
    --fs-3xl: clamp(2.4rem, 6vw, 3.4rem);

    /* ---- Espaçamento (grade 8pt) ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* ---- Raio ---- */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    /* --radius-card: compat com style.css antigo (era 18px) */

    /* ---- Sombras ---- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.35);
    --shadow: var(--shadow-md);     /* alias agendamento */
    --shadow-glow: 0 8px 30px var(--accent-glow);

    /* ---- Movimento ---- */
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
}

/* =========================================================
   POLIMENTO GLOBAL SEGURO (apenas melhora, não quebra layout)
   ========================================================= */

html {
    scroll-behavior: smooth;
}

/* Anel de foco acessível para navegação por teclado */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Tudo clicável vira "mãozinha" */
button,
[role="button"],
.btn,
.btn-action,
.nav-item,
label[for] {
    cursor: pointer;
}

/* Seleção de texto na cor da marca */
::selection {
    background: var(--accent);
    color: var(--accent-contrast);
}

/* Scrollbar discreta e moderna */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
    background-clip: content-box;
}

/* =========================================================
   CAMADA BASE DE COMPONENTES (Fase 2)
   Seletores de baixa especificidade / classes opt-in.
   NÃO sobrescrevem .input-dark, .premium-input, .btn-action etc.
   ========================================================= */

/* --- Baseline para campos "crus" (sem classe própria) --- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([class]),
select:not([class]),
textarea:not([class]) {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    color: var(--text-light);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    outline: none;
    transition: var(--transition);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([class]):focus,
select:not([class]):focus,
textarea:not([class]):focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
::placeholder { color: #52525b; }

/* --- Botões reutilizáveis (opt-in: use a classe .btn) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-md);
    line-height: 1;
    padding: 14px 22px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent-contrast);
    box-shadow: 0 6px 18px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 10px 26px var(--accent-glow); }

.btn-ghost {
    background: transparent;
    color: var(--text-light);
    border-color: var(--border-strong);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }

.btn-danger {
    background: var(--danger);
    color: #fff;
}

/* --- Card reutilizável (opt-in: .card) --- */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* --- Badge/chip reutilizável (opt-in: .badge) --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.badge.badge-success { color: var(--success); border-color: rgba(16, 185, 129, 0.3); }
.badge.badge-danger { color: var(--danger); border-color: rgba(239, 68, 68, 0.3); }
.badge.badge-accent { color: var(--accent); border-color: var(--accent-glow); }