/* ==========================================================================
   IDENTIDADE VISUAL — Leonardo Donati
   Tokens tirados do caderno do TFG (montar_caderno.jsx → CONFIG.cores/fontes).
   Qualquer peça (site, post, banner) deve usar só o que está aqui.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
    /* Cores (RGB do caderno) */
    --azul: #1b40a0;          /* 27 64 160  — destaque, figuras, títulos */
    --tinta: #1c2230;         /* 28 34 48   — texto */
    --cinza: #5c6370;         /* 92 99 112  — legendas, meio tom */
    --azul-claro: #c3cff0;    /* 195 207 240 — fundos de apoio */
    --linha: #c9cdd6;         /* 201 205 214 — fios, grade */
    --imagem: #e3e4e6;        /* 227 228 230 — espaço de imagem */
    --papel: #ffffff;
    --sombra: rgba(27, 64, 160, 0.16); /* sombra das escalas humanas na capa */

    /* Tipografia: Inter nos títulos, Poppins no texto */
    --f-titulo: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --f-texto: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

    /* Espaçamento das versais do caderno (InDesign 100 = 0.1em, 190 = 0.19em) */
    --track-titulo: 0.1em;
    --track-sub: 0.19em;

    /* Escala (base 16px; proporções dos títulos do caderno 22/18/16/12/10) */
    --t-capa: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
    --t-1: 1.8rem;
    --t-2: 1.6rem;
    --t-3: 1.2rem;
    --t-corpo: 1rem;
    --t-nota: 0.8rem;

    /* Grade de 8px */
    --u: 8px;
}

/* Classes utilitárias — opt-in, para não mexer em páginas antigas */
.id-titulo {
    font-family: var(--f-titulo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track-titulo);
    color: var(--azul);
}

.id-sub {
    font-family: var(--f-texto);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--track-sub);
    color: var(--azul);
}

.id-legenda {
    font-family: var(--f-texto);
    font-size: var(--t-nota);
    color: var(--cinza);
}

/* Tecla — usada no tutorial do jogo e no guia */
.key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid currentColor;
    border-bottom-width: 2px;
    border-radius: 5px;
    font-family: var(--f-titulo);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    transition: color 0.15s, background-color 0.15s, transform 0.1s;
}

.key.is-down {
    color: var(--azul);
    background: rgba(27, 64, 160, 0.08);
    transform: translateY(1px);
}

/* Barra de rolagem única em todo o site, fina e sem setas: trilho na cor do fundo e barra na cor oposta
   (no blueprint as variáveis trocam e ela acompanha). Não pôr scrollbar-color em outro lugar:
   no Chrome ele desliga estas regras no elemento. */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: var(--papel); }
::-webkit-scrollbar-thumb { background: var(--azul); border-radius: 3px; }

/* scrollbar-width não é herdado: vai em todo elemento */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--azul) var(--papel); }
}

/* Cursor em bola (cursor.js), em todas as páginas. Cores fixas: no tema
   blueprint as variáveis trocam de valor, e a inversão precisa do branco e do azul reais. */
html.ball-cursor,
html.ball-cursor * {
    cursor: none !important;
}

html.ball-cursor input[type="text"],
html.ball-cursor textarea {
    cursor: text !important;
}

.cursor-ball {
    position: fixed;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s;
    will-change: transform;
}

html.ball-on .cursor-ball { opacity: 1; }
.cursor-invert { background: #ffffff; mix-blend-mode: difference; }
.cursor-tint { background: #1b40a0; mix-blend-mode: plus-lighter; }

/* ==========================================================================
   Páginas internas (portfolio, solutions, projetos, currículo)
   Carregado depois do style.css antigo: redireciona o verde para o azul.
   ========================================================================== */
:root {
    --neon: var(--azul);
}

.header h1,
.cv-name {
    font-family: var(--f-titulo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track-titulo);
    color: var(--azul);
}

.header h1 {
    font-size: 1.15rem;
}

.project-title,
.p-title,
.about-title,
.item-title,
.section-title {
    font-family: var(--f-titulo);
}

.project-title,
.about-title {
    color: var(--azul);
}

/* Capa provisória de projeto sem imagem (home, portfolio, página do projeto) */
.cover-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--f-texto);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cinza);
    background: var(--imagem);
}

.cover-empty img {
    height: 56px;
    width: auto;
    opacity: 0.85;
}

/* Troca de idioma nas páginas internas */
.lang-toggle {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--tinta);
}

.lang-toggle:hover { color: var(--azul); }
.nav .lang-toggle { margin-left: 30px; font-size: 0.9rem; }
.cv-actions { display: flex; align-items: center; gap: 24px; }
.cv-actions .lang-toggle { font-size: 0.8rem; }
#gallery-dropdown .lang-toggle { font-size: 0.72rem; }