/**
 * izebuy design tokens (A1).
 * All CSS custom properties live here — rebrand by editing this file only.
 * Loaded first; every other design-system CSS file inherits from these values.
 * Token values are also overridden at runtime by classifieds_izebuy_brand_css()
 * in includes/frontend.php which reads the saved Theme Options colours.
 */
:root {
	/* Brand palette -------------------------------------------------------- */
	--ize-accent: #f57c00;           /* izebuy orange (Submit Ad CTA, featured) */
	--ize-accent-700: #e06f00;

	/* Primary brand colour (izebuy green) — used for UI accents: links, active
	 * states, focus rings, category labels and icons. Driven by Theme Options →
	 * Appearance → "Brand Colour" (ize_brand) via classifieds_izebuy_brand_css().
	 * Kept separate from --ize-accent, which stays orange for the Submit Ad CTA
	 * and featured-ad badges. */
	--ize-brand: #42bf62;
	--ize-brand-hover: color-mix(in srgb, var(--ize-brand) 80%, #000);

	/* Top bar — brand green. Dark ink is required because white text on
	 * #42bf62 fails WCAG contrast (~2.4:1); #0c2f17 on #42bf62 is ~7:1. */
	--ize-topbar: #42bf62;
	--ize-topbar-ink: #0c2f17;
	--ize-topbar-hover: #38a955;

	/* Brand-green gradient for store banners / image placeholders. Built from
	 * the top-bar tokens so it follows the "Top Bar" colours set in Theme
	 * Options (classifieds_izebuy_brand_css) instead of a fixed pair. */
	--ize-banner-gradient: linear-gradient(135deg, var(--ize-topbar), var(--ize-topbar-hover));

	/* Neutrals ------------------------------------------------------------- */
	--ize-ink: #1b1f23;              /* primary text */
	--ize-ink-2: #545b62;            /* secondary / muted text */
	--ize-ink-3: #6b7280;            /* tertiary/muted text — AA (~4.6:1 on white) */
	--ize-line: #e6e8eb;             /* dividers / input borders */
	--ize-surface: #ffffff;
	--ize-surface-2: #f5f6f8;        /* light grey surface — cards, hovers, skeletons */
	--ize-surface-3: #eef0f3;        /* hover / pressed surface */

	/* Site page background — the canvas behind all content. Driven by Theme
	 * Options → Appearance → Theme ("Page Background Colour", ize_page_bg) via
	 * classifieds_izebuy_brand_css(). Defaults to the light-grey surface so the
	 * look is unchanged until an admin picks a colour. Kept separate from
	 * --ize-surface-2 (which is reused widely for cards/hovers/skeletons) so
	 * recolouring the page canvas doesn't repaint every component. */
	--ize-page-bg: var(--ize-surface-2);

	/* Feedback ------------------------------------------------------------- */
	--ize-danger: #d92d20;
	--ize-warning: #f59e0b;
	--ize-success: #16a34a;          /* used for active bottom-nav state */
	/* Buttons (general, non-Submit): green to match the header, with dark ink for
	   WCAG-AA contrast — white on this green fails (2.4:1), dark ink passes (6.2:1).
	   Hover is a slightly lighter green. The Submit button keeps --ize-accent. */
	--ize-btn-bg: #42bf62;
	--ize-btn-bg-hover: #5fce7d;
	--ize-btn-ink: #0c2f17;
	/* Footer (now editable in Theme Options). */
	--ize-footer-bg: #273642;
	--ize-footer-ink: #ffffff;
	--ize-footer-link: #42bf62;
	/* Copyright bar (the strip below the footer) — plain text, no links. */
	--ize-copyright-bg: #1d2a34;
	--ize-copyright-ink: #9aa4ac;
	/* Breadcrumb trail colour (links + text). */
	--ize-breadcrumb: #3c4a55;
	/* Listing prices: the price, the "Contact for details" label, and "Free". */
	--ize-price: #208ee6;
	--ize-price-call: #208ee6;
	--ize-price-free: #16a34a;
	/* Ad status badges (My Ads / listing status). */
	--ize-badge-live: #78c273;
	--ize-badge-pending: #49a3eb;
	--ize-badge-expired: #ebb243;
	--ize-badge-unpaid: #f66a45;
	--ize-badge-off: #bbc4cb;

	/* Typography — 16px base, Bootstrap type scale (16/20/24/28/32/40) ------ */
	/* Site-wide font + an optional separate button font (both default Montserrat,
	   driven by Theme Options). Every font-family in the theme points at these. */
	--ize-font: "Montserrat", Helvetica, Arial, sans-serif;
	--ize-font-btn: var(--ize-font);
	/* "Start big" global offset added to every step below. Dial this ONE value
	 * down (5px → 3px → 0) to shrink the whole site at once; or lower an
	 * individual step's rem to reduce just that one. */
	--ize-fs-bump: 3px;
	--ize-fs-xs: calc(0.75rem + var(--ize-fs-bump));    /* 12 + 3 = 15px — fine print, badges */
	--ize-fs-sm: calc(0.875rem + var(--ize-fs-bump));   /* 14 + 3 = 17px — secondary / meta */
	--ize-fs-base: calc(1rem + var(--ize-fs-bump));     /* 16 + 3 = 19px — body, H6 */
	--ize-fs-md: calc(1.125rem + var(--ize-fs-bump));   /* 18 + 3 = 21px — nav / price */
	--ize-fs-lg: calc(1.25rem + var(--ize-fs-bump));    /* 20 + 3 = 23px — H5 */
	--ize-fs-xl: calc(1.5rem + var(--ize-fs-bump));     /* 24 + 3 = 27px — H4 / section titles */
	--ize-fs-2xl: calc(1.75rem + var(--ize-fs-bump));   /* 28 + 3 = 31px — H3 */
	--ize-fs-3xl: calc(2rem + var(--ize-fs-bump));      /* 32 + 3 = 35px — H2 */
	--ize-fs-4xl: calc(2.5rem + var(--ize-fs-bump));    /* 40 + 3 = 43px — H1 */
	--ize-lh: 1.5;                   /* body */
	--ize-lh-heading: 1.25;          /* headings */

	/* Spacing (4 px base) -------------------------------------------------- */
	--ize-1: 4px;
	--ize-2: 8px;
	--ize-3: 12px;
	--ize-4: 16px;
	--ize-5: 24px;
	--ize-6: 32px;
	--ize-7: 48px;

	/* Shape ---------------------------------------------------------------- */
	--ize-radius-sm: 6px;
	--ize-radius: 10px;
	--ize-radius-lg: 16px;
	--ize-radius-pill: 999px;
	--ize-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--ize-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
	--ize-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12);

	/* Layout --------------------------------------------------------------- */
	/* Bounded content width: wide enough for four roomy cards on desktop
	 * (≈ (1400 − 32 padding − 48 gaps) / 4 ≈ 330px each) while still leaving a
	 * side gutter on larger screens. */
	--ize-container: 1400px;
	--ize-header-bar-h: 56px;        /* logo + nav row height */
	--ize-search-row-h: 56px;        /* search input row height */
	--ize-bottom-nav-h: 58px;        /* mobile tab bar height */

	/* Z-index ladder ------------------------------------------------------- */
	--ize-z-header: 1000;
	--ize-z-bottom-nav: 1050;
	--ize-z-drawer: 1100;

	/* Motion --------------------------------------------------------------- */
	--ize-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ── Mobile: its own (smaller) bump ───────────────────────────────────────────
 * Phones get a much smaller bump than tablet/desktop — the "start big" boost is
 * mostly for big screens. Every --ize-fs-* token is calc(rem + the bump), so this
 * one value re-sizes the whole phone scale; no per-element mobile media queries. */
@media (max-width: 767.98px) {
	:root {
		--ize-fs-bump: 1px;
	}
}