/*
 * Site-wide achromatic design system, inspired by Farfetch's white-cube
 * approach: no chromatic color anywhere in the interface, zero
 * border-radius, zero box-shadow. Color comes only from product photography.
 *
 * Implemented mostly as overrides of the theme's own CSS custom properties
 * (colors, typography), which most of Minimog's compiled CSS already reads
 * from — plus a global reset for radius/shadow, since those are hardcoded
 * throughout the theme rather than driven by variables.
 */

:root {
	/* Core palette */
	--minimog-color-heading: #222222;
	--minimog-color-text: #727272;
	--minimog-color-text-lighten: #b6b6b6;
	--minimog-color-primary: #222222;
	--minimog-color-primary-rgb: 34, 34, 34;
	--minimog-color-secondary: #222222;
	--minimog-color-link: #222222;
	--minimog-color-link-hover: #727272;

	/* Boxes / surfaces */
	--minimog-color-box-border: #e6e6e6;
	--minimog-color-box-white-border: #e6e6e6;
	--minimog-color-box-white-border-02: #e6e6e6;
	--minimog-color-box-white-border-03: #e6e6e6;
	--minimog-color-box-white-background: #ffffff;
	--minimog-color-box-grey-background: #f5f5f5;

	/* Primary button (e.g. "Comprar Agora", "Adicionar ao carrinho") */
	--minimog-color-button-background: #222222;
	--minimog-color-button-text: #ffffff;
	--minimog-color-button-border: #222222;
	--minimog-color-button-hover-background: #ffffff;
	--minimog-color-button-hover-text: #222222;
	--minimog-color-button-hover-border: #222222;

	/* Secondary / outline button */
	--minimog-color-button2-background: transparent;
	--minimog-color-button2-text: #222222;
	--minimog-color-button2-border: #222222;
	--minimog-color-button2-hover-background: #222222;
	--minimog-color-button2-hover-text: #ffffff;
	--minimog-color-button2-hover-border: #222222;

	/* Form fields */
	--minimog-color-form-background: #ffffff;
	--minimog-color-form-border: #b6b6b6;
	--minimog-color-form-text: #222222;
	--minimog-color-form-focus-background: #ffffff;
	--minimog-color-form-focus-border: #222222;
	--minimog-color-form-focus-text: #222222;
	--minimog-color-form-focus-shadow: none;
	--minimog-color-form-shadow: none;
	--minimog-color-form-submit-background: #222222;
	--minimog-color-form-submit-text: #ffffff;
	--minimog-form-input-normal-rounded: 0px;

	/* Typography */
	--minimog-typography-body-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--minimog-typography-body-font-weight: 400;
	--minimog-typography-headings-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--minimog-typography-headings-font-weight: 400;
	--minimog-typography-headings-font-weight-secondary: 700;
	--minimog-typography-headings-2-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--minimog-typography-headings-2-font-weight: 400;
	--minimog-typography-button-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--minimog-typography-button-font-weight: 400;
	--minimog-typography-form-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--minimog-typography-form-font-weight: 400;
}

body,
button,
input,
select,
textarea {
	font-family: var(--minimog-typography-body-font-family);
}

/* input[type=date] (and similar) aren't in the theme's own list of
 * styled input types, so they only ever showed the browser's native
 * border — never matched the rest of the form, valid or invalid. */
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime-local] {
	width: 100%;
	padding: 3px 18px;
	min-height: var(--minimog-form-input-height, 45px);
	outline: none;
	font-family: var(--minimog-typography-form-font-family);
	font-size: var(--minimog-typography-form-font-size);
	font-weight: var(--minimog-typography-form-font-weight);
	color: var(--minimog-color-form-text);
	border: 1px solid var(--minimog-color-form-border);
	background-color: var(--minimog-color-form-background);
}

input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime-local]:focus {
	color: var(--minimog-color-form-focus-text);
	border-color: var(--minimog-color-form-focus-border);
	background-color: var(--minimog-color-form-focus-background);
}

/* No chromatic color, no radius, no shadow — anywhere. */
*,
*::before,
*::after {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Exception: the radio/checkbox selection indicator itself (drawn via
 * :before/:after), not the field boxes the "0 radius" rule targets.
 * Forcing these square changed their visual weight and threw off
 * alignment next to the label text (e.g. shipping method list). */
input[type=radio]:before,
input[type=radio]:after {
	border-radius: 50% !important;
}

input[type=checkbox]:before {
	border-radius: 0.125rem !important;
}

/* .page-top-bar keeps whatever background color is configured in the
 * Customizer — not forced into the achromatic palette. */

/* Secure-checkout / trust badge box */
.product-trust-badge {
	background-color: #f5f5f5;
}

/* Form validation errors: no visual difference on the field itself
 * (the hardcoded #d9534f red doesn't come from a variable, so it needs
 * a direct override) — the bold error message below is the only signal. */
.woocommerce form .form-row.woocommerce-invalid .select2-container:not(.select2-container--open) .select2-selection,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--minimog-color-form-border);
	border-width: 1px;
}

.woocommerce form .form-row span.form-error {
	color: #222222;
	font-weight: 700;
}