/*
 * Design tokens extracted from Figma "IBDMAR" file (sI2XI9rIPZIHU8XyJrcQRg),
 * page "Design System" (node 24:2), section [IDM-12] Cores / [IDM-13] Tipografia /
 * [IDM-15] Grid, Espaçamentos & Breakpoints.
 *
 * Color values were pixel-sampled from Figma's rendered screenshot of each
 * swatch (node 28:2), not eyeballed — treat them as source of truth until the
 * Figma file itself changes.
 */

:root {
	/* Brand */
	--color-brand-primary: #10283d;
	--color-brand-primary-hover: #17334b;
	--color-brand-primary-active: #1d4157;
	--color-brand-primary-light: #c7d9ff;
	--color-brand-primary-dark: #0a1c2b;

	/* Secondary */
	--color-secondary: #145e6e;
	--color-secondary-hover: #0f4a58;
	--color-secondary-active: #0a2f38;

	/* Accent — encontrado no Sprint 3 (Footer, node 288:717), palavra "à Proa"
	   do lockup "IBDMar à Proa"; pixel-sampled, plateau sólido #3ab2b2. Não
	   fazia parte dos 30 tokens originais do Design System (node 24:2). */
	--color-accent-teal: #3ab2b2;

	/* Encontrado no Sprint 4 (Home · Sec Galerias, node 78:81) — fundo dos
	   tiles de galeria, plateau sólido #2c415d, também não fazia parte dos
	   30 tokens originais. */
	--color-tile-dark: #2c415d;

	/* Surface */
	--color-surface-primary: #ffffff;
	--color-surface-secondary: #f5f1ea;
	--color-surface-tertiary: #f4f7f9;
	--color-surface-inverse: #10283d;

	/* Background */
	--color-background-default: #ffffff;
	--color-background-subtle: #f4f7f9;
	--color-background-accent: #48808c;

	/* Text */
	--color-text-primary: #2b2f37;
	--color-text-secondary: #4c5f74;
	/* 2026-09-28: era #7d8699, amostrado do Figma. Esse valor dá 3,66:1 sobre
	   branco e 3,40:1 sobre #f4f7f9 — abaixo dos 4,5:1 do WCAG AA, e o token
	   era usado em 31 lugares (datas de card, autor de livro, breadcrumb,
	   dicas de formulário...) e nenhum dos 31 passava. Hoje são 33: três
	   sobrescritas locais voltaram ao token e o "Sem capa" do card de livro
	   saiu dele. Desses 33, 24 usam --text-caption (13px), um usa 16px e
	   oito herdam o tamanho do pai.
	   #687185 mantém matiz (221°) e saturação (12%) e só baixa a
	   luminosidade de 55% para 47%: 4,90:1 sobre branco, 4,55:1 sobre
	   #f4f7f9. É o primeiro passo que passa nos dois fundos claros, e segue
	   mais claro que --color-text-secondary (6,57:1), preservando a escala.
	   DIVERGE DO FIGMA de propósito: o arquivo do Figma ainda traz #7d8699,
	   e reconciliar os dois é decisão de quem mantém o Design System. */
	--color-text-tertiary: #687185;
	--color-text-inverse: #ffffff;
	--color-text-heading: #10283d;

	/* Border */
	--color-border-default: #d9dee5;
	--color-border-strong: #7d8699;
	--color-border-subtle: #f4f7f9;

	/* Feedback */
	--color-feedback-success: #1e7a3f;
	--color-feedback-warning: #b26a00;
	--color-feedback-error: #b3261e;
	--color-feedback-information: #145e6e;

	/* Interactive */
	--color-interactive-link: #1d4157;
	--color-interactive-link-hover: #145e6e;
	--color-interactive-focus: #3d8a8a;
	--color-interactive-disabled: #7d8699;

	/* Typography — família */
	--font-heading: 'Montserrat', Arial, sans-serif;
	--font-body: 'Open Sans', Arial, sans-serif;

	/* Typography — escala (Figma TypeRamp, [IDM-13]) */
	--text-section-title: italic 600 30px/1.2 var(--font-heading);   /* Título/Seção — SemiBold Italic, centralizado */
	--text-h1: 700 40px/1.2 var(--font-heading);                     /* H1 · Display — Bold */
	--text-h2: 700 32px/1.25 var(--font-heading);                    /* H2 — Bold */
	--text-h3: 600 26px/1.3 var(--font-heading);                     /* H3 — SemiBold */
	--text-h4: 600 24px/1.3 var(--font-heading);                     /* H4 — SemiBold */
	--text-h5: 500 20px/1.3 var(--font-heading);                     /* H5 — Medium */
	--text-body-large: 400 18px/1.5 var(--font-body);                /* Corpo/Grande */
	--text-body-default: 400 16px/1.5 var(--font-body);              /* Corpo/Padrão */
	--text-body-emphasis: 600 16px/1.5 var(--font-body);             /* Corpo/Destaque — SemiBold */
	--text-caption: 400 13px/1.4 var(--font-body);                   /* Corpo/Legenda */

	/* Espaçamento (escala [IDM-15]) */
	--sp-4: 4px;
	--sp-8: 8px;
	--sp-16: 16px;
	--sp-24: 24px;
	--sp-32: 32px;
	--sp-48: 48px;

	/* Breakpoints (referência — use como valor literal em @media, CSS não permite var() em media queries) */
	--bp-mobile: 360px;  /* 4 colunas */
	--bp-tablet: 768px;  /* 8 colunas */
	--bp-desktop: 1280px; /* 12 colunas — ponto em que a nav vira desktop, NÃO é a largura do conteúdo */

	/* Largura do conteúdo (medida em 2026-08-09 direto no Figma: canvas de
	   1920 com margens de 240px de cada lado = 1440px de área útil — conferido
	   pixel a pixel na grade de cards da Home, node 78:6). Corrige o
	   .ibdmar-container, que até aqui reusava --bp-desktop (1280px) por engano
	   e deixava o site mais estreito que o Figma em telas largas.
	   1440 + 2×24px (--sp-24, o padding-inline do .ibdmar-container) = 1488px:
	   o padding do container é uma folga de segurança para telas mais
	   estreitas que 1488px, mas em telas largas ele NÃO deve comer da área
	   útil de 1440px — por isso o max-width é 1488, não 1440. */
	--container-max-width: 1488px;
}

/* Mobile (< 768px): escala tipográfica de títulos reduzida. Com os tamanhos
   do desktop (H1 40px), um título de notícia de tamanho normal ocupava 6+
   linhas numa tela de 375px e empurrava o conteúdo pra baixo da dobra.
   Como todo o tema usa os tokens (h1..h5 em base.css, heroes, cards),
   sobrescrever só as variáveis aqui ajusta o site inteiro de uma vez. */
@media (max-width: 767px) {
	:root {
		--text-section-title: italic 600 26px/1.2 var(--font-heading);
		--text-h1: 700 30px/1.2 var(--font-heading);
		--text-h2: 700 26px/1.25 var(--font-heading);
		--text-h3: 600 22px/1.3 var(--font-heading);
		--text-h4: 600 20px/1.3 var(--font-heading);
		--text-h5: 500 18px/1.3 var(--font-heading);
	}
}