/* =========================================================================
   GRUPO JOSUÉ'S — Design System (foundation)
   Arquivo ADITIVO: define tokens consistentes e melhorias globais seguras
   (acessibilidade, foco, scrollbar, tipografia) sem alterar componentes
   já existentes. Páginas podem adotar as utilidades .ds-* gradualmente.
   ========================================================================= */

:root {
    /* --- Cores de marca (alinhadas ao tema atual) --- */
    --ds-primary: #E50914;
    --ds-primary-600: #c40811;
    --ds-primary-700: #a30710;
    --ds-bg: #050505;
    --ds-surface: #111114;
    --ds-surface-2: #18181c;
    --ds-text: #ffffff;
    --ds-text-muted: #b3b3b3;
    --ds-border: rgba(255, 255, 255, 0.08);

    /* --- Feedback --- */
    --ds-success: #1db954;
    --ds-warning: #f5a623;
    --ds-danger: #e50914;
    --ds-info: #2d9cdb;

    /* --- Escala de espaçamento (4pt) --- */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 24px;
    --ds-space-6: 32px;
    --ds-space-7: 48px;
    --ds-space-8: 64px;

    /* --- Raios --- */
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-xl: 24px;
    --ds-radius-pill: 999px;

    /* --- Sombras --- */
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ds-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --ds-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    /* --- Tipografia --- */
    --ds-font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
    --ds-font-display: 'Oswald', sans-serif;

    /* --- Transições --- */
    --ds-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Rolagem suave (respeitando preferências de movimento) --- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Acessibilidade: foco visível e consistente para teclado --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(229, 9, 20, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Seleção de texto --- */
::selection {
    background: var(--ds-primary);
    color: #fff;
}

/* --- Scrollbar discreta (navegadores WebKit) --- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--ds-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); background-clip: content-box; }

/* --- Imagens nunca estouram o container --- */
img { max-width: 100%; }

/* =========================================================================
   UTILIDADES OPT-IN (.ds-*) — use onde quiser padronizar novos elementos
   ========================================================================= */
.ds-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
    transition: transform var(--ds-transition), box-shadow var(--ds-transition);
}
.ds-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ds-shadow-lg);
}

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-sans);
    font-weight: 600;
    border: none;
    border-radius: var(--ds-radius-pill);
    padding: 0.7rem 1.6rem;
    cursor: pointer;
    transition: transform var(--ds-transition), background var(--ds-transition), box-shadow var(--ds-transition);
}
.ds-btn:active { transform: translateY(1px); }

.ds-btn-primary {
    background: var(--ds-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(229, 9, 20, 0.35);
}
.ds-btn-primary:hover { background: var(--ds-primary-600); transform: translateY(-2px); }

.ds-btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid var(--ds-border);
}
.ds-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--ds-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ds-text);
}

/* Skeleton de carregamento reutilizável */
.ds-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
    background-size: 400% 100%;
    animation: ds-shimmer 1.4s ease infinite;
    border-radius: var(--ds-radius-sm);
}
@keyframes ds-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }