/**
 * Design tokens for tienda3 (Male Fashion / Colorlib template skin).
 * css/style.css was written with hardcoded hex colors throughout; this file
 * defines the same colors as CSS custom properties, and style.css has been
 * edited to reference them via var(...) wherever a color repeats across the
 * stylesheet. To restyle the whole storefront, change the values here —
 * nothing else needs to be touched.
 *
 * Must load AFTER the vendor CSS (bootstrap/owl-carousel/nice-select/etc.)
 * and BEFORE style.css.
 */
:root {
	--color-primary: #e53637;       /* buttons, prices, active nav/tabs, sale labels */
	--color-dark: #111111;          /* headings */
	--color-dark-alt: #0d0d0d;      /* prices, quantity controls, scrollbar cursor */
	--color-text: #3d3d3d;          /* body copy, form placeholders */
	--color-text-muted: #b7b7b7;    /* meta text, muted labels */
	--color-heading-alt: #444444;   /* secondary text (checkout/blog sidebar) */
	--color-border: #e5e5e5;        /* general borders/dividers */
	--color-border-alt: #e1e1e1;    /* form input borders */
	/* Darker than the original flat #f3f2ee, plus a subtle left-to-right (x-axis)
	   gradient instead of a flat fill. Safe as a drop-in because every usage in
	   style.css sets it through the `background` shorthand (never
	   `background-color`), which accepts a gradient just as well as a color. */
	--color-light-bg: linear-gradient(90deg, #e6e4d9 0%, #d4d2c3 100%);
	--color-white: #ffffff;

	/* Hero racing stripes (.hero__items:after in style.css) — a muted
	   "Nardo grey" tone distinct from --color-dark so the stripe reads as its
	   own graphic element rather than blending into the scrim behind it. */
	--hero-stripe-gray: #59595b;

	/* Semantic status colors — not tied to any one component; use these for
	   any success/warning/danger/info background or text (stock badges,
	   form errors, future alerts) instead of ad-hoc hex values, so a status
	   color only needs to change here. --color-danger defaults to the brand
	   red since this theme's accent already reads as "alert" red; give it
	   its own value if the brand color ever changes to something that no
	   longer works for errors. */
	--color-success: #3d9a5c;
	--color-warning: #e0a800;
	--color-danger: var(--color-primary);
	--color-info: #3b82c4;

	/* Preloader (#preloder / .loader in css/style.css): full-screen splash
	   background + the two colors its spinner alternates between. Every
	   page can override these per-deployment from templates/data.php's
	   $site['loader_*'] instead of editing this file — see
	   templates/head.php for how those get applied. */
	--color-loader-bg: #000000;
	--color-loader-a: var(--color-primary);
	--color-loader-b: var(--color-dark-alt);

	/* Header height — the single source of truth for the nav bar's size.
	   .header__logo/.header__menu/.header__nav__option all size themselves
	   to this (see css/style.css), and the logo image is capped to fit
	   inside it, so changing one number here resizes and re-centers the
	   whole header instead of a differently-sized logo silently growing it
	   and throwing off the (previously hardcoded) hamburger position. */
	--header-height: 100px;
	--header-height-mobile: 70px;

	/* Buttons — shared shape/typography for every solid CTA button
	   (.primary-btn: hero slider CTA, detail page "agregar al carrito",
	   .site-btn: cart/checkout confirm buttons) so they always match, plus
	   the color used by the text-style "add to cart" link on product cards
	   and the border on the mobile burger button. css/style.css applies
	   these via var(...); change a value here to restyle every button. */
	--btn-font-size: 13px;
	--btn-font-weight: 700;
	--btn-letter-spacing: 4px;
	--btn-radius: 0px;
	--btn-icon-radius: 2px;    /* small square icon buttons: burger toggle, cart qty +/-/remove */
	--btn-padding-y: 14px;
	--btn-padding-x: 30px;
	--btn-sm-padding-y: 0.25rem;  /* Bootstrap's .btn-sm/.btn-group-sm > .btn, tokenized */
	--btn-sm-padding-x: 0.5rem;
	--btn-sm-font-size: 0.875rem;
	--btn-border-width: 1px;
	--btn-transition: 0.3s;
	--btn-primary-bg: var(--color-dark);
	--btn-primary-color: var(--color-white);
	--btn-accent-color: var(--color-primary); /* "+ Agregar al carrito" card link */

	/* Inputs — search box (product sidebar), cart discount code field,
	   checkout form fields, and quantity steppers all share these so one
	   edit restyles every text input/select in the storefront. */
	--input-height: 42px;
	--input-border-width: 1px;
	--input-border-color: var(--color-border);
	--input-radius: 0px;
	--input-bg: var(--color-white);
	--input-color: var(--color-text-muted);
	--input-placeholder-color: var(--color-text-muted);
	--input-padding-x: 20px;
	--input-font-size: 14px;
	--input-focus-border-color: var(--color-primary);

	/* Typography — separate tokens for headings vs. body copy so either can
	   swap to a different Google Font (change the family here AND the
	   <link> in templates/head.php) without touching the other. Both
	   fall back to the browser's generic sans-serif if the CDN import
	   ever fails to load.
	   Heading: Oswald (loaded via Google Fonts in templates/head.php).
	   Body: "Google Sans" is Google's own product typeface — it is NOT
	   distributed on the public Google Fonts CDN, only installed locally on
	   Android/ChromeOS. It's kept first in the stack so those devices render
	   the real thing; every other device falls through to Roboto (Google's
	   public typeface, the closest CDN-available match, loaded in head.php),
	   then the system default. */
	--font-heading: 'Oswald', 'Arial Narrow', sans-serif;
	--font-heading-weight: 700;
	--font-body: 'Google Sans', 'Roboto', Arial, sans-serif;
	--font-body-weight: 400;

	/* Text shadows — apply to any heading/link sitting directly on top of a
	   photo (hero slides, breadcrumb band, banner tiles) so it stays
	   readable no matter how light/dark/busy that particular image is,
	   without needing to hand-tune contrast per photo. */
	--text-shadow-strong: 0 2px 10px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.55);
	--text-shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.45);

	/* Scrim — the dark tint layered between a background photo and the text
	   sitting on it (hero, breadcrumb, banner tiles), combined with the
	   text-shadow tokens above for guaranteed contrast on any image. */
	--overlay-scrim-strong: rgba(0, 0, 0, 0.55);
	--overlay-scrim-soft: rgba(0, 0, 0, 0.35);

	/* Header + offcanvas (mobile slide-out nav) surface — both intentionally
	   dark with light text/icons/links so the primary chrome reads as one
	   consistent band regardless of page content. Flip *-bg back to a light
	   color (and drop the icon filter) to re-theme without touching markup.
	   --header-icon-filter recolors the template's flat dark PNG icons
	   (img/icon/search.png, cart.png) to light since they're raster assets,
	   not font icons/currentColor SVGs. */
	--header-bg: var(--color-primary);
	--header-text: var(--color-white);
	--header-text-muted: rgba(255, 255, 255, 0.65);
	--header-border-color: rgba(255, 255, 255, 0.12);
	--header-icon-filter: brightness(0) invert(1);

	--offcanvas-bg: var(--color-dark);
	--offcanvas-text: var(--color-white);
	--offcanvas-text-muted: rgba(255, 255, 255, 0.65);
}