/**
 * Design tokens — Công Nghiệp Số (ndtex.vn), v3 "Ca đêm"
 *
 * Ports verbatim to monatheme/assets/css/variables.css in phase 2. Every colour,
 * size and spacing value lives here and nowhere else — a hardcoded hex in main.css
 * is a bug (.claude/rules/coding-standards.md § CSS).
 *
 * Direction: photography first. Full-bleed factory photographs under cinematic
 * gradients, condensed display type set large, one amber accent — the colour of
 * sodium lamps, warning beacons and hot metal — on graphite and on white.
 */

:root {
	/* ---------------------------------------------------------------
	 * Colour — measured, not assumed (WCAG contrast in brackets)
	 *
	 *   text   #15181C on paper #F4F4F2   16.2:1
	 *   muted  #5F6670 on paper            5.3:1
	 *   amber  #FFB224 on ink #0E1114     10.5:1  (also ink-on-amber buttons)
	 *   amber-ink #8A5200 on paper         5.8:1  — amber as TEXT on light ground
	 *   invert-muted #A7ACB3 on ink        8.3:1
	 * --------------------------------------------------------------- */
	--mona-ink: #0E1114;
	--mona-ink-2: #171B20;
	--mona-ink-3: #22272E;

	--mona-paper: #F4F4F2;
	--mona-paper-2: #E9E9E5;
	--mona-surface: #FFFFFF;

	--mona-text: #15181C;
	--mona-text-muted: #5F6670;
	--mona-text-invert: #F2F1EC;
	--mona-text-invert-muted: #A7ACB3;

	--mona-amber: #FFB224;

	/*
	 * The brand's own two colours, as ndtex.vn declares them (--ntx-navy /
	 * --ntx-amber in its stylesheet). They are NOT the ported palette: the design
	 * runs on --mona-amber #FFB224, and these differ. They exist only so the logo
	 * mark can be the real one without a hex literal in main.css.
	 */
	--mona-brand-navy: #0B3D91;
	--mona-brand-amber: #F5A524;
	--mona-amber-hot: #FFC44D;
	--mona-amber-ink: #8A5200;
	--mona-amber-soft: #FFF1D6;
	--mona-amber-glow: rgba(255, 178, 36, 0.28);

	--mona-line: #E3E4E0;
	--mona-line-strong: #C9CBC6;
	--mona-line-invert: rgba(242, 241, 236, 0.14);

	/* Semantic — callouts only */
	--mona-warn: #9C2F1D;
	--mona-warn-bg: #FCECE8;
	--mona-warn-line: #F1C4BB;
	--mona-info: #1F4E79;
	--mona-info-bg: #E8F0F8;
	--mona-info-line: #C3D5E8;

	/* Photo scrims. Every photograph on the site sits under one of these so
	 * white type on it always clears 4.5:1. */
	--mona-scrim-up: linear-gradient(180deg, rgba(14, 17, 20, 0) 30%, rgba(14, 17, 20, 0.55) 65%, rgba(14, 17, 20, 0.92) 100%);
	--mona-scrim-hero: linear-gradient(180deg, rgba(14, 17, 20, 0.4) 0%, rgba(14, 17, 20, 0.22) 35%, rgba(14, 17, 20, 0.72) 72%, rgba(14, 17, 20, 0.95) 100%);
	--mona-scrim-side: linear-gradient(90deg, rgba(14, 17, 20, 0.9) 0%, rgba(14, 17, 20, 0.55) 50%, rgba(14, 17, 20, 0.2) 100%);
	--mona-scrim-flat: rgba(14, 17, 20, 0.62);

	/* Depth */
	--mona-shadow-sm: 0 1px 2px rgba(14, 17, 20, 0.08);
	--mona-shadow: 0 14px 34px -14px rgba(14, 17, 20, 0.28), 0 2px 6px rgba(14, 17, 20, 0.06);
	--mona-shadow-lg: 0 40px 80px -30px rgba(14, 17, 20, 0.55);
	--mona-glass: rgba(14, 17, 20, 0.55);
	--mona-glass-light: rgba(244, 244, 242, 0.82);
	--mona-glass-line: rgba(242, 241, 236, 0.16);

	/* ---------------------------------------------------------------
	 * Type
	 *
	 * Barlow Condensed for display: a signage face — road signs, machine
	 * nameplates — with the full Vietnamese set. Barlow (same family, normal
	 * width) for body and UI so the two never argue.
	 * --------------------------------------------------------------- */
	--mona-font-display: "Barlow Condensed", "Barlow", "Be Vietnam Pro", -apple-system,
		BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--mona-font: "Barlow", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Arial, sans-serif;
	--mona-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--mona-w-regular: 400;
	--mona-w-medium: 500;
	--mona-w-semibold: 600;
	--mona-w-bold: 700;
	--mona-w-heavy: 800;

	/* Condensed type can go much larger than a normal-width face at the same
	 * measure — the hero headline is the loudest thing on the site. */
	--mona-fs-display: clamp(2.375rem, 1.3rem + 3vw, 4rem);
	--mona-fs-h1: clamp(2.25rem, 1.4rem + 2.8vw, 4rem);
	--mona-fs-h2: clamp(2rem, 1.4rem + 2vw, 3.25rem);
	--mona-fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
	--mona-fs-h4: 1.25rem;
	--mona-fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--mona-fs-body: 1.0625rem;
	--mona-fs-sm: 0.9375rem;
	--mona-fs-xs: 0.8125rem;
	--mona-fs-2xs: 0.75rem;

	/* Vietnamese capitals stack a tone mark on a diacritic (Ẳ, Ộ, Ừ); at
	 * display size 1.0 collides, 1.02 clears with the condensed ascenders. */
	--mona-lh-display: 1.05;
	--mona-lh-tight: 1.06;
	--mona-lh-snug: 1.2;
	--mona-lh-body: 1.65;

	--mona-ls-display: -0.01em;
	--mona-ls-tight: 0;

	/* ---------------------------------------------------------------
	 * Space — 4px base
	 * --------------------------------------------------------------- */
	--mona-s-1: 0.25rem;
	--mona-s-2: 0.5rem;
	--mona-s-3: 0.75rem;
	--mona-s-4: 1rem;
	--mona-s-5: 1.5rem;
	--mona-s-6: 2rem;
	--mona-s-7: 3rem;
	--mona-s-8: 4rem;
	--mona-s-9: 6rem;
	--mona-s-10: 8rem;

	--mona-section: clamp(3.5rem, 2.5rem + 4vw, 7rem);

	/* ---------------------------------------------------------------
	 * Layout
	 * --------------------------------------------------------------- */
	--mona-container: 1280px;
	--mona-container-narrow: 760px;
	--mona-gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
	--mona-measure: 66ch;
	--mona-header-h: 76px;

	--mona-radius-xl: 28px;
	--mona-radius-lg: 20px;
	--mona-radius: 14px;
	--mona-radius-sm: 8px;
	--mona-radius-pill: 999px;

	--mona-border: 1px solid var(--mona-line);
	--mona-border-invert: 1px solid var(--mona-line-invert);

	/* Motion */
	--mona-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mona-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--mona-dur-fast: 160ms;
	--mona-dur: 340ms;
	--mona-dur-slow: 700ms;
	--mona-dur-reveal: 800ms;
	--mona-dur-kenburns: 16s;
}