/* Tokens globais da aplicacao */

:root {
	--layout-max-width: 1360px;
	--font-scale: 1;
	--font-sans: 'IBM Plex Sans', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;
	--font-title: 'IBM Plex Sans', sans-serif;
	--font-sans-alt: 'Nunito Sans', sans-serif;
	--font-mono-alt: 'Fira Mono', monospace;
	--font-title-alt: 'Nunito Sans', sans-serif;

	--control-h: 42px;
	--navbar-h: 56px;
	--radius-pill: 999px;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 6px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--ease-out: cubic-bezier(.2, .8, .2, 1);
	--backdrop-blur-soft: 4px;
	--backdrop-blur: 8px;

	/* Aliases de marca e compatibilidade — resolvidos contra os tokens de
	   tema (theme-light/theme-dark) definidos abaixo neste arquivo.
	   --success já é a cor de marca de fato em toda a aplicação (navbar,
	   badges, chips); estes nomes só dão a ela um alias estável para quem
	   escreve regra nova, sem introduzir paleta nova.
	   --text-muted/--line/--surface-muted existiam em uso (paginas.css) sem
	   nunca terem sido declarados — resolviam para o valor herdado/inicial
	   em vez do tom pretendido. Aliases abaixo corrigem isso sem precisar
	   tocar em cada chamador. */
	--brand: var(--success);
	--brand-hover: var(--success-hi);
	--brand-bg: var(--success-bg);
	--info: var(--pj);
	--info-hi: var(--pj);
	--info-bg: var(--tag-pj-bg);
	--text-muted: var(--muted);
	--line: var(--border);
	--surface-muted: var(--surface-2);

	/* Espessura de borda — só isto muda de fato entre institucional e
	   neo-brutalista; raio/sombra já têm tokens próprios abaixo. */
	--border-w: 1px;
}

html,
html.theme-light {
	--bg: #f4f6f3;
	--bg-rgb: 244, 246, 243;
	--surface: #ffffff;
	--surface-rgb: 255, 255, 255;
	--surface-2: #eef2ee;
	--surface-3: #e1e7e2;
	--surface-glass: #ffffff;
	--panel-bg: #ffffff;
	--panel-bg-strong: #ffffff;
	--control-bg: #f7f9f7;
	--hover-bg: #eef3ef;
	--glass-bg: #ffffff;
	--glass-bg-strong: #ffffff;
	--glass-border: #d8dfd8;
	--glass-shadow: 0 1px 2px rgba(18, 31, 22, .05);
	--app-bg-overlay: none;
	--parallax-opacity: 0;
	--parallax-filter: none;
	--border: #d8dfd8;
	--border-hi: #a9b7ad;
	--text: #17201a;
	--text-2: #334039;
	--muted: #69766d;
	--success: #246b45;
	--success-hi: #3f8a5c;
	--success-bg: rgba(36, 107, 69, .08);
	--warning: #8b641d;
	--warning-hi: #ad7c2b;
	--warning-bg: rgba(139, 100, 29, .10);
	--danger: #a93643;
	--danger-hi: #c84956;
	--danger-bg: rgba(169, 54, 67, .09);
	--neutral: #59645c;
	--neutral-hi: #758178;
	--neutral-bg: rgba(89, 100, 92, .09);
	--pj: #2f6f7f;
	--pf: #8b6b2f;
	--tag-pj-bg: rgba(47, 111, 127, .08);
	--tag-pf-bg: rgba(139, 107, 47, .09);
	--accent-warm: #8b6b2f;
	--accent-cool: #2f6f7f;
	--text-on-accent: #fbfff8;
	--shadow-sm: 0 1px 2px rgba(19, 34, 26, .06);
	--shadow-md: 0 6px 18px rgba(19, 34, 26, .08);
	--shadow-lg: 0 14px 36px rgba(19, 34, 26, .12);
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}

html.theme-dark {
	--bg: #101310;
	--bg-rgb: 16, 19, 16;
	--surface: #171b18;
	--surface-rgb: 23, 27, 24;
	--surface-2: #202620;
	--surface-3: #2b332c;
	--surface-glass: #171b18;
	--panel-bg: #171b18;
	--panel-bg-strong: #1b211c;
	--control-bg: #202620;
	--hover-bg: #283128;
	--glass-bg: #171b18;
	--glass-bg-strong: #1b211c;
	--glass-border: #334034;
	--glass-shadow: 0 1px 2px rgba(0, 0, 0, .28);
	--app-bg-overlay: none;
	--parallax-opacity: 0;
	--parallax-filter: none;
	--border: #334034;
	--border-hi: #526454;
	--text: #eef3ee;
	--text-2: #ccd8cf;
	--muted: #98a59b;
	--success: #73c28f;
	--success-hi: #9bd6ac;
	--success-bg: rgba(115, 194, 143, .14);
	--warning: #d6aa5c;
	--warning-hi: #efc678;
	--warning-bg: rgba(214, 170, 92, .14);
	--danger: #ef7b86;
	--danger-hi: #ff9ca5;
	--danger-bg: rgba(239, 123, 134, .14);
	--neutral: #a3afa6;
	--neutral-hi: #c0cbc2;
	--neutral-bg: rgba(163, 175, 166, .12);
	--pj: #83b6c3;
	--pf: #d0ae69;
	--tag-pj-bg: rgba(131, 182, 195, .14);
	--tag-pf-bg: rgba(208, 174, 105, .14);
	--accent-warm: #d0ae69;
	--accent-cool: #83b6c3;
	--text-on-accent: #062016;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
	--shadow-md: 0 6px 18px rgba(0, 0, 0, .28);
	--shadow-lg: 0 14px 36px rgba(0, 0, 0, .34);
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--success) 24%, transparent);
}

/* Institucional é o padrão: bordas discretas, raios curtos e sem excesso
   visual. Declarado DEPOIS dos blocos de tema acima é proposital: em
   --border/--shadow-*/--glass-border/--focus-ring, html.design-brutalist e
   html.theme-light têm a MESMA especificidade (0,1,1) — empate resolvido
   pela ordem no arquivo. Se este bloco viesse antes do bloco de tema, o
   tema sempre venceria e o modo neo-brutalista nunca mudaria borda/sombra
   no tema claro (bug real que existia aqui — corrigido com esta ordem). */
html.design-institutional {
	--radius-pill: 999px;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 4px;
	--radius-xl: 4px;
	--border-w: 1px;
}

/* Variação opt-in: contraste e geometria do design neo-brutalista. Raio
   zerado, borda espessa em tinta sólida, sombra dura sem blur (deslocada,
   não difusa) — a mesma linguagem geométrica do design-system.css, aplicada
   também aos componentes legados via seletor de atributo (ver design-system.css). */
html.design-brutalist {
	--radius-pill: 0;
	--radius-sm: 0;
	--radius-md: 0;
	--radius-lg: 0;
	--radius-xl: 0;
	--border-w: 2px;
	--border: #17201a;
	--border-hi: #17201a;
	--glass-border: #17201a;
	--shadow-sm: 3px 3px 0 #17201a;
	--shadow-md: 5px 5px 0 #17201a;
	--shadow-lg: 7px 7px 0 #17201a;
	--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px #17201a;
}

/* Especificidade (0,2,1): já venceria por conta própria, mas também fica
   depois de html.theme-dark por consistência com o resto do arquivo. */
html.theme-dark.design-brutalist {
	--border: #f2f7f4;
	--border-hi: #f2f7f4;
	--glass-border: #f2f7f4;
	--shadow-sm: 3px 3px 0 #f2f7f4;
	--shadow-md: 5px 5px 0 #f2f7f4;
	--shadow-lg: 7px 7px 0 #f2f7f4;
	--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px #f2f7f4;
}

html.font-alt {
	--font-sans: var(--font-sans-alt);
	--font-mono: var(--font-mono-alt);
	--font-title: var(--font-title-alt);
}