/*
 * UENP Eventos — Design System / Tokens
 * Portal de Eventos da Universidade Estadual do Norte do Paraná
 *
 * Camada 1 de 4: tokens.css → base.css → components.css → layout.css
 * Nenhuma regra visual deve usar valor "cru": tudo referencia estas variáveis.
 */

:root {
	/* ---------------------------------------------------------------
	 * 1. COR — Azul institucional UENP
	 * Base oficial: #183883 (--uenp-blue-700)
	 * ------------------------------------------------------------- */
	--uenp-blue-50:  #f0f4fc;
	--uenp-blue-100: #dee7fa;
	--uenp-blue-200: #bccdf4;
	--uenp-blue-300: #8ba9e6;
	--uenp-blue-400: #5b80d4;
	--uenp-blue-500: #345ebd;
	--uenp-blue-600: #21469e;
	--uenp-blue-700: #183883; /* ← cor institucional */
	--uenp-blue-800: #142d67;
	--uenp-blue-900: #10234c;
	--uenp-blue-950: #0a1631;

	/* Acento institucional — dourado acadêmico, uso restrito e pontual */
	--uenp-gold-100: #f7efd9;
	--uenp-gold-300: #e2c88a;
	--uenp-gold-500: #c2a14a;
	--uenp-gold-600: #a5842f;
	--uenp-gold-700: #816524;

	/* Neutros — levemente frios, para harmonizar com o azul */
	--uenp-neutral-0:   #ffffff;
	--uenp-neutral-25:  #fbfcfe;
	--uenp-neutral-50:  #f6f8fb;
	--uenp-neutral-100: #eef1f6;
	--uenp-neutral-200: #dfe4ec;
	--uenp-neutral-300: #c6cedb;
	--uenp-neutral-400: #9aa5b8;
	--uenp-neutral-500: #626e82;
	--uenp-neutral-600: #526074;
	--uenp-neutral-700: #3b475a;
	--uenp-neutral-800: #27313f;
	--uenp-neutral-900: #161d27;

	/* Semânticas — nunca usadas sozinhas para comunicar informação (WCAG 1.4.1) */
	--uenp-success-50:  #e8f5ee;
	--uenp-success-600: #1a7a4c;
	--uenp-success-700: #14603c;
	--uenp-warning-50:  #fdf3e3;
	--uenp-warning-600: #9e610b;
	--uenp-warning-700: #85510a;
	--uenp-danger-50:   #fdeceb;
	--uenp-danger-600:  #b3261e;
	--uenp-danger-700:  #8f1e18;
	--uenp-info-50:     #e9f1fa;
	--uenp-info-600:    #185e9e;

	/* --- Papéis semânticos (usar SEMPRE estes, não a escala crua) --- */
	--uenp-color-bg:            var(--uenp-neutral-0);
	--uenp-color-bg-subtle:     var(--uenp-neutral-50);
	--uenp-color-bg-muted:      var(--uenp-neutral-100);
	--uenp-color-bg-inverse:    var(--uenp-blue-900);
	--uenp-color-bg-brand:      var(--uenp-blue-700);

	--uenp-color-text:          var(--uenp-neutral-900);
	--uenp-color-text-secondary:var(--uenp-neutral-600);
	--uenp-color-text-muted:    var(--uenp-neutral-500);
	--uenp-color-text-inverse:  var(--uenp-neutral-0);
	--uenp-color-text-brand:    var(--uenp-blue-700);

	--uenp-color-border:        var(--uenp-neutral-200);
	--uenp-color-border-strong: var(--uenp-neutral-300);
	/* Contorno de controle de formulário — WCAG 1.4.11 exige ≥3:1 */
	--uenp-color-border-input:  #8895ab;
	--uenp-color-border-brand:  var(--uenp-blue-700);

	--uenp-color-link:          var(--uenp-blue-600);
	--uenp-color-link-hover:    var(--uenp-blue-800);

	/* Foco — precisa vencer qualquer fundo; contraste ≥ 3:1 (WCAG 2.4.11/1.4.11) */
	--uenp-color-focus:         var(--uenp-blue-600);
	--uenp-color-focus-inverse: var(--uenp-gold-300);

	/* ---------------------------------------------------------------
	 * 2. TIPOGRAFIA
	 * Display/títulos: Source Serif 4 — gravidade institucional
	 * Interface/corpo:  Source Sans 3  — legibilidade e neutralidade
	 * Superfamília aberta, cobertura completa de pt-BR.
	 * ------------------------------------------------------------- */
	--uenp-font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
	--uenp-font-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--uenp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Escala fluida — min em 360px, max em 1440px */
	--uenp-text-display: clamp(2.25rem, 1.45rem + 3.55vw, 4rem);
	--uenp-text-h1:      clamp(1.875rem, 1.42rem + 2.02vw, 2.875rem);
	--uenp-text-h2:      clamp(1.5rem, 1.28rem + 0.98vw, 2.125rem);
	--uenp-text-h3:      clamp(1.25rem, 1.14rem + 0.49vw, 1.5rem);
	--uenp-text-h4:      clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem);
	--uenp-text-lead:    clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem);
	/*
	 * Corpo fluido, como o resto da escala. Não é enfeite: com a coluna de
	 * conteúdo mais larga (864px em tela grande), o corpo fixo em 16px daria
	 * ~108 caracteres por linha. A 17px a linha volta para ~101, que é a
	 * mesma métrica do tema em uso hoje.
	 */
	--uenp-text-body:    clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
	--uenp-text-sm:      0.9375rem;
	--uenp-text-xs:      0.8125rem;
	--uenp-text-label:   0.75rem;

	--uenp-leading-tight:   1.15;
	--uenp-leading-snug:    1.3;
	--uenp-leading-normal:  1.5;
	--uenp-leading-relaxed: 1.65;

	--uenp-tracking-tight: -0.015em;
	--uenp-tracking-normal: 0;
	--uenp-tracking-wide:  0.06em;

	--uenp-weight-regular: 400;
	--uenp-weight-medium:  500;
	--uenp-weight-semibold:600;
	--uenp-weight-bold:    700;

	/* Medida ideal de leitura */
	--uenp-measure: 68ch;

	/* ---------------------------------------------------------------
	 * 3. ESPAÇAMENTO — base 4px
	 * ------------------------------------------------------------- */
	--uenp-space-1:  0.25rem;   /*  4 */
	--uenp-space-2:  0.5rem;    /*  8 */
	--uenp-space-3:  0.75rem;   /* 12 */
	--uenp-space-4:  1rem;      /* 16 */
	--uenp-space-5:  1.25rem;   /* 20 */
	--uenp-space-6:  1.5rem;    /* 24 */
	--uenp-space-8:  2rem;      /* 32 */
	--uenp-space-10: 2.5rem;    /* 40 */
	--uenp-space-12: 3rem;      /* 48 */
	--uenp-space-16: 4rem;      /* 64 */
	--uenp-space-20: 5rem;      /* 80 */
	--uenp-space-24: 6rem;      /* 96 */

	/* Ritmo vertical entre seções — fluido */
	--uenp-section-y: clamp(3rem, 2rem + 4.4vw, 5.5rem);
	--uenp-section-y-sm: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);

	/* ---------------------------------------------------------------
	 * 4. LAYOUT
	 * ------------------------------------------------------------- */
	--uenp-container: 1280px;      /* conteúdo padrão */
	--uenp-container-wide: 1416px; /* faixas largas  */
	--uenp-container-narrow: 780px;/* texto corrido  */
	--uenp-gutter: clamp(1rem, 0.55rem + 2vw, 2rem);

	/* ---------------------------------------------------------------
	 * 5. FORMA
	 * ------------------------------------------------------------- */
	--uenp-radius-xs: 2px;
	--uenp-radius-sm: 4px;
	--uenp-radius-md: 8px;
	--uenp-radius-lg: 12px;
	--uenp-radius-xl: 18px;
	--uenp-radius-pill: 999px;

	--uenp-border-hairline: 1px solid var(--uenp-color-border);

	/* Sombras discretas, com tinta azulada (nunca preto puro) */
	--uenp-shadow-xs: 0 1px 2px rgba(16, 35, 76, 0.06);
	--uenp-shadow-sm: 0 1px 2px rgba(16, 35, 76, 0.06), 0 2px 6px rgba(16, 35, 76, 0.05);
	--uenp-shadow-md: 0 2px 4px rgba(16, 35, 76, 0.05), 0 8px 20px rgba(16, 35, 76, 0.08);
	--uenp-shadow-lg: 0 4px 8px rgba(16, 35, 76, 0.05), 0 18px 40px rgba(16, 35, 76, 0.12);
	--uenp-shadow-focus: 0 0 0 3px var(--uenp-neutral-0), 0 0 0 6px var(--uenp-color-focus);

	/* ---------------------------------------------------------------
	 * 6. MOVIMENTO — sempre com propósito, sempre curto
	 * ------------------------------------------------------------- */
	--uenp-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--uenp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--uenp-duration-fast: 140ms;
	--uenp-duration: 220ms;
	--uenp-duration-slow: 380ms;

	/* Multiplicador global desligado por prefers-reduced-motion (ver base.css) */
	--uenp-motion: 1;

	/* ---------------------------------------------------------------
	 * 7. ELEVAÇÃO (z-index) — escala única, sem números mágicos
	 * ------------------------------------------------------------- */
	--uenp-z-base: 1;
	--uenp-z-sticky: 100;
	--uenp-z-header: 200;
	--uenp-z-dropdown: 300;
	/*
	 * A barra do Pojo Accessibility (plugin ativo em rede) é `position: fixed`
	 * com `z-index: 9999`. Camadas modais precisam ficar ACIMA dela, senão o
	 * menu mobile aberto seria pintado por cima pela barra, que também não
	 * seria coberta pelo scrim.
	 */
	--uenp-z-overlay: 10000;
	--uenp-z-modal: 10001;
	--uenp-z-skiplink: 10002;

	/* Altura do header — lida por JS e pelo scroll-padding */
	--uenp-header-h: 88px;
	--uenp-header-h-compact: 64px;
}

/* Escala reduzida do header em telas pequenas */
@media (max-width: 782px) {
	:root {
		--uenp-header-h: 64px;
		--uenp-header-h-compact: 56px;
	}
}

/*
 * Respeito a prefers-reduced-motion: desliga transições/animações no nível do token.
 * Regras de componente herdam automaticamente.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--uenp-motion: 0;
		--uenp-duration-fast: 1ms;
		--uenp-duration: 1ms;
		--uenp-duration-slow: 1ms;
	}
}