/* ══════════════════════════════════════════════════════════════════════
   TITULOS.CSS — base para títulos e subtítulos do Observatório
   Agroalimentar dos Açores, adotando a escala tipográfica e as cores
   oficiais do design system do Governo Regional dos Açores (GRA).

   Fonte: Lato (carregar via Google Fonts — ver @import abaixo).
   Cores: tokens --color_blue_* / --color_gray_* tal como usados no site
   do GRA (ex. títulos de cartão em --color_blue_800, corpo em
   --color_gray_700).

   Hierarquia (do maior para o mais pequeno):
     .titulo-hero        48px / 700 — título de destaque de página (topo)
     .titulo-cartao       24px / 700 — título de cartão / secção principal
     .titulo-seccao        18px / 700 — título de bloco/painel dentro da página
     .titulo-notificacao   16px / 700 — título de notificação/alerta
     .subtitulo            16px / 400 — subtítulo, descrição de apoio

   Como aplicar numa página:
     <link rel="stylesheet" href="titulos.css">
   e usar as classes acima diretamente em qualquer <h1>–<h6> ou <div>.
   ══════════════════════════════════════════════════════════════════════ */

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

:root {
    /* Paleta GRA — azul (cor de destaque de títulos) */
    --color_blue_100: #EFF6FF;
    --color_blue_200: #D7E6FB;
    --color_blue_300: #B0CCDD;
    --color_blue_400: #74A6C4;
    --color_blue_500: #3980AA;
    --color_blue_600: #327196;
    --color_blue_700: #2C6485;
    --color_blue_800: #25536F;
    --color_blue_900: #0057D5;

    /* Paleta GRA — cinza (texto e variantes neutras) */
    --color_gray_100: #F7F7F7;
    --color_gray_200: #E8E8E8;
    --color_gray_300: #919090;
    --color_gray_400: #6D6B6B;
    --color_gray_500: #4D4C4C;
    --color_gray_600: #303030;
    --color_gray_700: #212121;
    --color_gray_800: #171717;
    --color_gray_900: #000000;
}

/* ── Base tipográfica partilhada por todos os níveis ── */
.titulo-hero,
.titulo-cartao,
.titulo-seccao,
.titulo-notificacao,
.subtitulo {
    font-family: Lato, Arial, sans-serif;
    margin: 0;
}

/* ── Nível 1 — Hero (título de destaque, topo de página) ── */
.titulo-hero {
    font-size: 48px;
    line-height: 57.6px;
    font-weight: 700;
    color: var(--color_blue_800);
}

/* ── Nível 2 — Título de cartão / secção principal ── */
.titulo-cartao {
    font-size: 24px;
    line-height: 28.8px;
    font-weight: 700;
    color: var(--color_blue_800);
}
.titulo-cartao.neutro { color: var(--color_gray_700); }

/* ── Nível 3 — Título de bloco/painel dentro da página ── */
.titulo-seccao {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: var(--color_blue_800);
}

/* ── Nível 4 — Título de notificação/alerta ── */
.titulo-notificacao {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--color_gray_900);
}

/* ── Subtítulo — descrição de apoio a qualquer um dos níveis acima ── */
.subtitulo {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--color_gray_700);
}
.subtitulo.pequeno { font-size: 14px; line-height: 20px; }

/* ── Modo escuro — segue a convenção do próprio GRA (title.dark-mode fica
   branco, subtítulo fica cinza claro) para uso em páginas de fundo navy,
   como as do Observatório. Aplicar .dark-mode num antepassado (ex. <body>
   ou o wrapper da página) para ativar. ── */
.dark-mode .titulo-hero,
.dark-mode .titulo-cartao,
.dark-mode .titulo-seccao {
    color: #ffffff;
}
.dark-mode .titulo-cartao.neutro { color: var(--color_gray_300); }
.dark-mode .titulo-notificacao { color: #ffffff; }
.dark-mode .subtitulo { color: #E1C233; }