/* ============================================================
   PALETA OFICIAL — MAKERSPACE UNIFEI
   ============================================================
   Arquivo central de variáveis CSS. Inclua em todos os templates:
     <link rel="stylesheet" href="/css/palette.css">

   Como usar:
   - Padrão (admin + listagens públicas): nada extra, basta usar var(--bg)
   - Páginas de detalhe / conteúdo rico: adicionar class="theme-pure-black"
     no <body> para alternar para a paleta preta pura.

   Atenção: NUNCA redeclare estas variáveis em templates. Use sempre
   var(--nome). Cores específicas de um componente podem ficar no template.
   ============================================================ */

/* ────────────────────────────────────────────────────────
   FONTES OFICIAIS AUTO-HOSPEDADAS (WOFF2 local, sem bloqueio CDN)
   ──────────────────────────────────────────────────────── */
/* Tipografia da marca: Chakra Petch (títulos/rótulos) e Space Grotesk (texto) — SIL OFL, auto-hospedadas */
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/chakra-petch-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/chakra-petch-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/chakra-petch-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {

    /* Tipografia da marca */
    --font-display: 'Chakra Petch', 'Rajdhani', system-ui, sans-serif;   /* títulos, rótulos, botões */
    --font-body:    'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;   /* texto corrido */

    /* ────────────────────────────────────────────────────────
       CORES DE MARCA (oficiais, não alterar sem aprovação)
       ──────────────────────────────────────────────────────── */
    --amarelo:        #F6A700;   /* Cor primária — destaque, CTAs, links ativos */
    --amarelo-claro:  #FFD666;   /* Hover do amarelo */
    --carmim:         #9B111E;   /* Secundária — alertas, ações destrutivas */
    --branco:         #FFFFFF;
    --preto:          #0D0D0D;   /* Preto oficial da marca */

    /* Cores complementares */
    --azul:           #003153;
    --azul-ecl:       #4776a1;
    --vermelho-ind:   #a83434;
    --pessego:        #e8bcb8;
    --verde:          #2ea043;

    /* Alias semântico — usar para destaques no UI (ex: links ativos no header) */
    --accent:         #F6A700;

    /* ────────────────────────────────────────────────────────
       PALETA PADRÃO — "Dark Gray"
       Páginas: admin, listagens (loja, projetos, busca, faq, etc.)
       ──────────────────────────────────────────────────────── */
    --bg:             #0D0D0D;   /* fundo da página */
    --bg2:            #161616;   /* cards */
    --bg3:            #1f1f1f;   /* inputs, botões secundários */
    --cinza-medio:    #2c2c2c;   /* bordas */
    --cinza-claro:    #555555;   /* bordas suaves, ícones secundários */
    --cinza-texto:    #9a9a9a;   /* texto secundário */
    --cinza-ecl:      #8a8a8a;

    /* ────────────────────────────────────────────────────────
       PALETA ALTERNATIVA — "Pure Black"
       Páginas: detalhe (projeto, produto), conteúdo rico (sobrenos, servicos)
       Estas variáveis também ficam disponíveis no padrão para
       compatibilidade — sobrescritas pela classe .theme-pure-black
       ──────────────────────────────────────────────────────── */
    --bg-page:        #111111;
    --bg-card:        #1c1c1c;
    --bg-card-hover:  #222222;
    --border:         #2f2f2f;
    --border-strong:  #3a3a3a;
    --text-primary:   #eaeaea;
    --text-muted:     #a0a0a0;   /* contraste ~7.1:1 em #111 — AA */
    --text-dim:       #8a8a8a;   /* contraste ~5.3:1 em #111 — AA (era #6f6f6f, 3.6:1, falhava) */
}

/* ────────────────────────────────────────────────────────
   MODIFICADOR — adicione class="theme-pure-black" no <body>
   para ativar a paleta de páginas de detalhe.
   ──────────────────────────────────────────────────────── */
.theme-pure-black {
    --preto:          #0a0a0a;
    --bg:             #111111;
    --bg2:            #1c1c1c;
    --bg3:            #222222;
    --cinza-medio:    #2f2f2f;
    --cinza-claro:    #3a3a3a;
    --cinza-texto:    #a0a0a0;
}

/* ────────────────────────────────────────────────────────
   ACESSIBILIDADE: MOVIMENTO REDUZIDO (WCAG 2.3.3)
   ──────────────────────────────────────────────────────── */
@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;
    }
}