/* ============================================================
   global.css — CryptoVision GO 2026
   Base de tokens, reset, tipografia fluida e shell responsivo.
   Carregar SEMPRE antes de qualquer style*.css.

   Especificidade ZERO via :where() — não conflita com CSS legado
   (style3.css, alerts.css, plan-icons.css, etc.).
   ============================================================ */

/* ---------- 1. RESET MODERNO ---------- */
*, *::before, *::after { box-sizing: border-box; }

:where(html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
}

:where(html) {
    /* CRÍTICO: ancora a base em 16px para neutralizar a herança
       do font-size do navegador/SO. É o que mata o efeito "zoom"
       em monitores com DPI 125%/150% e em browsers com font-size
       customizado. Mantém Ctrl+/Ctrl- funcionando normalmente. */
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* Evita scroll horizontal em ultrawide com elementos largos */
    overflow-x: hidden;
}

:where(body) {
    min-height: 100vh;
    line-height: 1.5;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:where(img, picture, video, canvas, svg) {
    display: block;
    max-width: 100%;
}

:where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
}

/* Reset de botão para uso semântico (avatar, ícones, etc) sem
   herdar estilos nativos do navegador */
:where(button) {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: inherit;
}

:where(a) { color: inherit; }

/* ---------- 2. DESIGN TOKENS ---------- */
:root {
    /* Espaçamento — escala de 4px (derivada, nada hardcoded) */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* Tipografia fluida — clamp(min, preferido, max).
       Cresce suavemente entre breakpoints sem inflar em 4K. */
    --fs-xs:   clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);   /* 11–12px */
    --fs-sm:   clamp(0.75rem,  0.71rem + 0.2vw,  0.8125rem);  /* 12–13px */
    --fs-base: clamp(0.875rem, 0.83rem + 0.25vw, 0.9375rem);  /* 14–15px */
    --fs-md:   clamp(0.9375rem, 0.89rem + 0.25vw, 1rem);      /* 15–16px */
    --fs-lg:   clamp(1rem,     0.94rem + 0.3vw,  1.125rem);   /* 16–18px */
    --fs-xl:   clamp(1.125rem, 1.04rem + 0.4vw,  1.25rem);    /* 18–20px */
    --fs-2xl:  clamp(1.25rem,  1.13rem + 0.6vw,  1.5rem);     /* 20–24px */
    --fs-3xl:  clamp(1.5rem,   1.33rem + 0.85vw, 2rem);       /* 24–32px */

    /* Padding global responsivo do shell */
    --shell-pad-x: clamp(1rem, 0.5rem + 1.5vw, 2rem);
    --shell-pad-y: clamp(0.75rem, 0.5rem + 0.5vw, 1rem);

    /* Largura máxima do shell — limita estiramento em telas grandes */
    --shell-max:    1440px;   /* dashboards padrão */
    --shell-max-lg: 1680px;   /* trading view (mais denso) */
    --shell-max-xl: 1920px;   /* tabelas grandes */

    /* Densidade — multiplicador para ajustes finos sem rewrite */
    --density: 1;

    /* Raios e elevação */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px var(--cv-000000-a0180, rgba(0, 0, 0, 0.18));
    --shadow-md: 0 4px 12px var(--cv-000000-a0220, rgba(0, 0, 0, 0.22));
    --shadow-lg: 0 16px 40px var(--cv-000000-a0450, rgba(0, 0, 0, 0.45));

    /* Animação */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 280ms;

    /* Breakpoints (referência para uso em JS via getComputedStyle) */
    --bp-sm:  640px;
    --bp-md:  768px;
    --bp-lg:  1024px;
    --bp-xl:  1280px;
    --bp-2xl: 1536px;
    --bp-3xl: 1920px;

    /* ---------- PALETA CANÔNICA (dourado flat CryptoVision) ----------
       Base de cores única do app. Definida aqui para que QUALQUER página
       que carregue global.css já herde o tema, mesmo sem style3.css.
       Onde style3.css é carregado (depois), seus valores prevalecem —
       são idênticos, então não há conflito. Use sempre estes tokens
       em vez de hardcodar #f0b90b. */
    --primary:        #f0b90b;
    --primary-dark:   #d4a017;
    --primary-light:  #f7d54a;
    --primary-hover:  #e6a800;
    --text-accent:    #f0b90b;

    /* Fundos (flat, escuro) */
    --main-bg:    var(--cv-0b0e11, #0b0e11);
    --card-bg:    var(--cv-0b0e11, #0b0e11);
    --card-hover: var(--cv-141820, #141820);
    --bg-light:   var(--cv-1e2329, #1e2329);
    --bg-lighter: var(--cv-2b3139, #2b3139);

    /* Texto */
    --text-color:     var(--cv-ffffff, #ffffff);
    --text-primary:   var(--cv-ffffff, #ffffff);
    --text-secondary: var(--cv-b7bdc6, #b7bdc6);
    --text-muted:     var(--cv-848e9c, #848e9c);

    /* Status */
    --success: #02c076;
    --danger:  #f84960;
    --warning: #f0b90b;
    --info:    #3b82f6;

    /* Bordas */
    --border-color: var(--cv-ffffff-a0060, rgba(255, 255, 255, 0.06));
}

/* ---------- 3. CONTROLE DE ESCALA EM MONITORES GRANDES ----------
   Aqui mora a correção da percepção de "zoom".
   Em vez de deixar o layout inflar livremente em 1920+, mantemos
   a base ancorada e só permitimos crescimento controlado pelo clamp().
*/
@media (min-width: 1280px) {
    :where(html) { font-size: 16px; }
}

@media (min-width: 1920px) {
    :where(html) { font-size: 16px; }
    /* Em Full HD+ a UI permanece estável. O ganho de espaço vai
       para o shell (mais respiro lateral), não para o conteúdo. */
}

@media (min-width: 2560px) {
    :where(html) { font-size: 16px; }
    :root {
        --shell-max:    1600px;
        --shell-max-lg: 1840px;
        --shell-max-xl: 2080px;
    }
}

@media (min-width: 3840px) {
    /* 4K nativo (sem DPI scaling) — cresce a base 1px só */
    :where(html) { font-size: 17px; }
    :root {
        --shell-max:    1760px;
        --shell-max-lg: 2000px;
    }
}

/* ---------- 4. SHELL CENTRAL ----------
   Use estas classes no contêiner principal de cada página.
   Quando aplicado, o conteúdo nunca estica em ultrawide. */
.app-shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--shell-pad-x);
}
.app-shell--wide  { max-width: var(--shell-max-lg); }
.app-shell--xwide { max-width: var(--shell-max-xl); }
.app-shell--fluid { max-width: none; }

/* ---------- 5. UTILITÁRIOS ---------- */
.stack > * + * { margin-top: var(--space-4); }
.stack--sm > * + * { margin-top: var(--space-2); }
.stack--lg > * + * { margin-top: var(--space-6); }

.row { display: flex; gap: var(--space-3); align-items: center; }
.row--tight { gap: var(--space-2); }
.row--loose { gap: var(--space-5); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- 6. MEDIA-QUERY MIXINS NÃO EXISTEM EM CSS PURO ----------
   Use os breakpoints abaixo como referência consistente em qualquer
   stylesheet do projeto:

   @media (min-width: 640px)  { ... }   sm   landscape phones
   @media (min-width: 768px)  { ... }   md   tablets
   @media (min-width: 1024px) { ... }   lg   laptops
   @media (min-width: 1280px) { ... }   xl   desktops
   @media (min-width: 1536px) { ... }   2xl  Full HD+
   @media (min-width: 1920px) { ... }   3xl  2K+
*/

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

:where(:focus-visible) {
    outline: 2px solid #5b7fff;
    outline-offset: 2px;
}

/* ---------- 8. SCROLLBAR DISCRETA (consistente entre OS) ---------- */
:where(*) {
    scrollbar-width: thin;
    scrollbar-color: var(--cv-ffffff-a0120, rgba(255, 255, 255, 0.12)) transparent;
}
:where(*)::-webkit-scrollbar { width: 8px; height: 8px; }
:where(*)::-webkit-scrollbar-track { background: transparent; }
:where(*)::-webkit-scrollbar-thumb {
    background: var(--cv-ffffff-a0120, rgba(255, 255, 255, 0.12));
    border-radius: 4px;
}
:where(*)::-webkit-scrollbar-thumb:hover {
    background: var(--cv-ffffff-a0200, rgba(255, 255, 255, 0.2));
}