/* optional, not swap: on a page with widgets every weight is preloaded ahead of the stylesheets, which lets
	Chrome hold the first paint up to 100ms for it; a face that still misses leaves the size-matched fallback
	below in place for that page view instead of reflowing the page when it lands. */
@font-face {
	font-family: "Be Vietnam Pro";
	font-weight: 400;
	font-display: optional;
	src: url( ../fonts/bvp-400.woff2 ) format( "woff2" );
}

@font-face {
	font-family: "Be Vietnam Pro";
	font-weight: 500;
	font-display: optional;
	src: url( ../fonts/bvp-500.woff2 ) format( "woff2" );
}

@font-face {
	font-family: "Be Vietnam Pro";
	font-weight: 600;
	font-display: optional;
	src: url( ../fonts/bvp-600.woff2 ) format( "woff2" );
}

@font-face {
	font-family: "Be Vietnam Pro";
	font-weight: 700;
	font-display: optional;
	src: url( ../fonts/bvp-700.woff2 ) format( "woff2" );
}

@font-face {
	font-family: "Be Vietnam Pro";
	font-weight: 800;
	font-display: optional;
	src: url( ../fonts/bvp-800.woff2 ) format( "woff2" );
}

/* Arial scaled to Be Vietnam Pro's own width and ascent, measured from these woff2 files, so text drawn
	before a face arrives breaks on the same lines. Arial Bold is named for 600-800: asked for 800,
	Windows hands over Arial Black, which is 10% wider still. */
@font-face {
	font-family: "Be Vietnam Pro Fallback";
	font-weight: 400;
	src: local( "Arial" ), local( "ArialMT" );
	size-adjust: 107.16%;
	ascent-override: 93.32%;
	descent-override: 24.73%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Be Vietnam Pro Fallback";
	font-weight: 500;
	src: local( "Arial" ), local( "ArialMT" );
	size-adjust: 108.21%;
	ascent-override: 92.41%;
	descent-override: 24.49%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Be Vietnam Pro Fallback";
	font-weight: 600;
	src: local( "Arial Bold" ), local( "Arial-BoldMT" );
	size-adjust: 102.4%;
	ascent-override: 97.66%;
	descent-override: 25.88%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Be Vietnam Pro Fallback";
	font-weight: 700;
	src: local( "Arial Bold" ), local( "Arial-BoldMT" );
	size-adjust: 103.41%;
	ascent-override: 96.7%;
	descent-override: 25.63%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Be Vietnam Pro Fallback";
	font-weight: 800;
	src: local( "Arial Bold" ), local( "Arial-BoldMT" );
	size-adjust: 104.46%;
	ascent-override: 95.73%;
	descent-override: 25.37%;
	line-gap-override: 0%;
}

:root,
body {
	--alv-c-brand: var( --e-global-color-primary, var( --wp--preset--color--primary ) );
	--alv-c-brand-deep: var( --e-global-color-secondary, var( --wp--preset--color--secondary ) );
	--alv-c-ink: var( --e-global-color-text, var( --wp--preset--color--text ) );
	--alv-c-accent: var( --e-global-color-accent, var( --wp--preset--color--accent ) );

	--alv-c-success: #10B981;
	--alv-c-success-light: #34D399;
	--alv-c-danger: #DC2626;
	--alv-c-danger-dark: #B91C1C;
	--alv-c-warning: #FBBF24;
	--alv-c-warning-text: #B45309;

	/* The edge of a caution box, drawn by the widget and by an article body alike. Typed as a
		color-mix in both places, one of the two keeps the old tint the day the warning is retuned. */
	--alv-c-warning-edge: color-mix( in srgb, var( --alv-c-warning ) 45%, transparent );

	--alv-c-text-2: #2B3445;
	--alv-c-text-3: #374151;
	--alv-c-text-4: #1F2937;
	--alv-c-text-muted: #5B6577;
	--alv-c-text-muted-dark: #9AA4B4;
	--alv-c-on-dark: #CBD5E1;
	--alv-c-on-dark-muted: #7D8896;
	/* The kit is the one place a buyer edits these, so they are read from it. The literal closes
		the chain: a deleted custom global would otherwise leave every color-mix() that mixes white
		invalid at computed-value time, and the cards would lose ground, border and sheen at once. */
	--alv-c-white: var( --e-global-color-white, #FFF );
	--alv-c-bg-light: var( --e-global-color-bglight, #F5F8FB );
	--alv-c-bg-warm: #FFF5EC;
	--alv-c-border: #E6ECF2;
	--alv-c-border-dash: #CBD5E1;
	--alv-c-ink-blue: #1A2435;
	--alv-c-black: #000;

	/* Literals, not color-mix of the brand: the source design picks these seven by eye, and a
		computed tint lands a few percent off every one of them. */
	--alv-c-brand-light: #7FDFEB;
	--alv-c-brand-soft: #D8F0F4;
	--alv-c-brand-pale: #E9F3F6;
	--alv-c-brand-faint: #EEF7F9;
	--alv-c-brand-deepest: #0B3742;
	--alv-c-accent-hover: #FF5A1F;
	--alv-c-accent-dark: #EA580C;

	--alv-c-brand-veil: color-mix( in srgb, var( --alv-c-brand ) 40%, transparent );
	--alv-c-brand-tint: color-mix( in srgb, var( --alv-c-brand ) 8%, transparent );

	--alv-fw-medium: 500;
	--alv-fw-semibold: 600;
	--alv-fw-bold: 700;
	--alv-fw-extrabold: 800;
	--alv-font-brand: "Be Vietnam Pro";
	--alv-font-fallback: "Be Vietnam Pro Fallback", sans-serif;

	--alv-c-brand-alt: #06B6D4;
	--alv-c-teal-faint: #DCEEF2;
	--alv-c-blue-grey: #E8EFF5;
	--alv-c-green-deep: #0E7C64;
	--alv-c-green-pale: #D6EFE9;
	--alv-c-orange-soft: #FF8A5C;
	--alv-c-orange-darkest: #C2410C;
	--alv-c-orange-pale: #FFE4D4;
	--alv-c-peach-pale: #FFE8D9;

	--alv-c-slate: #475569;
	--alv-c-slate-pale: #E2E8F0;
	--alv-c-danger-pale: #FEE2E2;
	--alv-c-warning-pale: #FEF3C7;
	--alv-c-track-grey: #F3F4F6;
	--alv-c-track-pale: #EEF1F5;
	--alv-c-zalo: #0068FF;
	--alv-c-green-tick: #047857;

	/* The drawings' own scene colours, not tints of the brand: the soiled half has to read as dirt and the
		rinsed half as clean fibre whatever colour the brand is retuned to. */
	--alv-c-soil-deep: #3A2E22;
	--alv-c-soil-dark: #5A4A38;
	--alv-c-soil: #94815F;
	--alv-c-soil-pale: #CBB18A;
	--alv-c-dust: #5D4A2E;
	--alv-c-stain-deep: #7C4A16;
	--alv-c-stain: #A87231;
	--alv-c-rinse-pale: #E8F4F7;
	--alv-c-rinse: #CFE8EC;
	--alv-c-linen: #FCFDFD;
	--alv-c-linen-shade: #EEF5F7;
	--alv-c-river: #7DD3E4;
	--alv-c-river-pale: #A8E3EF;
	--alv-c-sky-pale: #E0F2FE;
	--alv-c-sky-soft: #BAE6FD;
	--alv-c-orange-lightest: #FFF7ED;
	--alv-c-orange-light: #FED7AA;

	--alv-sp-1: 6px;
	--alv-sp-2: 12px;
	--alv-sp-3: 20px;
	--alv-sp-4: 32px;
	--alv-sp-5: 48px;
	--alv-sp-6: 64px;
	--alv-sp-7: 96px;
	/* The source design sets the gap under a prose heading between two rungs of the ladder above, so it
		is a token of its own rather than a rung: moving it onto a rung changes every article's rhythm. */
	--alv-gap-heading: 16px;

	--alv-r-1: 10px;
	--alv-r-2: 12px;
	--alv-r-3: 16px;
	--alv-r-4: 20px;
	--alv-r-pill: 999px;
	--alv-r-circle: 50%;

	/* The smallest a finger can reliably hit, so it is a floor for every tappable thing rather
		than one menu's own measurement. Lower it and the whole site fails the same audit at once. */
	--alv-touch: 44px;

	--alv-fs-1: 11px;
	--alv-fs-2: 13px;
	--alv-fs-3: 15px;
	--alv-fs-4: 18px;
	--alv-fs-5: 24px;
	--alv-fs-6: 30px;

	--alv-sh-1: 0 1px 2px color-mix( in srgb, var( --alv-c-ink ) 6%, transparent ),
		0 2px 6px color-mix( in srgb, var( --alv-c-ink ) 4%, transparent );
	--alv-sh-2: 0 6px 18px color-mix( in srgb, var( --alv-c-ink ) 8%, transparent ),
		0 2px 6px color-mix( in srgb, var( --alv-c-ink ) 4%, transparent );
	--alv-sh-3: 0 24px 60px color-mix( in srgb, var( --alv-c-ink ) 14%, transparent ),
		0 8px 20px color-mix( in srgb, var( --alv-c-ink ) 6%, transparent );

	--alv-z-2: 50;
	--alv-z-3: 70;
	--alv-z-4: 80;

	/* The leading ladder the design sets text on, headings through running prose. Every rung was
		typed by hand in dozens of rules before this, so retuning one meant hunting all of them and
		the page read uneven the first time a hunt missed. */
	--alv-lh-heading: 1.15;
	--alv-lh-tight: 1.3;
	--alv-lh-snug: 1.35;
	--alv-lh-base: 1.5;
	--alv-lh-body: 1.55;
	--alv-lh-copy: 1.6;
	--alv-lh-loose: 1.65;
	--alv-lh-relaxed: 1.7;

	/* The tracking ladder: two negative rungs that tighten display type, four positive ones that
		open the small upper-case labels. Same reason as the leading — one rung, one declaration. */
	--alv-tr-tight-1: -0.01em;
	--alv-tr-tight-2: -0.02em;
	--alv-tr-wide-1: 0.04em;
	--alv-tr-wide-2: 0.06em;
	--alv-tr-wide-3: 0.12em;
	--alv-tr-wide-4: 0.16em;

	/* The hairline the design rules every edge with. Typed as 1px in sixty-seven places before
		this, so a theme that wanted a crisper rule had to be edited in sixty-seven places. */
	--alv-bd-hairline: 1px;

	--alv-stroke-1: 1.7;
	--alv-stroke-2: 2;
	--alv-stroke-3: 2.2;
	--alv-stroke-4: 2.4;
	--alv-stroke-5: 2.5;
	--alv-stroke-6: 3;

	--alv-dur-1: 0.15s;
	--alv-dur-2: 0.2s;
	--alv-dur-3: 0.25s;
	--alv-dur-4: 0.35s;

	--alv-w-page: var( --wp--style--global--content-size );

	/* The gutter the source design keeps INSIDE the page frame. Typed again per container it drifts,
		and a frame whose gutter is a spacing step follows that step the day the scale is retuned. */
	--alv-w-gutter: 24px;
	--alv-w-gutter-tight: 16px;
	/* The two frames the design crops pictures to: the shallower one for a picture that stands on
		its own, the deeper one for a picture sitting on a card above its own words. */
	--alv-ratio-cover: 16 / 9;
	--alv-ratio-card: 16 / 10;
	--alv-w-grid: 1180px;
	--alv-w-reading: 720px;
	--alv-sticky-top: 96px;

	--alv-card-bg: var( --alv-c-white );
	--alv-card-border: var( --alv-c-border );
	--alv-card-border-hover: var( --alv-c-brand-veil );
	--alv-card-shadow: var( --alv-sh-1 );
	--alv-card-shadow-hover: var( --alv-sh-2 );
	--alv-card-title: var( --alv-c-ink );
	--alv-card-text: var( --alv-c-text-2 );

	--alv-block-title: var( --alv-c-ink );
	--alv-block-accent: var( --alv-c-brand );
	--alv-block-text: var( --alv-c-text-muted );
	--alv-badge-bg: var( --alv-c-brand-tint );
	--alv-badge-text: var( --alv-c-brand-deep );
}

.alovesinh-dark {
	--alv-card-bg: color-mix( in srgb, var( --alv-c-white ) 3%, transparent );
	--alv-card-bg-hover: color-mix( in srgb, var( --alv-c-white ) 5%, transparent );
	--alv-card-border: color-mix( in srgb, var( --alv-c-white ) 6%, transparent );
	--alv-card-border-hover: color-mix( in srgb, var( --alv-c-brand ) 30%, transparent );
	--alv-card-shadow: none;
	--alv-card-shadow-hover: none;
	--alv-card-title: var( --alv-c-white );
	--alv-card-text: var( --alv-c-text-muted-dark );
	/* The source design writes a dark block's heading and standfirst in the one pale grey it rules
		its hairlines with. White reads a step harder than the design draws it, a muted grey a step
		softer; the cards keep the muted grey, where the design does step the copy back. */
	--alv-block-title: var( --alv-c-border );
	--alv-block-text: var( --alv-c-border );
	--alv-badge-bg: color-mix( in srgb, var( --alv-c-brand ) 16%, transparent );
	--alv-badge-text: var( --alv-c-brand-light );

	/* The icon tile needs its own pair here: without them a dark block keeps the light-skin tile
		and the icon all but disappears against the deep background. */
	--alv-icon-color: var( --alv-c-brand-light );
	--alv-icon-bg: color-mix( in srgb, var( --alv-c-brand ) 15%, transparent );
	color: var( --alv-c-border );
}