/* ==========================================================================
   JYX Design Tokens — Modern Precision Manufacturing / Industrial Technology
   Source of truth for colour, type, space, radius, motion. Do not hard-code
   values elsewhere; use the variables. See docs/design-system.md.
   ========================================================================== */
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-500.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-600.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-700.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-800.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}
/* Poppins — site-wide latin face since the 2026-09-23 unification plan.
   Chinese fallback is declared in --font-sans only; no CJK webfont is shipped. */
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
	color-scheme: dark;
	/* colour — brand. 2026-09-23 unification: the legacy palette is remapped onto the
	   deep-blue family (visual brief §4.1) so every cascade consumer flips in one move. */
	--c-navy-900: #061427;   /* page canvas */
	--c-navy-800: #0B2036;   /* panel */
	--c-navy-700: #102B46;   /* hover surface */
	--c-navy-600: #143A66;
	--c-brand: #2C76C6;      /* Brand Blue — overridable from Site Settings */
	--c-brand-600: #3988D7;  /* hover lifts on the dark canvas, never darkens */
	--c-cyan: #A5DFED;       /* Ice accent */
	--c-cyan-soft: rgba(165, 223, 237, .14);
	--c-gray-200: rgba(165, 223, 237, .16);
	--c-gray-300: rgba(165, 223, 237, .28);
	--c-surface: #0B2036;
	--c-white: #FFFFFF;

	/* colour — text (light family on the dark canvas) */
	--c-text: #F4F7FA;
	--c-text-2: #A6BBCF;
	--c-text-3: #8DA2B8;
	--c-text-inv: #F4F7FA;
	--c-text-inv-2: #A9B7C6;

	/* colour — lines / state */
	--c-line: rgba(165, 223, 237, .16);
	--c-line-strong: rgba(165, 223, 237, .28);
	--c-line-inv: rgba(165, 223, 237, .16);
	--c-success: #4CC38A;
	--c-warning: #E0A63C;
	--c-danger: #E8695A;

	/* typography */
	--font-sans: Poppins, Barlow, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: Poppins, Barlow, -apple-system, sans-serif; /* one family site-wide; numeric alignment via .tabular */
	--fs-xs: .75rem;
	--fs-sm: .875rem;
	--fs-base: clamp(1rem, .98rem + .15vw, 1.0625rem);
	--fs-lg: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
	--fs-xl: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
	--fs-2xl: clamp(1.5rem, 1.3rem + .9vw, 2rem);
	--fs-3xl: clamp(1.875rem, 1.55rem + 1.4vw, 2.625rem);
	--fs-4xl: clamp(2.25rem, 1.6rem + 2.6vw, 4rem); /* page H1: 36→64px, brief §4.2 */
	--fs-5xl: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);
	--lh-tight: 1.1;
	--lh-snug: 1.25;
	--lh-body: 1.6;
	--ls-eyebrow: .14em;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* spacing (4px base) */
	--sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
	--sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;
	--section-y: clamp(4rem, 3rem + 5vw, 9rem);        /* 64 → 144px */
	--section-y-tight: clamp(3rem, 2rem + 3vw, 5.5rem);
	--gutter: clamp(1.25rem, 4vw, 2rem);

	/* layout */
	--container: 1280px;
	--container-wide: 1440px;
	--container-narrow: 860px;
	--header-h: 76px;

	/* shape */
	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 14px;
	--chamfer: 14px;   /* brand DNA: cut corner on featured media */

	/* elevation */
	--shadow-sm: 0 1px 2px rgba(7, 21, 34, .06), 0 1px 1px rgba(7, 21, 34, .04);
	--shadow-md: 0 8px 24px -12px rgba(7, 21, 34, .18), 0 2px 6px rgba(7, 21, 34, .06);
	--shadow-lg: 0 24px 48px -24px rgba(7, 21, 34, .28);
	--shadow-glow: 0 0 0 1px rgba(39, 184, 242, .35), 0 12px 32px -12px rgba(39, 184, 242, .35);

	/* motion (docs/motion-system.md) */
	--m-micro: 200ms;
	--m-standard: 340ms;
	--m-section: 550ms;
	--m-hero: 850ms;
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-out-expo: cubic-bezier(.16, 1, .3, 1);
	--ease-inout: cubic-bezier(.65, 0, .35, 1);
	--ease: var(--ease-out);
	--dur-fast: var(--m-micro);
	--dur: var(--m-standard);
	--dur-slow: var(--m-section);

	/* v2 editorial type scale */
	--fs-hero: clamp(2.5rem, 1.4rem + 2.6vw, 3.9rem);
	--fs-section: clamp(1.75rem, 1.25rem + 2.2vw, 4rem);
	--fs-stat: clamp(2.5rem, 1.5rem + 3vw, 4.75rem);
	--fs-label: .75rem;
	--section-y-v2: clamp(4rem, 3rem + 6vw, 11rem);

	/* engineering decoration */
	--grid-line: rgba(165, 223, 237, .06);
	--grid-size: 64px;

	/* =====================================================================
	   Deep-blue unification tokens (docs/ui-unification-plan-2026-09-23.md).
	   Phase 1: consumed by the UI Lab baseline. Phase 2 retargets base /
	   components / pages styles at these semantic names; do not hard-code
	   these values anywhere else. Chinese copy falls back via --font-sans.
	   ===================================================================== */
	/* surfaces */
	--bg-page: #061427;        /* site canvas */
	--bg-deep: #040D19;        /* deepest band — footer / closing CTA frames */
	--bg-panel: #0B2036;       /* menus, forms, parameter panels */
	--bg-hover: #102B46;       /* interactive feedback, never a full-bleed wash */
	--hairline-blue: rgba(165, 223, 237, .16); /* fine structure lines on blue */
	/* actions */
	--action: #2C76C6;         /* primary buttons, selected state */
	--action-hover: #3988D7;   /* button hover — verify text contrast at QA */
	--ice: #A5DFED;            /* small geometry accents, current-section marks */
	/* text on blue */
	--t-primary: #F4F7FA;      /* headings, key figures */
	--t-secondary: #A6BBCF;    /* body, explanations */
	/* focus on blue (WCAG-visible on #061427) */
	--focus-ring-blue: #A5DFED;
	/* shape — unification plan §4 */
	--radius-pill: 999px;      /* primary/secondary buttons, 44–48px tall */
	--radius-panel: 12px;      /* parameter / form panels */
	--radius-media: 16px;      /* card imagery */
	/* motion — unification plan §6 (shared easing site-wide) */
	--dur-enter: 550ms;        /* generic entrance 450–650ms */
	--rise-enter: 20px;        /* entrance translation 16–24px */
	--stagger: 70ms;           /* sibling offset 60–80ms */
	--dur-nav: 200ms;          /* nav hover/focus 180–220ms */
	--dur-nav-solid: 240ms;    /* transparent → solid header on scroll */
	--dur-mega: 250ms;         /* mega menu 220–280ms, 8px rise */
	--rise-mega: 8px;
	--dur-count: 1200ms;       /* stat count-up */
}
/* deep-blue page context — Phase 2 will move base styles onto this scheme */
.theme-blue {
	background: var(--bg-page);
	color: var(--t-secondary);
	--c-text: var(--t-primary);
	--c-text-2: var(--t-secondary);
	--c-line: var(--hairline-blue);
}

/* dark-tone context: components inside .section--dark read these */
.section--dark, .site-footer, .cta-band, .hero {
	--c-text: var(--c-text-inv);
	--c-text-2: var(--c-text-inv-2);
	--c-line: var(--c-line-inv);
	--c-surface: rgba(255, 255, 255, .04);
}