/*
 * Variáveis do design system SPIC (blocos Gutenberg e alguns trechos do tema).
 * Organizado em 2026-10-23. Os grupos seguem a ordem abaixo:
 *
 *   1. Paleta de marca     cores que aparecem no seletor de cor dos blocos
 *   2. Neutros             cinzas e texto
 *   3. Status de obra      casa de força e linha do tempo
 *   4. Detalhes de layout  valores fixos de componentes, fora do seletor
 *   5. Tokens semânticos   nomes por função, apontando para os grupos acima
 *   6. Tipografia, espaçamento, raio, sombra, movimento
 *
 * O site NÃO tem modo escuro. Até 2026-10-23 existia aqui um bloco
 * `prefers-color-scheme: dark` que trocava o cinza claro por azul-marinho
 * (#232257) quando o sistema do usuário estava no tema escuro. Como o resto do
 * site continua claro, só os blocos SPIC mudavam de cor. Foi removido. Não
 * volte com ele sem um modo escuro de verdade no tema inteiro.
 *
 * Cor nova na paleta (grupo 1) não aparece sozinha nos blocos: precisa entrar
 * em blocks/src/shared/cores.js, no CSS de cada bloco e nas listas de valores
 * aceitos dos render.php. Ver docs/2026/gutenberg/como-criar-um-bloco.md.
 */
:root {
    /* --- 1. Paleta de marca (blocks/src/shared/cores.js) --- */
    --spic-navy: #1D1C47;        /* institucional escuro */
    --spic-blue: #052EFF;        /* azul principal: títulos, links, botões */
    --spic-azul-claro: #0074FF;  /* azul mais vivo (2026-09-23) */
    --spic-lime: #B0FF03;        /* faixa de destaque em cards e CTAs */
    --spic-green: #78BB42;       /* sustentabilidade */
    --spic-red: #D8232A;         /* alerta */
    --spic-preto: #252525;       /* neutro escuro, mesmo tom do texto (2026-09-23) */

    /* --- 2. Neutros --- */
    --spic-cinza-claro: #F3F4F4; /* fundo de seção alternada e de card */
    --spic-cinza-borda: #E4E4EA;
    --spic-texto: #252525;
    --spic-texto-apagado: #6B6B78;

    /* --- 3. Status de obra (blocks/src/shared/status.js) ---
       Valores do layout pagina-modernizacao-v2.pdf (2026-10-19). Cada status
       tem a cor e a cor do texto do selo. */
    --spic-status-renovada: #2FAE4E;
    --spic-status-renovada-texto: #fff;
    --spic-status-proxima: #FF5000;
    --spic-status-proxima-texto: #fff;
    --spic-status-aguardando: #7C8799;
    --spic-status-aguardando-texto: #fff;
    --spic-status-nova: #0090C8;
    --spic-status-nova-texto: #fff;
    --spic-status-feito: #2FAE4E;
    --spic-status-proximo: #FF5000;
    --spic-status-futuro: #052EFF;

    /* --- 4. Detalhes de layout (página São Simão, 2026-10-19) ---
       Não aparecem no seletor de cor. São medidas do PDF para partes
       específicas de componentes. */
    --spic-texto-secundario: #6B7588;   /* data da novidade, legenda */
    --spic-texto-terciario: #4A5468;    /* nota de rodapé em caixa */
    --spic-ug-rotulo: #0A1F6B;          /* rótulo UG1 a UG7 sobre o painel claro */
    --spic-balao-borda: #89C540;        /* borda do balão "Destaque" do mascote */
    --spic-linha-pontilhada: #B9C3D6;   /* ligação pontilhada da linha do tempo */
    --spic-gradiente-vermelho-circulo: linear-gradient(135deg, #E76D0A 0%, #DA0E15 55%, #9C1A16 100%);
    --spic-gradiente-azul-circulo: linear-gradient(135deg, #052EFF 0%, #00BEDF 100%);

    /* --- 5. Tokens semânticos ---
       Nome pela função. Nos blocos, prefira estes aos valores diretos. */
    --color-page: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-surface-muted: var(--spic-cinza-claro);
    --color-surface-inverse: var(--spic-navy);
    --color-surface-emphasis: var(--spic-blue);
    --color-text: var(--spic-texto);
    --color-text-muted: var(--spic-texto-apagado);
    --color-text-on-inverse: #F5F6FF;
    --color-text-on-emphasis: #FFFFFF;
    --color-border: var(--spic-cinza-borda);
    --color-accent: var(--spic-blue);
    --color-accent-strong: #031F99;     /* hover do azul */
    --color-danger: var(--spic-red);

    /* --- 6a. Tipografia --- */
    --font-display: 'Venn', 'Big Shoulders', system-ui, sans-serif;  /* títulos */
    --font-body: 'Nunito', 'Open Sans', system-ui, sans-serif;       /* sem uso nos blocos hoje */
    --font-label: 'Open Sans', system-ui, sans-serif;                /* sem uso nos blocos hoje */

    --text-title: 1.875rem;  /* ver media queries no fim do arquivo */
    --text-h2: 1.75rem;      /* 28px */
    --text-h3: 1.5rem;       /* 24px */
    --text-h4: 1.125rem;     /* 18px */
    --text-body: 1rem;       /* 16px */
    --text-label: 0.875rem;  /* 14px */

    --leading-tight: 1.15;
    --leading-base: 1.5;
    --leading-loose: 2;

    /* --- 6b. Espaçamento --- */
    --space-1: 0.5rem;   /* 8px */
    --space-2: 1rem;     /* 16px */
    --space-3: 1.5rem;   /* 24px */
    --space-4: 2rem;     /* 32px */
    --space-5: 2.5rem;   /* 40px, respiro de seção no celular */
    --space-6: 3.75rem;  /* 60px */
    --space-7: 6.25rem;  /* 100px, respiro de seção no desktop */
    --section-padding-y: var(--space-5);

    /* --- 6c. Raio de borda --- */
    --radius-sm: 0.5rem;   /* 8px */
    --radius-md: 1rem;     /* 16px */
    --radius-lg: 1.5rem;   /* 24px */
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* --- 6d. Sombra (tingida de navy) --- */
    --shadow-sm: 0 2px 8px rgba(29, 28, 71, .08);
    --shadow-md: 0 8px 24px rgba(29, 28, 71, .14);
    --shadow-lg: 0 20px 48px rgba(29, 28, 71, .22);

    /* --- 6e. Movimento --- */
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;

    --stripe-width: 6px;
}

/*
 * --text-title: estas três regras estão na ordem errada. A de 250px vem por
 * último e vale para qualquer tela, então o valor real hoje é sempre 1.3rem.
 * Foi mantido assim de propósito em 2026-10-23 para não mudar o tamanho de
 * títulos já publicados. Corrigir é uma decisão de layout.
 */
@media (min-width: 1024px) {
    :root {
        --text-title: 2.1rem;
    }
}

@media (min-width: 767px) {
    :root {
        --text-title: 1.75rem;
    }
}

@media (min-width: 250px) {
    :root {
        --text-title: 1.3rem;
    }
}