/* =============================================================================
   InfraTrack — Design Tokens
   -----------------------------------------------------------------------------
   Paleta e tipografia derivadas do portfolio da PL Vieira Engenharia Civil.
   Metáfora: "caderno de campo de engenharia" — papel creme + tinta bordô,
   marginalia técnica em cinza-grafite, marcadores de estaca como signature.

   Ordem no arquivo: cor, tipografia, escala de espaço, elevação, motion.
   Todos os componentes em `infratrack.css` DEVEM derivar destes tokens —
   nada de hex/px soltos em `infratrack.css`.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ------------------------------------------------------------------
       COR — "papel + tinta"
       ------------------------------------------------------------------
       Papel: 3 tons de creme derivados da capa do portfolio (rgb ~180,180,160
              analisado direto da imagem). Aquecemos ligeiramente com um
              hint de amarelo para diferenciar do cluster "warm cream + terracota"
              que hoje é típico de IA — este creme é mais frio/mineral, com
              menos saturação, mais próximo de caderno técnico ISO A4 usado.
       Tinta: bordô profundo — o mesmo #500000 do portfolio, ajustado para
              #5A0F1F (adiciona um grão de vermelho puro) para ganhar 2 pontos
              de contraste em telas mobile sem perder identidade.
       Neutros: tons de grafite deliberadamente FRIOS (não pretos-puros),
                para conversar com a tinta bordô sem competir. */

    --paper: #F5F1E8;
    --paper-soft: #FAF7EF;
    --paper-edge: #E8E2D0;
    --paper-shade: #EDE8D8;

    --ink-deep: #1A1A1A;      /* corpo principal — quase preto */
    --ink-muted: #5C5C5C;     /* secundário — legendas, meta */
    --ink-faint: #8E8E8E;     /* terciário — placeholders */

    --bordo: #5A0F1F;         /* CTA principal, links, estaca-tick */
    --bordo-deep: #3F0714;    /* hover/pressed */
    --bordo-glow: rgba(90, 15, 31, 0.08);

    /* Cores funcionais — derivadas de pigmentos terrosos, não da paleta
       genérica "green/yellow/red". Cada uma tem versão-fundo tint para
       badges, e versão-borda deep para outlines. */
    --ok: #2D6A4F;            /* verde-floresta profundo */
    --ok-tint: #D9E9DF;
    --warn: #B7791F;           /* ocre — mesma família da paleta terrosa */
    --warn-tint: #F4E7C9;
    --danger: #9B2226;         /* vermelho profundo, primo do bordô */
    --danger-tint: #F0D6D7;

    /* ------------------------------------------------------------------
       TIPOGRAFIA — trio deliberado
       ------------------------------------------------------------------
       Display: Fraunces variable — combina engenharia técnica (`opsz` menor)
                e refinamento editorial (`opsz` maior). Usada com restrição:
                títulos de página e o hero da capa/login.
       Corpo:   Inter — legibilidade alta em mobile, mesma do produto v1.
       Utility: JetBrains Mono — códigos de estaca, coordenadas, hashes.
                Usa `tabular-nums` sempre. */

    --font-display: 'Fraunces', ui-serif, Georgia, serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Escala tipográfica: modular ×1.25 a partir de 14px (mobile-first). */
    --text-xs: 0.75rem;    /* 12px — meta/timestamps */
    --text-sm: 0.875rem;   /* 14px — corpo em UI densa */
    --text-md: 1rem;       /* 16px — corpo padrão */
    --text-lg: 1.25rem;    /* 20px — subtítulos de card */
    --text-xl: 1.5rem;     /* 24px — título de seção */
    --text-2xl: 2rem;      /* 32px — título de tela */
    --text-3xl: 2.75rem;   /* 44px — hero (login, capa) */

    /* ------------------------------------------------------------------
       ESPAÇO — múltiplos de 4px, sem números "quebrados"
       ------------------------------------------------------------------ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Tap targets — mínimo WCAG 44px, alvo InfraTrack Mobile 48px
       (mão enluvada em canteiro). */
    --tap-min: 48px;

    /* ------------------------------------------------------------------
       BORDAS / RAIO / ELEVAÇÃO
       ------------------------------------------------------------------
       Raio pequeno propositalmente: caderno de engenharia tem cantos vivos,
       não cantos arredondados de cartão de crédito. 4px máximo, exceto
       botões (6px, para diferenciar clique de superfície). */

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-btn: 6px;

    /* Sombras: uma só, discreta. Papel encostado em outra folha, não
       flutuando. Sem múltiplas camadas glossy. */
    --shadow-paper: 0 1px 0 var(--paper-edge), 0 2px 8px rgba(26, 26, 26, 0.04);
    --shadow-focus: 0 0 0 3px var(--bordo-glow);

    /* ------------------------------------------------------------------
       MOTION — respeita reduce-motion
       ------------------------------------------------------------------ */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 120ms;
    --dur-med: 220ms;
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-med: 0ms; }
}

/* ==============================================================================
   Reset mínimo — só o que faz falta, sem normalize.css completo
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--ink-deep);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
a { color: var(--bordo); text-decoration: none; }
a:hover { color: var(--bordo-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; margin: 0; }

/* Foco visível em qualquer coisa focável — obrigatório para o InfraTrack Mobile
   (navegação por teclado externo, acessibilidade). */
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-md); }