/**
 * JOY-TEX Design Tokens
 *
 * Global project-level design tokens for the JOY-TEX website.
 *
 * Visual direction:
 * Technical Editorial
 * Quiet Precision
 *
 * Color philosophy:
 * Technical Neutral Canvas
 * + Controlled Brand Color
 * + Material-Led Color
 *
 * @version 1.0.0
 */

:root {

	/* =========================================================
	   Brand
	   ========================================================= */

	/*
	* Primary JOY brand color.
	*
	* Intended roles:
	* - brand identity
	* - active / selected states
	* - technical cues
	* - diagram relationships
	*
	* Brand blue should indicate meaning before it decorates.
	*/
	--joy-color-brand: #2C3682;

	/*
	* Controlled brand accents derived from the approved JOY logo.
	*
	* Red:
	* - link hover and interactive navigation emphasis
	* - restrained branded highlights
	* - selected visual accents where appropriate
	*
	* Yellow:
	* - technical diagrams
	* - branded graphics
	* - legends / markers
	* - restrained micro-accents
	*
	* Red does not mean "error".
	* Yellow does not mean "warning".
	*/
	--joy-color-accent-red: #ED1B24;
	--joy-color-accent-yellow: #FFCB05;


	/* =========================================================
	   Canvas & Surface
	   ========================================================= */

	/*
	* Primary soft warm neutral canvas.
	*
	* This is the default environmental background for JOY-TEX.
	* It provides a quiet, lightly warm foundation that supports
	* Technical Editorial clarity without reading as a conventional
	* cool UI gray or an overt beige / lifestyle background.
	*
	* Pure white remains reserved for selective structural surfaces.
	*/
	--joy-color-canvas: #F8F7F4;

	/*
	 * Selective pure-white content surface.
	 *
	 * White is not the automatic background for every section or
	 * card. Use it when information role or hierarchy warrants a
	 * distinct surface.
	 */
	--joy-color-surface: #FFFFFF;


	/* =========================================================
	   Ink & Text
	   ========================================================= */

	/*
	 * Primary high-authority ink.
	 * Intended for headings, important technical information,
	 * key numbers and other high-emphasis text.
	 */
	--joy-color-ink: #181A1F;

	/*
	 * Default long-form body text.
	 */
	--joy-color-text: #34373D;

	/*
	 * Secondary information such as metadata, captions and
	 * supporting labels. Do not use as a substitute for normal
	 * body text merely to create a lighter visual appearance.
	 */
	--joy-color-text-muted: #6B7078;

	/*
	* Editorial neutral colors.
	*
	* Used for restrained, image-led editorial compositions
	* and text-based action components.
	*
	* These do not replace the standard ink / body text hierarchy.
	*/
	--joy-color-editorial-heading: #454A50;
	--joy-color-editorial-secondary: #626870;

	/* =========================================================
	Text on Dark Backgrounds
	========================================================= */

	--joy-color-on-dark-heading: #FFFFFF;
	--joy-color-on-dark-secondary: #DDE1EA;


	/* =========================================================
	   Structural Lines
	   ========================================================= */

	/*
	 * Visible structural boundary.
	 * Suitable for controls and areas requiring a clear edge.
	 */
	--joy-color-border: #D5D8DC;

	/*
	 * Restrained structural rule.
	 * Suitable for editorial dividers, table rows and subtle
	 * information separation.
	 */
	--joy-color-rule: #E1E3E6;

	/*
	* Restrained surface elevation.
	*
	* Used where a white information surface needs subtle spatial
	* separation from the environmental canvas.
	*
	* This is not a general card-shadow treatment.
	*/
	--joy-shadow-surface: 0 0.375rem 1rem rgb(24 26 31 / 5%);

	/* =========================================================
	Typography — Font Family
	========================================================= */

	--joy-font-sans:
		"IBM Plex Sans",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Arial,
		sans-serif;


	/* =========================================================
	Typography — Font Weights
	========================================================= */

	/*
	* JOY-TEX uses a restrained weight hierarchy.
	*
	* 400 — body and general reading
	* 500 — labels, navigation and controlled emphasis
	* 600 — headings and strong information hierarchy
	*/

	--joy-font-weight-regular: 400;
	--joy-font-weight-medium: 500;
	--joy-font-weight-semibold: 600;

	/* =========================================================
	Spacing — Primitive Scale
	========================================================= */

	/*
	* Reusable spacing primitives based on a 4px-equivalent
	* rhythm under the browser's default 16px root context.
	*
	* These tokens describe spacing magnitude, not component role.
	*/

	--joy-space-1: 0.25rem;  /* 4px */
	--joy-space-2: 0.5rem;   /* 8px */
	--joy-space-3: 0.75rem;  /* 12px */
	--joy-space-4: 1rem;     /* 16px */
	--joy-space-5: 1.5rem;   /* 24px */
	--joy-space-6: 2rem;     /* 32px */
	--joy-space-7: 3rem;     /* 48px */
	--joy-space-8: 4rem;     /* 64px */
	--joy-space-9: 6rem;     /* 96px */
	--joy-space-10: 8rem;    /* 128px */


	/* =========================================================
	Layout — Semantic Spacing
	========================================================= */

	/*
	* Global horizontal page gutter.
	*
	* Minimum: 1.25rem / ~20px
	* Fluid:   3vw
	* Maximum: 3rem / ~48px
	*
	* Shared by standard contained content and content placed
	* inside full-width sections.
	*/
	--joy-page-gutter: clamp(1.25rem, 3vw, 3rem);

	/* =========================================================
	Section — Semantic Vertical Spacing
	========================================================= */

	--joy-section-space: 4rem;
	--joy-section-space-large: 6rem;

}

@media (max-width: 999px) {
    :root {
        --joy-section-space: 3rem;
        --joy-section-space-large: 4.5rem;
    }
}

@media (max-width: 767px) {
    :root {
        --joy-section-space: 2rem;
        --joy-section-space-large: 3.5rem;
    }
}