/* ============================================================================
   IMAGINATECH - IDENTIDADE VISUAL 2026-08 "datasheet"
   /shared/identity.css  —  NUCLEO. Primeiro <link> de TODA pagina/painel.

   O que faz:
   1. Define os tokens oficiais da identidade (grafite + regua + acento).
   2. REMAPEIA todo o vocabulario legado (--neon-*, --glass-*, --text-*,
      --dark-bg, --card-bg, --color-*, --font-*, --radius-*) para os tokens
      novos. Assim, CSS antigo que consome var() ja nasce na paleta nova.
   3. Reset + base (body, tipografia, scrollbar, foco) e utilitarios.

   Como uma pagina troca o acento (ex.: /precificadora usa lime):
       :root { --acc: #84cc16; --acc-hover: #a3e635; }
   Tudo o mais acompanha, porque todo componente le var(--acc).

   REGRAS DA IDENTIDADE (resumo executavel):
   - Superficie = fundo solido + sombra + radius. NUNCA moldura externa.
   - Reguas de 1px so INTERNAS (entre secoes do mesmo bloco).
   - Sem glassmorphism, sem glow colorido, sem gradiente decorativo.
   - Tipografia unica Open Sans (Orbitron so na marca ImaginaTech).
   - Botao = radius 2px. Input = 10px. Card = 14px. Chip = 6px.
   - Numeros com font-variant-numeric: tabular-nums.
   CUIDADO: nunca escrever asterisco+barra dentro de comentario CSS.
   ============================================================================ */

:root {
    /* ===== SUPERFICIES ===== */
    --bg: #131519;
    --surface: #16181D;
    --surface-2: #1A1D23;

    /* ===== TEXTO ===== */
    --ink: #E8EAED;
    --mut: #C6CCD6;
    --dim: #A9B0BB;

    /* ===== REGUAS ===== */
    --rule: #262A31;
    --rule-strong: #3A3F47;

    /* ===== ACENTO (uma pagina pode sobrescrever) ===== */
    --acc: #00D4FF;
    --acc-hover: #33DDFF;
    --acc-ink: #131519;          /* texto sobre o acento solido */
    /* tinta suave do acento: DERIVADA de --acc, entao trocar so o --acc ja
       re-pinta tudo (o rgba abaixo e o fallback pra browser sem color-mix) */
    --acc-soft: rgba(0, 212, 255, 0.08);
    --acc-soft: color-mix(in srgb, var(--acc) 8%, transparent);

    /* ===== SEMANTICOS ===== */
    --ok: #00FF88;
    --warn: #FFD23F;
    --danger: #FF5566;
    --danger-hover: #FF7788;
    --info: #38BDF8;
    --orange: #FFA94D;

    /* ===== GEOMETRIA ===== */
    --r-lg: 14px;
    --r-md: 10px;
    --r-sm: 6px;
    --r-btn: 2px;
    --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.22);
    --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);

    /* ===== TIPOGRAFIA ===== */
    --sans: 'Open Sans', Arial, 'Helvetica Neue', -apple-system, sans-serif;
    --brand-font: 'Orbitron', sans-serif;   /* SO a marca ImaginaTech */

    /* ===== EMPILHAMENTO (mesma escala do /shared/z-index.css) =====
       Ficam aqui para a pagina nao precisar importar o z-index.css so por
       causa dos tokens. O z-index.css continua existindo para as paginas que
       usam as CLASSES utilitarias dele. */
    --z-behind: -1;
    --z-base: 0;
    --z-raised: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-navbar: 400;
    --z-sidebar: 500;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-popover: 1100;
    --z-toast: 1200;
    --z-tooltip: 1300;
    --z-loading: 9999;

    /* ============================================================
       REMAP DO VOCABULARIO LEGADO
       CSS antigo continua funcionando, mas ja pintado na identidade.
       Nao remover: dezenas de arquivos e estilos inline consomem.
       ============================================================ */

    /* fontes legadas ("mono" e alias historico: a identidade e Open Sans em tudo,
       alinhamento numerico vem de tabular-nums, nao de fonte monoespacada) */
    --font-family: var(--sans);
    --mono: var(--sans);
    --font-mono: var(--sans);
    --font-display: var(--brand-font);
    --font-secondary: var(--sans);

    /* neon -> acento/semanticos */
    --neon-blue: var(--acc);
    --neon-cyan: var(--acc);
    --neon-purple: var(--acc);
    --neon-green: var(--ok);
    --neon-red: var(--danger);
    --neon-yellow: var(--warn);
    --neon-orange: var(--orange);
    --primary-blue: var(--acc);
    --secondary-blue: var(--acc);

    /* semanticas legadas */
    --color-primary: var(--acc);
    --color-success: var(--ok);
    --color-danger: var(--danger);
    --color-warning: var(--warn);
    --color-info: var(--info);
    --color-neutral: var(--dim);

    /* fundos legados (o "vidro" vira superficie solida) */
    --dark-bg: var(--bg);
    --darker-bg: var(--bg);
    --card-bg: var(--surface);
    --glass-bg: var(--surface-2);
    --glass-border: var(--rule);
    --color-bg-primary: var(--bg);
    --color-bg-secondary: var(--surface);
    --color-bg-tertiary: var(--surface-2);

    /* texto legado */
    --text-primary: var(--ink);
    --text-secondary: var(--mut);
    --text-muted: var(--dim);
    --text-tertiary: var(--dim);
    --color-text-primary: var(--ink);
    --color-text-secondary: var(--mut);
    --color-text-tertiary: var(--dim);
    --color-text-muted: var(--dim);

    /* bordas legadas */
    --color-border: var(--rule);
    --color-border-light: var(--rule);

    /* sombras legadas (neutras; glow colorido morre aqui) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.22);
    --shadow-lg: var(--shadow-card);
    --shadow-xl: var(--shadow-modal);
    --shadow-glow: var(--shadow-card);
    --glow-blue: none;
    --glow-green: none;
    --glow-red: none;

    /* Navbar publica (/shared/navbar-site.css): ela serve a HOME, que ainda nao
       foi migrada e NAO importa este arquivo. Por isso o vidro/gradiente dela
       vive em token com fallback = valor antigo; quem importa identity.css
       (toda pagina migrada) recebe automaticamente a versao datasheet. Quando a
       home migrar, os fallbacks de la podem ser apagados. */
    --nav-bg: var(--surface);
    --nav-blur: none;
    --nav-blur-sm: none;
    --nav-border: none;
    --nav-logo-bg: none;
    --nav-logo-fill: var(--acc);
    --nav-logo-weight: 800;
    --nav-cta-bg: var(--acc);
    --nav-chip-bg: var(--surface-2);
    /* botoes da navbar: sem glow colorido, regua no lugar do contorno leitoso.
       O RAIO (pill 25px) fica de proposito no fallback do navbar-site.css —
       a pilula e decisao de design aprovada, nao e o botao de 2px da identidade. */
    --nav-btn-border: 1px solid var(--rule-strong);
    --nav-btn-glow: none;
    --nav-btn-hover-border: var(--acc);
    --nav-btn-active-bg: var(--acc-soft);
    --nav-cta-border: 1px solid var(--acc);
    --nav-cta-ink: var(--acc-ink);      /* tinta escura sobre o acento: branco no ciano da 1.9:1 */
    --nav-cta-glow: none;
    --nav-chip-border: none;

    /* Overlay de carregamento (/shared/loading.css tambem serve a home) */
    --loading-bg: rgba(19, 21, 25, 0.95);
    --loading-blur: none;

    /* gradientes legados achatados em cor solida */
    --gradient-primary: var(--acc);
    --gradient-success: var(--ok);
    --gradient-danger: var(--danger);
    --gradient-dark: var(--surface);

    /* raios legados */
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-md);
    --radius-xl: var(--r-lg);
    --radius-2xl: var(--r-lg);
    --radius-pill: 999px;

    /* espacamento e transicoes (mantidos por compatibilidade) */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* tamanhos de fonte legados */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.35rem;
    --font-size-2xl: 1.75rem;
}

/* ============================================================================
   RESET + BASE
   ============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

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

/* Marca ImaginaTech: unico lugar onde Orbitron sobrevive */
.logo, .footer-logo, .auth-logo h1 { font-family: var(--brand-font); }

/* Numeros que alinham em coluna */
input[type="number"], .tabular, [data-tabular] { font-variant-numeric: tabular-nums; }

::selection { background: var(--acc); color: var(--acc-ink); }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

/* ============================================================================
   UTILITARIOS
   ============================================================================ */

.hidden, [hidden] { display: none !important; }

.it-label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mut);
}

.it-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.it-accent { color: var(--acc); }
.it-muted { color: var(--mut); }
.it-dim { color: var(--dim); }
.it-rule { height: 1px; background: var(--rule); border: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}