/**
 * assets/css/tokens.css
 * The design system contract.
 *
 * This file is the only place in the project where a raw colour, size or radius
 * is written down. Plugin CSS, template CSS and Elementor's own global settings
 * all consume these as var(), never as literals.
 *
 * The reason is not tidiness. It is that a reskin has to be a change to this one
 * file — no plugin code, no templates, and above all no data. The reference
 * implementation this project draws on documents the same rule (see
 * balad-data/DESIGN-SYSTEM.md); the failure mode it prevents is a "redesign"
 * turning into a migration because brand values ended up baked into content.
 *
 * Rules for anyone editing this project:
 *   - No hex, rgb() or hsl() outside this file.
 *   - No px outside this file except a 1px hairline border.
 *   - A new visual value gets a token here first, then gets used.
 *   - Token names describe role (--izoom-text-muted), never appearance
 *     (--izoom-grey-600) — a role survives a palette change, a colour name does not.
 *
 * 2026-09-18: reskinned again to match the approved design mockups in
 * `design/*.html` + `design/tokens.css` (the client-approved visual design —
 * Inter, light-only). Brand accent is #2913aa, the neutrals are tinted toward
 * its hue, and the four state colours stay on their own hues so a status is
 * never mistaken for the brand. That file is now the value source;
 * this file keeps the `--izoom-*` names everything else already references, per
 * the naming rule below. The previous white/navy palette (2026-09-12) and its
 * dark-mode variant are gone: the approved mockups are light-only and the
 * navy dark-mode swap was never checked against Elementor content, which
 * doesn't repaint itself for `prefers-color-scheme` — it produced unreadable
 * dark-on-dark text on the first Elementor template built against it.
 */

:root {
	/* ---------------------------------------------------------- colour */
	--izoom-text: #17161d;
	--izoom-text-muted: #625e78;
	--izoom-link: #251197;
	--izoom-accent: #2913aa;
	--izoom-accent-hover: #251197;
	--izoom-accent-tint: #f3f1fd;
	/* Accent hairline for a sponsored card's border (design --color-accent-100). */
	--izoom-accent-line: #dfdafb;
	--izoom-on-accent: #ffffff;
	--izoom-success: #1a7f4e;
	--izoom-warning: #9a5b00;
	--izoom-danger: #b3261e;
	--izoom-info: #1d5fb4;

	/* Tinted backgrounds that pair with the four state colours above
	   (design/tokens.css --color-*-bg). An open/closed pill, a verified badge
	   or a closure banner is state colour on its own tint, never on grey. */
	--izoom-success-tint: #e7f5ec;
	--izoom-warning-tint: #fdf1dc;
	--izoom-danger-tint: #fbe9e8;
	--izoom-info-tint: #e8f0fc;

	/* Primary buttons sit one step darker than the accent (design
	   --color-accent-600/700): white text on the raw accent is 3.6:1 and
	   fails WCAG AA; on this it passes. */
	--izoom-button: #251197;
	--izoom-button-hover: #1f0e80;
	/* Focus ring edge for text fields (design --color-accent-400). */
	--izoom-focus: #381ae6;

	--izoom-surface: #ffffff;
	--izoom-surface-alt: #f9f9fa;
	--izoom-surface-sunken: #f1f1f4;
	--izoom-border: #e3e2e9;
	--izoom-border-strong: #cac9d4;
	/* Lowest-emphasis text that still passes 4.5:1 on white. */
	--izoom-text-subtle: #6b6783;
	/* Glyph grey for decorative icons (design --color-gray-400). */
	--izoom-icon-muted: #a19eb3;

	--izoom-star: #2913aa;
	--izoom-star-empty: #cac9d4;

	--izoom-overlay: rgba(23, 22, 29, 0.55);
	--izoom-scrim-bottom: linear-gradient(to top, rgba(23, 22, 29, 0.75), rgba(23, 22, 29, 0));

	--izoom-shadow-sm: 0 1px 2px rgba(23, 22, 29, 0.06);
	--izoom-shadow-md: 0 4px 12px rgba(23, 22, 29, 0.08);
	--izoom-shadow-lg: 0 12px 32px rgba(23, 22, 29, 0.12);

	/* ------------------------------------------------------- typography */
	--izoom-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--izoom-font-xs: 0.75rem;
	--izoom-font-sm: 0.875rem;
	--izoom-font-base: 1rem;
	--izoom-font-md: 1.125rem;
	--izoom-font-lg: 1.375rem;
	--izoom-font-h3: 1.125rem;
	--izoom-font-h2: 1.75rem;
	--izoom-font-h1: 2.125rem;

	--izoom-weight-normal: 400;
	--izoom-weight-medium: 500;
	--izoom-weight-semibold: 600;
	--izoom-weight-bold: 700;
	--izoom-line-tight: 1.2;
	--izoom-line-body: 1.5;

	/* ----------------------------------------------------------- space */
	--izoom-space-2xs: 0.25rem;
	--izoom-space-xs: 0.5rem;
	--izoom-space-sm: 0.75rem;
	--izoom-space-md: 1rem;
	--izoom-space-lg: 1.5rem;
	--izoom-space-xl: 2.5rem;
	--izoom-space-2xl: 3rem;

	/* ----------------------------------------------------------- shape */
	--izoom-radius: 6px;
	--izoom-radius-lg: 10px;
	--izoom-radius-xl: 16px;
	--izoom-radius-pill: 999px;

	/* ----------------------------------------------------------- motion */
	--izoom-transition-fast: 120ms ease;
	--izoom-transition: 200ms ease;

	/*
	 * Minimum comfortable touch target. Most of this directory's traffic is a
	 * phone in someone's hand looking for a phone number, so this is a
	 * functional requirement rather than a style choice.
	 */
	--izoom-tap-target: 44px;

	/* --------------------------------------------------------- layout */
	--izoom-content-width: 1184px;
	--izoom-content-narrow: 672px;

	/* Elementor's own atomic-element background tokens (theme-light.min.css
	   ships them with the old greys). Point them at this file's surfaces. */
	--e-a-bg-hover: var(--izoom-surface-sunken);
	--e-a-bg-loading: var(--izoom-surface-alt);
	--e-a-bg-chip: var(--izoom-surface-sunken);
}

/* The design sets every page in Inter (design/tokens.css --font-family-base).
   Elementor's "Disable Default Fonts" is on and the Kit has no body font, so
   without this every widget that does not name a family — body copy, the
   homepage headings, footer text — fell back to Hello Elementor's system
   stack (Segoe UI on Windows). */
body {
	background: var(--izoom-surface);
	color: var(--izoom-text);
	font-family: var(--izoom-font-body);
	line-height: var(--izoom-line-body);
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------- minimal page scaffolding */

/*
 * These are the only layout rules the theme applies. Elementor Theme Builder
 * templates take over once they exist; until then the PHP fallback templates
 * need something readable to render into.
 */
.izoom-page {
	max-width: var(--izoom-content-width);
	margin-inline: auto;
	padding: var(--izoom-space-lg) var(--izoom-space-md);
	color: var(--izoom-text);
	font-family: var(--izoom-font-body);
	line-height: var(--izoom-line-body);
}

.izoom-page__title {
	font-size: var(--izoom-font-h1);
	line-height: var(--izoom-line-tight);
	margin-block-end: var(--izoom-space-md);
}

.izoom-page__section-title {
	font-size: var(--izoom-font-h2);
	line-height: var(--izoom-line-tight);
	margin-block-end: var(--izoom-space-md);
}

.izoom-page__intro {
	max-width: var(--izoom-content-narrow);
	margin-block-end: var(--izoom-space-lg);
}

.izoom-page__section {
	margin-block-end: var(--izoom-space-xl);
}

.izoom-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--izoom-space-md);
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.izoom-result {
	border: 1px solid var(--izoom-border);
	border-radius: var(--izoom-radius-lg);
	padding: var(--izoom-space-md);
	background: var(--izoom-surface);
}

.izoom-result__title {
	font-size: var(--izoom-font-h3);
	margin: 0 0 var(--izoom-space-2xs);
}

.izoom-result__title a {
	color: var(--izoom-text);
	text-decoration: none;
}

.izoom-result__meta {
	color: var(--izoom-text-muted);
	font-size: var(--izoom-font-sm);
	margin: 0;
}

.izoom-result__badge {
	display: inline-block;
	font-size: var(--izoom-font-sm);
	color: var(--izoom-success);
}

.izoom-result--sponsored {
	border-color: var(--izoom-accent);
}

.izoom-empty {
	color: var(--izoom-text-muted);
}

.izoom-pagination {
	margin-block-start: var(--izoom-space-lg);
	display: flex;
	gap: var(--izoom-space-sm);
	flex-wrap: wrap;
}