@layer tokens, base, components, pages, themes;
@layer tokens {
: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;
	--navbar-h: 56px;
	/* Pills são controles compactos, com cantos curtos — não cápsulas. */
	--radius-pill: 4px;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 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);
	--focus: var(--success);
	--border-strong: var(--border-hi);
	--accent: var(--success);
	--color-primary: var(--brand);
	--on-brand: var(--text-on-accent);
	--color-text-muted: var(--muted);

	/* 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;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 40px;
	--page-gutter: clamp(16px, 2.4vw, 32px);
	--page-top: clamp(20px, 3vw, 32px);
	--page-bottom: clamp(36px, 5vw, 64px);
	--section-gap: clamp(18px, 2.2vw, 28px);
	--panel-padding: clamp(16px, 1.8vw, 22px);
	--app-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M0 18H72M18 0V72' stroke='%23246b45' stroke-opacity='.028' stroke-width='.7'/%3E%3Ccircle cx='54' cy='54' r='.8' fill='%23246b45' fill-opacity='.055'/%3E%3C/svg%3E"); --sidebar-width:268px; --sidebar-rail:72px; --topbar-height:56px; --text-xs: 12px; --text-sm: 13px; --text-md: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --control-h: 44px; --radius-xl: var(--radius-lg); --z-local: 1; --z-sticky: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400; --map-missing: var(--surface-3); --map-stroke: var(--border-hi); --chart-up: var(--success); --chart-down: var(--danger); --chart-flat: var(--neutral); --chart-grid: var(--border); --chart-axis: var(--border-hi); --chart-label: var(--muted); --auth-copy: #f7fbf7; --overlay: rgb(0 0 0 / .48); --skeleton: var(--surface-3); --palette-d97706: #d97706; --palette-f59e0b: #f59e0b; --palette-64748b: #64748b; --palette-94a3b8: #94a3b8; --palette-2563eb: #2563eb; --palette-60a5fa: #60a5fa; --palette-a78bfa: #a78bfa; --palette-fde68a: #fde68a; --palette-f8fafc: #f8fafc; --palette-fef3c7: #fef3c7; --palette-cbd5e1: #cbd5e1; --palette-e2e8f0: #e2e8f0; --palette-4ade80: #4ade80; --palette-e8eee9: #e8eee9; --palette-d9ded8: #d9ded8; --palette-009b3a: #009b3a; --palette-ffdf00: #ffdf00; --palette-ed1c24: #ed1c24; --palette-191713: #191713; --palette-07120e: #07120e; --palette-f4f8ed: #f4f8ed; --palette-164433: #164433; --palette-10251d: #10251d; --palette-c7c7c7: #c7c7c7; --palette-a61b1b: #a61b1b
; --z-local-2: 2; --z-local-30: 30; --z-local-6: 6; --z-local-5: 5; --z-local-negative-3: -3; --z-local-1: 1; --z-local-20: 20; --z-local-10: 10; --z-local-4: 4; --palette-8b5a2b: #8b5a2b; --palette-d8e7dd: #d8e7dd; --palette-a9cbb5: #a9cbb5; --palette-6fa281: #6fa281; --palette-246b45: #246b45; --palette-294134: #294134; --palette-365d45: #365d45; --palette-4b815f: #4b815f; --palette-73c28f: #73c28f}
}
