/* ==========================================================================
   DESIGN TOKENS
   Change a value here and it updates everywhere in the theme.
   ========================================================================== */

:root {

	/* ---- Brand palette ---------------------------------------------------
	   Sampled from the product photography. Adjust these six and the whole
	   site reskins.                                                        */
	--nx-navy-900: #06182F;
	--nx-navy-800: #0B2A5B;
	--nx-navy-700: #123A73;
	--nx-blue-600: #1B4F9C;
	--nx-blue-500: #2E6DC4;
	--nx-accent:   #00A3E0;
	--nx-cyan:     #4FC3E8;

	/* ---- Neutrals -------------------------------------------------------- */
	--nx-white:    #FFFFFF;
	--nx-grey-50:  #F6F8FB;
	--nx-grey-100: #EDF1F7;
	--nx-grey-200: #DCE3ED;
	--nx-grey-300: #C2CCDA;
	--nx-grey-500: #7B8AA0;
	--nx-grey-700: #46566E;
	--nx-grey-900: #1C2634;

	/* ---- Semantic roles --------------------------------------------------
	   Components reference these, never the raw palette above. Re-point a
	   role and every component follows.                                    */
	--nx-bg:            var(--nx-white);
	--nx-bg-alt:        var(--nx-grey-50);
	--nx-bg-invert:     var(--nx-navy-800);
	--nx-surface:       var(--nx-white);
	--nx-surface-alt:   var(--nx-grey-100);

	--nx-text:          var(--nx-grey-900);
	--nx-text-muted:    var(--nx-grey-700);
	--nx-text-subtle:   var(--nx-grey-500);
	--nx-text-invert:   var(--nx-white);

	--nx-border:        var(--nx-grey-200);
	--nx-border-strong: var(--nx-grey-300);

	--nx-primary:       var(--nx-navy-800);
	--nx-primary-hover: var(--nx-navy-700);
	--nx-action:        var(--nx-accent);
	--nx-action-hover:  #0089BE;
	--nx-focus:         var(--nx-accent);

	/* ---- Type ------------------------------------------------------------ */
	--nx-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
	                Roboto, "Helvetica Neue", Arial, sans-serif;
	--nx-font-mono: "SFMono-Regular", "JetBrains Mono", Consolas, monospace;

	/* Fluid scale: min at 360px viewport, max at 1440px. No breakpoint spam.
	   Top end deliberately restrained — this is a technical/documentation site,
	   not a consumer landing page. Display sizes above ~44px start reading as
	   marketing shout and crowd out the specification content. */
	--nx-text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--nx-text-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	--nx-text-base: clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
	--nx-text-lg:   clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
	--nx-text-xl:   clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);
	--nx-text-2xl:  clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
	--nx-text-3xl:  clamp(1.75rem, 1.52rem + 1vw, 2.375rem);
	--nx-text-4xl:  clamp(2.125rem, 1.72rem + 1.8vw, 3.125rem);

	--nx-leading-tight:  1.15;
	--nx-leading-snug:   1.3;
	--nx-leading-normal: 1.6;
	--nx-leading-loose:  1.75;

	--nx-tracking-tight: -0.02em;
	--nx-tracking-wide:  0.02em;
	--nx-tracking-caps:  0.12em;

	--nx-weight-normal:   400;
	--nx-weight-medium:   500;
	--nx-weight-semibold: 600;
	--nx-weight-bold:     700;

	/* ---- Spacing (4px base) ---------------------------------------------- */
	--nx-space-1:  0.25rem;
	--nx-space-2:  0.5rem;
	--nx-space-3:  0.75rem;
	--nx-space-4:  1rem;
	--nx-space-5:  1.5rem;
	--nx-space-6:  2rem;
	--nx-space-7:  2.5rem;
	--nx-space-8:  3rem;
	--nx-space-9:  4rem;
	--nx-space-10: 5rem;
	--nx-space-11: 6rem;
	--nx-space-12: 8rem;

	/* Section rhythm scales with viewport */
	--nx-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
	--nx-gutter:    clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

	/* ---- Layout ---------------------------------------------------------- */
	--nx-container:      1240px;
	--nx-container-wide: 1440px;
	--nx-container-text: 68ch;

	/* ---- Radius ---------------------------------------------------------- */
	--nx-radius-sm:   4px;
	--nx-radius:      8px;
	--nx-radius-md:   12px;
	--nx-radius-lg:   18px;
	--nx-radius-full: 999px;

	/* ---- Elevation ------------------------------------------------------- */
	--nx-shadow-xs: 0 1px 2px rgba(6, 24, 47, 0.06);
	--nx-shadow-sm: 0 2px 8px rgba(6, 24, 47, 0.07);
	--nx-shadow:    0 6px 20px rgba(6, 24, 47, 0.09);
	--nx-shadow-lg: 0 18px 44px rgba(6, 24, 47, 0.14);

	/* ---- Motion ---------------------------------------------------------- */
	--nx-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
	--nx-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
	--nx-dur-fast:  140ms;
	--nx-dur:       260ms;
	--nx-dur-slow:  520ms;

	/* ---- Z-index --------------------------------------------------------- */
	--nx-z-base:    1;
	--nx-z-sticky:  100;
	--nx-z-header:  200;
	--nx-z-drawer:  300;
	--nx-z-overlay: 290;
}

/* Breakpoints (reference — CSS custom props can't be used in media queries)
   sm  480px
   md  768px
   lg  1024px
   xl  1280px                                                              */