/*
 * Tokens do design system — DESIGN.md §5, §39–43.
 *
 * Primeiro os tokens da marca (--arsenal-*); depois o mapeamento para as
 * variáveis que o Woodmart já usa, para que os componentes nativos do tema
 * herdem a identidade sem precisar reescrever o CSS deles.
 */

:root {
	/* Cores (§5, §39) */
	--arsenal-black: #080B10;
	--arsenal-dark: #0D1117;
	--arsenal-card: #11161D;
	--arsenal-card-hover: #171D26;
	--arsenal-border: #242B35;
	--arsenal-white: #F5F7FA;
	--arsenal-gray: #8B95A5;
	--arsenal-blue: #147DFF;
	--arsenal-blue-light: #3D9BFF;
	/* Fundo de botão: #147DFF com texto branco dá 3,88:1; este dá 4,73:1 (PLANO §2-D). */
	--arsenal-blue-button: #0F6FE6;
	--arsenal-gold: #D6A84F;
	--arsenal-danger: #FF4655;

	--arsenal-blue-rgb: 20, 125, 255;
	--arsenal-gold-rgb: 214, 168, 79;

	/* Tipografia (§9) */
	--arsenal-font-title: "Rajdhani", "Barlow Condensed", "Arial Narrow", sans-serif;
	--arsenal-font-text: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Espaçamento (§40) */
	--arsenal-space-1: 4px;
	--arsenal-space-2: 8px;
	--arsenal-space-3: 12px;
	--arsenal-space-4: 16px;
	--arsenal-space-5: 24px;
	--arsenal-space-6: 32px;
	--arsenal-space-7: 48px;
	--arsenal-space-8: 64px;
	--arsenal-space-9: 80px;
	--arsenal-space-10: 96px;

	/* Raios (§41) */
	--arsenal-radius-input: 8px;
	--arsenal-radius-card: 10px;
	--arsenal-radius-button: 8px;
	--arsenal-radius-badge: 6px;
	--arsenal-radius-special: 12px;

	/* Sombras (§42) e glow de hover (§8.2) */
	--arsenal-shadow: 0 12px 40px rgba(0, 0, 0, .25);
	--arsenal-glow-blue: 0 0 30px rgba(var(--arsenal-blue-rgb), .12);
	--arsenal-glow-gold: 0 0 30px rgba(var(--arsenal-gold-rgb), .14);

	/* Movimento (§31) */
	--arsenal-dur-micro: 200ms;
	--arsenal-dur-card: 250ms;
	--arsenal-dur-large: 400ms;
	--arsenal-ease: cubic-bezier(.2, .7, .2, 1);
}

/*
 * Mapeamento para o Woodmart. O site roda no modo escuro do tema, que define
 * estas variáveis em [class*="color-scheme-light"]; o seletor com `html`
 * ganha em especificidade sem precisar de !important.
 */
:root,
html [class*="color-scheme-light"],
html .global-color-scheme-light {
	--wd-primary-color: var(--arsenal-blue);
	--wd-alternative-color: var(--arsenal-gold);

	--wd-main-bgcolor: var(--arsenal-black);
	--bgcolor-white: var(--arsenal-dark);
	--bgcolor-white-rgb: 13, 17, 23;
	--bgcolor-gray-100: var(--arsenal-black);
	--bgcolor-gray-200: var(--arsenal-card);
	--bgcolor-gray-300: var(--arsenal-card-hover);

	--brdcolor-gray-200: var(--arsenal-border);
	--brdcolor-gray-300: var(--arsenal-border);
	--brdcolor-gray-400: #313A46;
	--brdcolor-gray-500: #3A4452;

	--wd-text-color: var(--arsenal-gray);
	--wd-title-color: var(--arsenal-white);
	--wd-entities-title-color: var(--arsenal-white);
	--wd-entities-title-color-hover: var(--arsenal-blue-light);
	--wd-link-color: var(--arsenal-white);
	--wd-link-color-hover: var(--arsenal-blue-light);

	--wd-form-bg: var(--arsenal-dark);
	--wd-form-color: var(--arsenal-white);
	--wd-form-brd-color: var(--arsenal-border);
	--wd-form-brd-color-focus: var(--arsenal-blue);
	--wd-form-placeholder-color: var(--arsenal-gray);
	--wd-form-brd-radius: var(--arsenal-radius-input);

	--wd-brd-radius: var(--arsenal-radius-card);

	--wd-text-font: var(--arsenal-font-text);
	--wd-title-font: var(--arsenal-font-title);
	--wd-title-font-weight: 600;
	--wd-entities-title-font: var(--arsenal-font-text);
	--wd-entities-title-font-weight: 600;
	--wd-widget-title-font: var(--arsenal-font-title);
	--wd-widget-title-font-weight: 600;
	--wd-header-el-font: var(--arsenal-font-title);
	--wd-header-el-font-weight: 600;

	/* Botão padrão = secundário da §29.2 */
	--btn-default-bgcolor: transparent;
	--btn-default-bgcolor-hover: transparent;
	--btn-default-color: var(--arsenal-white);
	--btn-default-color-hover: var(--arsenal-white);
	--btn-default-brd-radius: var(--arsenal-radius-button);

	/*
	 * Botão de destaque = primário da §29.1, com o ajuste de contraste do
	 * PLANO-DESIGN.md §2-D: fundo #0F6FE6 com texto branco (4,73:1); no hover
	 * o fundo clareia e o texto escurece (branco sobre #3D9BFF teria 2,86:1).
	 */
	--btn-accented-bgcolor: var(--arsenal-blue-button);
	--btn-accented-bgcolor-hover: var(--arsenal-blue-light);
	--btn-accented-color: #FFFFFF;
	--btn-accented-color-hover: var(--arsenal-black);
	--btn-accented-brd-radius: var(--arsenal-radius-button);
	--btn-accented-box-shadow: none;
	--btn-accented-box-shadow-hover: var(--arsenal-glow-blue);
	--btn-accented-box-shadow-active: none;
	--btn-accented-bottom-active: 0;
	--btn-accented-font-weight: 700;
	--btn-accented-font-family: var(--arsenal-font-text);

	--wd-tooltip-bg: var(--arsenal-card-hover);
	--scrollbar-track-bg: var(--arsenal-dark);
	--scrollbar-thumb-bg: var(--arsenal-border);
}