/*
|--------------------------------------------------------------------------
| YOUTUBE BB RANK
| BASE CSS
|--------------------------------------------------------------------------
| Estilos globais seguros e variáveis partilhadas.
| Não definir aqui fundos ou layouts específicos das páginas.
|--------------------------------------------------------------------------
*/

:root {
    /* CORES BASE */

    --bb-color-background: #0b0d11;
    --bb-color-surface: #12151b;
    --bb-color-surface-hover: #1b2029;
    --bb-color-surface-active: #252b36;

    --bb-color-border: #292d35;

    --bb-color-text: #f1f3f6;
    --bb-color-text-secondary: #b0b7c3;
    --bb-color-text-muted: #7e8795;

    /* CORES DE DESTAQUE */

    --bb-color-primary: #ff2028;
    --bb-color-primary-hover: #e20f18;

    --bb-color-success: #22c55e;
    --bb-color-warning: #f59e0b;
    --bb-color-danger: #ef4444;
    --bb-color-info: #3b82f6;

    /* TIPOGRAFIA */

    --bb-font-family:
        Arial,
        Helvetica,
        sans-serif;

    --bb-font-size-small: 12px;
    --bb-font-size-base: 14px;
    --bb-font-size-large: 18px;

    /* ESPAÇAMENTOS */

    --bb-space-1: 4px;
    --bb-space-2: 8px;
    --bb-space-3: 12px;
    --bb-space-4: 16px;
    --bb-space-5: 24px;
    --bb-space-6: 32px;

    /* BORDAS */

    --bb-radius-small: 6px;
    --bb-radius-medium: 10px;
    --bb-radius-large: 16px;

    /* SOMBRAS */

    --bb-shadow-card:
        0 8px 24px rgba(0, 0, 0, 0.18);

    --bb-shadow-dropdown:
        0 12px 30px rgba(0, 0, 0, 0.35);

    /* LAYOUT */

    --bb-container-width: 1500px;

    /* IDENTIDADE VISUAL: DARK PREMIUM */
    --bb-color-background-elevated: #111318;
    --bb-color-surface-raised: #1b1f27;
    --bb-color-surface-overlay: #20242c;
    --bb-color-border-subtle: #22262e;
    --bb-color-border-strong: #3a404b;

    /* DESTAQUE E ESTADOS */
    --bb-color-primary-soft: rgba(255, 0, 0, 0.12);
    --bb-color-primary-border: rgba(255, 0, 0, 0.35);
    --bb-color-success-soft: rgba(34, 197, 94, 0.12);
    --bb-color-warning-soft: rgba(245, 158, 11, 0.12);
    --bb-color-danger-soft: rgba(239, 68, 68, 0.12);
    --bb-color-info-soft: rgba(59, 130, 246, 0.12);

    /* ESCALA TIPOGRÁFICA */
    --bb-font-size-xs: 11px;
    --bb-font-size-medium: 16px;
    --bb-font-size-xl: 22px;
    --bb-font-size-2xl: 28px;
    --bb-font-size-3xl: 36px;
    --bb-line-height-tight: 1.2;
    --bb-line-height-base: 1.5;
    --bb-line-height-relaxed: 1.65;
    --bb-font-weight-normal: 400;
    --bb-font-weight-medium: 500;
    --bb-font-weight-semibold: 600;
    --bb-font-weight-bold: 700;
    --bb-font-weight-extrabold: 800;

    /* ESCALA DE ESPAÇAMENTO */
    --bb-space-7: 40px;
    --bb-space-8: 48px;
    --bb-space-9: 64px;

    /* BORDAS E COMPONENTES */
    --bb-radius-xs: 4px;
    --bb-radius-xl: 20px;
    --bb-radius-pill: 999px;
    --bb-border-width: 1px;

    /* SOMBRAS E PROFUNDIDADE */
    --bb-shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.26);
    --bb-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.45);
    --bb-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.2);

    /* TRANSIÇÕES */
    --bb-transition-fast: 120ms ease;
    --bb-transition-base: 180ms ease;
    --bb-transition-slow: 260ms ease;

    /* LARGURAS DE CONTEÚDO */
    --bb-container-narrow: 960px;
    --bb-container-wide: 1800px;

    /* CAMADAS */
    --bb-z-header: 1000;
    --bb-z-dropdown: 1100;
    --bb-z-overlay: 1200;
}

/*
|--------------------------------------------------------------------------
| BOX SIZING
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| MEDIA
|--------------------------------------------------------------------------
*/

img,
video {
    max-width: 100%;
}

/*
|--------------------------------------------------------------------------
| ACESSIBILIDADE
|--------------------------------------------------------------------------
*/

:focus-visible {
    outline: 2px solid var(--bb-color-info);
    outline-offset: 3px;
    box-shadow: var(--bb-shadow-focus);
}


/*
|--------------------------------------------------------------------------
| FUNDO BASE DAS PÁGINAS ADMINISTRATIVAS
|--------------------------------------------------------------------------
*/

body {
    background-color: var(--bb-color-background, #0f1115);
    color: var(--bb-color-text, #e6e8ec);
}