/*
============================================================
HUB FINANCEIRO — DESIGN SYSTEM
Versão: 6.0.0
============================================================
Este arquivo contém somente fundamentos globais:
cores, tipografia, espaçamento, sombras, bordas e movimentos.
============================================================
*/

:root {
    /* Identidade */
    --hub-color-cyan: #22d3ee;
    --hub-color-blue: #3b82f6;
    --hub-color-violet: #8b5cf6;
    --hub-color-green: #22c55e;
    --hub-color-yellow: #f59e0b;
    --hub-color-red: #f43f5e;
    --hub-color-gold: #facc15;

    /* Superfícies */
    --hub-bg-page: #050816;
    --hub-bg-page-secondary: #080d1f;

    --hub-surface-1: rgba(15, 23, 42, 0.82);
    --hub-surface-2: rgba(8, 13, 31, 0.90);
    --hub-surface-3: rgba(255, 255, 255, 0.035);
    --hub-surface-hover: rgba(255, 255, 255, 0.055);

    /* Texto */
    --hub-text-primary: #f8fafc;
    --hub-text-secondary: #cbd5e1;
    --hub-text-muted: #94a3b8;
    --hub-text-subtle: #64748b;
    --hub-text-disabled: #475569;

    /* Bordas */
    --hub-border-soft: rgba(255, 255, 255, 0.07);
    --hub-border-default: rgba(255, 255, 255, 0.10);
    --hub-border-strong: rgba(255, 255, 255, 0.16);

    /* Estados semânticos */
    --hub-info: var(--hub-color-blue);
    --hub-success: var(--hub-color-green);
    --hub-warning: var(--hub-color-yellow);
    --hub-danger: var(--hub-color-red);
    --hub-premium: var(--hub-color-violet);
    --hub-intelligence: var(--hub-color-cyan);

    /* Gradientes */
    --hub-gradient-brand:
        linear-gradient(
            135deg,
            var(--hub-color-cyan),
            var(--hub-color-blue) 52%,
            var(--hub-color-violet)
        );

    --hub-gradient-panel:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, 0.88),
            rgba(8, 13, 31, 0.76)
        );

    --hub-gradient-page:
        radial-gradient(
            circle at 8% 4%,
            rgba(34, 211, 238, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 6%,
            rgba(139, 92, 246, 0.17),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            var(--hub-bg-page),
            var(--hub-bg-page-secondary) 55%,
            var(--hub-bg-page)
        );

    /* Tipografia */
    --hub-font-family:
        "Inter",
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --hub-font-size-xs: 0.75rem;
    --hub-font-size-sm: 0.875rem;
    --hub-font-size-md: 1rem;
    --hub-font-size-lg: 1.25rem;
    --hub-font-size-xl: 1.75rem;
    --hub-font-size-2xl: 2.25rem;
    --hub-font-size-hero: clamp(2.5rem, 5vw, 4.25rem);

    --hub-line-height-tight: 1.05;
    --hub-line-height-normal: 1.5;
    --hub-line-height-relaxed: 1.7;

    --hub-font-medium: 500;
    --hub-font-semibold: 600;
    --hub-font-bold: 700;
    --hub-font-extrabold: 800;
    --hub-font-black: 900;

    /* Espaçamento oficial */
    --hub-space-1: 0.25rem;
    --hub-space-2: 0.5rem;
    --hub-space-3: 0.75rem;
    --hub-space-4: 1rem;
    --hub-space-5: 1.5rem;
    --hub-space-6: 2rem;
    --hub-space-7: 3rem;
    --hub-space-8: 4rem;

    /* Raios */
    --hub-radius-sm: 0.75rem;
    --hub-radius-md: 1rem;
    --hub-radius-lg: 1.375rem;
    --hub-radius-xl: 1.75rem;
    --hub-radius-full: 999px;

    /* Sombras */
    --hub-shadow-sm:
        0 8px 24px rgba(0, 0, 0, 0.18);

    --hub-shadow-md:
        0 20px 55px rgba(0, 0, 0, 0.30);

    --hub-shadow-lg:
        0 30px 90px rgba(0, 0, 0, 0.42);

    --hub-shadow-brand:
        0 18px 42px rgba(59, 130, 246, 0.24);

    /* Movimento */
    --hub-duration-fast: 140ms;
    --hub-duration-normal: 220ms;
    --hub-duration-slow: 420ms;

    --hub-ease-standard:
        cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Layout */
    --hub-container-width: 1240px;
    --hub-container-padding: 15px;
}

/* Base opcional: só atua quando a classe hub-ui é aplicada */
.hub-ui {
    color: var(--hub-text-primary);
    font-family: var(--hub-font-family);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

.hub-container {
    width:
        min(
            var(--hub-container-width),
            calc(100% - 30px)
        );

    margin-inline: auto;
}

.hub-surface {
    border:
        1px solid
        var(--hub-border-soft);

    border-radius:
        var(--hub-radius-lg);

    background:
        var(--hub-gradient-panel);

    box-shadow:
        var(--hub-shadow-md);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);
}

.hub-focusable:focus-visible {
    outline:
        3px solid
        rgba(34, 211, 238, 0.32);

    outline-offset: 3px;
}

.hub-hidden {
    display: none !important;
}

.hub-visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

@media (max-width: 767px) {
    :root {
        --hub-container-padding: 10px;
        --hub-space-7: 2.25rem;
        --hub-space-8: 3rem;
    }

    .hub-container {
        width: calc(100% - 20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-ui *,
    .hub-ui *::before,
    .hub-ui *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}