/* =====================================================================
   Thems0 — Design Tokens (tokens.css)  v2
   Locked design system. Every value is overridable via Theme Settings
   (brand colors) so the theme migrates across B2B skins.
   All components reference these vars by name — no inline color values.

   Hierarchy: primitive → semantic → component. Three layers, never mix.
   ===================================================================== */

:root {
	color-scheme: light;

	/* --- Color (Xingyao defaults; overridden inline from Theme Settings) --- */
	--c-navy: #0B1B2D;          /* trust band / dark surfaces / footer brand */
	--c-navy-2: #12263B;        /* raised dark surface */
	--c-navy-3: #1B3350;        /* hairlines on dark */
	--c-footer: #0B1B2D;        /* footer = brand navy (consistent with header / dark bands) */
	--c-footer-line: #1F3148;   /* hairlines inside footer (slightly lifted from navy) */
	--c-orange: #C14E0E;        /* primary CTA / key figures / accent */
	--c-orange-h: #A8440B;      /* hover */
	--c-orange-soft: #FBEAE0;   /* orange tint fill */
	--c-orange-deep: #7A2E04;   /* darker orange for dark BG contrast */

	--c-bg: #F5F7FA;            /* page background (light gray) */
	--c-bg-2: #EEF2F7;           /* slightly darker for banding */
	--c-surface: #FFFFFF;       /* cards */
	--c-surface-2: #FCFDFE;     /* alt surface */
	--c-surface-soft: #EAF1FB;  /* soft band / case challenge / about band */
	--c-surface-tint: #F7F9FC;  /* subtle card variant */

	--c-ink: #0F1721;           /* body text (near-black, not pure) */
	--c-ink-2: #4A5568;         /* secondary text */
	--c-ink-3: #6B7280;         /* muted */
	--c-ink-on-dark: #EAF0F6;   /* text on navy */
	--c-ink-on-dark-muted: #97A4B4;

	--c-line: #E2E8F0;          /* hairline borders/dividers */
	--c-line-2: #EDF1F6;
	--c-line-strong: #C9D2DE;

	--c-focus: var(--c-orange); /* focus ring = orange */
	--c-on-navy: var(--c-ink-on-dark);
	--c-on-orange: #FFFFFF;     /* text on orange fill */

	--c-success: #137649;
	--c-warn: #B7791F;
	--c-error: #B43A3A;

	/* --- Typography --- */
	--f-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--f-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

	--fw-reg: 400;
	--fw-med: 500;
	--fw-semi: 600;
	--fw-bold: 700;
	--fw-xbold: 800;

	/* Fluid type scale (1.250 minor third, fluid via clamp) */
	--fs-eyebrow: .75rem;             /* 12 — labels */
	--fs-small:  .875rem;             /* 14 — meta */
	--fs-body:   1rem;                /* 16 — body */
	--fs-lead:   clamp(1.05rem, 1.4vw, 1.25rem); /* lead paragraph */
	--fs-h6:     clamp(1rem, 1.2vw, 1.125rem);
	--fs-h5:     clamp(1.1rem, 1.4vw, 1.25rem);
	--fs-h4:     clamp(1.25rem, 1.7vw, 1.5rem);
	--fs-h3:     clamp(1.4rem, 2.0vw, 1.75rem);
	--fs-h2:     clamp(1.85rem, 3.2vw, 2.6rem);
	--fs-h1:     clamp(2.4rem, 5vw, 3.75rem);
	--fs-display: clamp(3rem, 7vw, 5.5rem); /* hero display */

	--lh-tight: 1.08;  /* display */
	--lh-snug: 1.18;   /* h1-h3 */
	--lh-body: 1.6;    /* body */
	--lh-loose: 1.75;  /* lead */

	--ls-tight: -.025em;  /* display & h1 */
	--ls-snug: -.015em;   /* h2-h3 */
	--ls-wide: .04em;     /* labels / small caps */
	--ls-wider: .12em;    /* eyebrow uppercase */

	--measure: 65ch;  /* max line length for readable text */

	/* --- Spacing scale (4px base, 8 canonical steps) --- */
	--space-1: .25rem;  /*  4 — tight gaps */
	--space-2: .5rem;   /*  8 — input padding */
	--space-3: .75rem;  /* 12 — button padding y */
	--space-4: 1rem;    /* 16 — default block spacing */
	--space-5: 1.5rem;  /* 24 — group spacing */
	--space-6: 2rem;    /* 32 — sub-section gap */
	--space-7: 3rem;    /* 48 — section gap */
	--space-8: 4rem;    /* 64 — major breaks */
	--space-9: 6rem;    /* 96 — page rhythm */

	/* --- Section rhythm --- */
	--sec-pad: clamp(56px, 7vw, 96px);
	--sec-pad-m: clamp(40px, 9vw, 64px);
	--gutter: clamp(20px, 3vw, 32px);

	/* --- Shape --- */
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 18px;
	--radius-xl: 24px;
	--radius-pill: 999px;

	/* --- Container --- */
	--container: 1320px;        /* Wider B2B work area for products, cases and factory evidence */
	--container-wide: 1320px;   /* compatibility alias; full-bleed bands do not widen content */
	--container-narrow: 820px;  /* text-heavy columns */

	/* --- Hero --- */
	--hero-min: 600px;
	--header-h: 72px;           /* fixed header height */

	/* --- Shadow (tinted with navy for cohesion, not pure black) --- */
	--shadow-xs: 0 1px 2px rgba(11, 27, 45, .05);
	--shadow-sm: 0 2px 6px rgba(11, 27, 45, .06), 0 1px 2px rgba(11, 27, 45, .04);
	--shadow: 0 6px 20px rgba(11, 27, 45, .08), 0 2px 6px rgba(11, 27, 45, .04);
	--shadow-lg: 0 18px 48px rgba(11, 27, 45, .12), 0 6px 16px rgba(11, 27, 45, .06);
	--shadow-xl: 0 30px 80px rgba(11, 27, 45, .16), 0 10px 24px rgba(11, 27, 45, .08);
	--shadow-orange: 0 12px 28px rgba(193, 78, 14, .28);
	--shadow-navy: 0 18px 48px rgba(11, 27, 45, .35);

	/* --- Motion --- */
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-in-out: cubic-bezier(.4, 0, .2, 1);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--dur: .2s;
	--dur-slow: .35s;
	--dur-slower: .6s;

	/* --- z-index scale (named, not magic numbers) --- */
	--z-base: 1;
	--z-raised: 10;
	--z-sticky: 100;
	--z-header: 200;
	--z-overlay: 400;
	--z-modal: 500;
	--z-toast: 600;

	/* --- Border widths --- */
	--bw-1: 1px;
	--bw-2: 2px;
	--bw-3: 3px;
}

@media (max-width: 768px) {
	:root {
		--header-h: 60px;
		--sec-pad: var(--sec-pad-m);
	}
}