/*
Theme Name: Men Concept
Theme URI: https://menconcept.rs/
Author: Infinito Media
Author URI: https://infinitomedia.rs/
Description: Custom WooCommerce theme for Men Concept. Elementor-compatible for static pages, hook-based templates for shop pages.
Version: 0.8.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: menconcept
Tags: woocommerce, elementor, custom
WC requires at least: 8.0
WC tested up to: 10.9
*/

/*
 * This file holds ONLY the theme header and the design tokens.
 * All real styling lives in /assets/css/ and is enqueued in inc/enqueue.php.
 *
 * Why: tokens are the single source of truth. Change a value here and it
 * propagates everywhere. Never hardcode a colour or a spacing value in a
 * component file - always reference a token.
 */

:root {

	/* --- Colour -----------------------------------------------------------
	 * Palette is derived from the product itself: leather, nubuck, shoe cream.
	 * Adjust these after the HTML prototype is approved - nothing else changes.
	 */
	--mc-ink:          #14110F; /* warm near-black: text, primary buttons */
	--mc-ink-soft:     #3D3733; /* secondary text */
	--mc-nubuk:        #8A8078; /* taupe grey: meta, captions, disabled */
	--mc-line:         #E4DFD8; /* hairlines, borders */
	--mc-paper:        #FBFAF8; /* page background */
	--mc-paper-alt:    #F2EEE8; /* alternating section background */
	--mc-white:        #FFFFFF;
	--mc-cordovan:     #6B2233; /* shoe-cream oxblood: sale PRICE and CTA hover only */
	--mc-success:      #2F6B4F; /* in stock */
	--mc-warning:      #9A6212; /* low stock */

	/*
	 * Sale badge is deliberately NEUTRAL (ink), not cordovan.
	 * Reasoning: cordovan is the interaction accent (CTA hover, active price).
	 * If the sale badge also used it, the accent would stop meaning "act here"
	 * and start meaning "discount" - which pulls the brand toward looking like
	 * a discounter. A black badge reads premium; the saving still shows through
	 * the struck-through price. (This follows the master-plan style-guide note.)
	 */
	--mc-badge:        #14110F; /* sale / status badge background */

	/* --- Typography -------------------------------------------------------
	 * IMPORTANT for Serbian: any webfont must include Latin Extended-A,
	 * otherwise c, c, s, z, d fall back to another font and the text looks
	 * broken. Verify the charset before buying or self-hosting a font.
	 * The stack below is a system fallback so the theme works before fonts
	 * are chosen. Swap the two values, nothing else.
	 */
	--mc-font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mc-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Fluid type scale - clamp() so no separate mobile rules are needed */
	--mc-text-xs:   0.75rem;
	--mc-text-sm:   0.875rem;
	--mc-text-base: 1rem;
	--mc-text-lg:   1.125rem;
	--mc-text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--mc-text-2xl:  clamp(1.5rem,  1.3rem + 1vw,   2rem);
	--mc-text-3xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
	--mc-text-4xl:  clamp(2.25rem,  1.7rem + 2.8vw, 3.75rem);

	--mc-leading-tight: 1.15;
	--mc-leading-body:  1.6;
	--mc-tracking-wide: 0.08em;

	/* --- Spacing (4px base) ---------------------------------------------- */
	--mc-space-1:  0.25rem;
	--mc-space-2:  0.5rem;
	--mc-space-3:  0.75rem;
	--mc-space-4:  1rem;
	--mc-space-6:  1.5rem;
	--mc-space-8:  2rem;
	--mc-space-12: 3rem;
	--mc-space-16: 4rem;
	--mc-space-24: 6rem;

	/* Vertical rhythm between page sections - fluid */
	--mc-section-y: clamp(3rem, 2rem + 5vw, 6rem);

	/* --- Layout ---------------------------------------------------------- */
	--mc-container:      1280px;
	--mc-container-text: 720px; /* readable measure for prose */
	--mc-gutter:         clamp(1rem, 0.5rem + 2vw, 2.5rem);

	/* --- Borders & shadows ----------------------------------------------- */
	--mc-radius:    2px; /* deliberately tight - formal footwear, not playful */
	--mc-radius-lg: 4px;
	--mc-shadow-sm: 0 1px 2px rgba(20, 17, 15, 0.06);
	--mc-shadow-md: 0 4px 16px rgba(20, 17, 15, 0.08);

	/* --- Motion ---------------------------------------------------------- */
	--mc-ease:      cubic-bezier(0.2, 0, 0.2, 1);
	--mc-duration:  180ms;

	/* --- Z-index scale --------------------------------------------------- */
	--mc-z-header:  100;
	--mc-z-drawer:  200;
	--mc-z-overlay: 300;
}

/* Respect the user's OS-level motion preference. Accessibility floor. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--mc-duration: 1ms;
	}
}